@import '_content/Blazor.Bootstrap/Blazor.Bootstrap.7t9tbfaemk.bundle.scp.css';
@import '_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.wuc5ioiakb.bundle.scp.css';
@import '_content/PSC.Blazor.Components.MarkdownEditor/PSC.Blazor.Components.MarkdownEditor.bundle.scp.css';

/* /Components/Layout/LandingLayout.razor.rz.scp.css */
/* Landing Layout Container */
.landing-layout-container[b-8rb8jkwbbp] {
    min-height: 100vh;
    background: white;
}

/* Header Styles */
.header[b-8rb8jkwbbp] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: var(--accent-fill-rest);
    backdrop-filter: blur(10px);
    z-index: 1000;
    margin-top: calc(var(--banner-height, 48px));
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.header.header-hidden[b-8rb8jkwbbp] {
    transform: translateY(-100%);
}

.header-content[b-8rb8jkwbbp] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.logo-link[b-8rb8jkwbbp] {
    text-decoration: none;
}

.logo-text[b-8rb8jkwbbp] {
    font-family: 'Damion', cursive;
    font-size: 40px;
    font-weight: 600;
    letter-spacing: 2px;
    color: white;
}

.nav-menu[b-8rb8jkwbbp] {
    display: flex;
    gap: 2rem;
    align-items: center;
}

/* Dropdown */
.nav-item-with-dropdown[b-8rb8jkwbbp] {
    position: relative;
}

.dropdown-trigger[b-8rb8jkwbbp] {
    cursor: pointer;
}

.nav-link[b-8rb8jkwbbp] {
    color: white;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    position: relative;
    display: inline-block;
    padding: 0.5rem 0.75rem;
}

.nav-link[b-8rb8jkwbbp]::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background: white;
    transition: width 0.3s ease;
}

.nav-link:hover[b-8rb8jkwbbp] {
    color: white;
}

.nav-link:hover[b-8rb8jkwbbp]::after {
    width: 80%;
}

/* Dropdown Content - Grid Layout */
.dropdown-content[b-8rb8jkwbbp] {
    position: absolute;
    top: calc(100% + 0.75rem);
    left: 50%;
    transform: translateX(-50%);
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    z-index: 99999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0.75rem;
    border: 1px solid rgba(0, 0, 0, 0.06);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 0.5rem;
    min-width: 400px;
    max-width: 500px;
}

/* Wider dropdown for platform features - 2x5 grid */
.dropdown-content-features[b-8rb8jkwbbp] {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(5, 1fr);
    min-width: 400px;
    max-width: 500px;
}

.nav-item-with-dropdown:hover .dropdown-content[b-8rb8jkwbbp] {
    opacity: 1;
    visibility: visible;
}

/* Dropdown Link Cards */
.dropdown-link-card[b-8rb8jkwbbp] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    text-decoration: none;
    background: #f8fafc;
    border-radius: 8px;
    transition: all 0.25s ease;
    border: 1px solid transparent;
    min-height: 44px;
}

.dropdown-link-card:hover[b-8rb8jkwbbp] {
    background: linear-gradient(135deg, rgba(100, 116, 139, 0.08) 0%, rgba(100, 116, 139, 0.04) 100%);
    border-color: rgba(100, 116, 139, 0.2);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(100, 116, 139, 0.15);
}

/* Dropdown Image */
.dropdown-image[b-8rb8jkwbbp] {
    width: 32px;
    height: 32px;
    object-fit: cover;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    transition: all 0.25s ease;
    flex-shrink: 0;
}

.dropdown-link-card:hover .dropdown-image[b-8rb8jkwbbp] {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(100, 116, 139, 0.2);
}

/* Dropdown Icon (for items without images) */
.dropdown-icon[b-8rb8jkwbbp] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    transition: all 0.25s ease;
    flex-shrink: 0;
}

.dropdown-link-card:hover .dropdown-icon[b-8rb8jkwbbp] {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(100, 116, 139, 0.2);
}

.dropdown-text[b-8rb8jkwbbp] {
    color: #2d3748;
    font-weight: 600;
    font-size: 0.8125rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.dropdown-link-card:hover .dropdown-text[b-8rb8jkwbbp] {
    color: #475569;
}

/* Special styling for "Tümünü Gör" link */
.dropdown-link-all[b-8rb8jkwbbp] {
    background: linear-gradient(135deg, rgba(100, 116, 139, 0.1) 0%, rgba(100, 116, 139, 0.05) 100%);
    border: 1px solid rgba(100, 116, 139, 0.3);
}

.dropdown-link-all:hover[b-8rb8jkwbbp] {
    background: linear-gradient(135deg, #64748b 0%, #475569 100%);
    border-color: #64748b;
}

.dropdown-link-all:hover .dropdown-text[b-8rb8jkwbbp] {
    color: white;
}

.dropdown-link-all:hover .dropdown-icon[b-8rb8jkwbbp] {
    background: rgba(255, 255, 255, 0.2);
}

.header-actions[b-8rb8jkwbbp] {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.btn-courier[b-8rb8jkwbbp] {
    padding: 0.75rem 1.5rem;
    background: var(--accent-fill-rest);
    color: white;
    text-decoration: none;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.btn-courier:hover[b-8rb8jkwbbp] {
    opacity: 0.9;
}

.btn-secondary[b-8rb8jkwbbp] {
    padding: 0.75rem 1.5rem;
    color: white;
    text-decoration: none;
    font-weight: 500;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.btn-secondary:hover[b-8rb8jkwbbp] {
    background: #f7fafc;
    color: var(--accent-fill-rest);
}

.btn-primary[b-8rb8jkwbbp] {
    padding: 0.75rem 1.5rem;
    background: white;
    color: var(--accent-fill-rest);
    text-decoration: none;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.btn-primary:hover[b-8rb8jkwbbp] {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
}

/* Body Content */
.landing-body-content[b-8rb8jkwbbp] {
    padding-top: calc(var(--banner-height, 48px) + 80px);
}

/* Floating Courier Button */
.floating-courier-btn[b-8rb8jkwbbp] {
    position: fixed;
    bottom: 100px;
    right: 30px;
    z-index: 9998;
    animation: slideInUp-b-8rb8jkwbbp 0.5s ease;
}

@keyframes slideInUp-b-8rb8jkwbbp {
    from {
        transform: translateY(100px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.close-float-btn[b-8rb8jkwbbp] {
    position: absolute;
    top: -8px;
    right: -8px;
    background: #ef4444;
    color: white;
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    z-index: 9999;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.close-float-btn:hover[b-8rb8jkwbbp] {
    background: #dc2626;
    transform: scale(1.1);
}

.courier-float-link[b-8rb8jkwbbp] {
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, var(--accent-fill-rest) 0%, #5a7de8 100%);
    color: white;
    text-decoration: none;
    padding: 16px 20px;
    border-radius: 50px;
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.4);
    transition: all 0.3s ease;
}

.courier-float-link:hover[b-8rb8jkwbbp] {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(102, 126, 234, 0.5);
}

.float-icon[b-8rb8jkwbbp] {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
}

.float-icon fluent-icon[b-8rb8jkwbbp],
.float-icon svg[b-8rb8jkwbbp],
.float-icon svg path[b-8rb8jkwbbp],
.float-icon *[b-8rb8jkwbbp] {
    color: white !important;
    fill: white !important;
    stroke: white !important;
}

.float-text[b-8rb8jkwbbp] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.float-text strong[b-8rb8jkwbbp] {
    font-size: 16px;
    font-weight: 700;
}

/* Mobile Menu Toggle Button */
.mobile-menu-toggle[b-8rb8jkwbbp] {
    display: none;
    background: transparent;
    border: none;
    color: white;
    cursor: pointer;
    padding: 0.5rem;
    margin-right: 0.5rem;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.mobile-menu-toggle:hover[b-8rb8jkwbbp] {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
}

/* Mobile Sidebar Overlay */
.mobile-sidebar-overlay[b-8rb8jkwbbp] {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.mobile-sidebar-overlay.open[b-8rb8jkwbbp] {
    display: block;
    opacity: 1;
}

/* Mobile Sidebar */
.mobile-sidebar[b-8rb8jkwbbp] {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 280px;
    background: white;
    z-index: 9999;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.15);
}

.mobile-sidebar.open[b-8rb8jkwbbp] {
    transform: translateX(0);
}

.mobile-sidebar-header[b-8rb8jkwbbp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1rem;
    border-bottom: 1px solid #e2e8f0;
    background: #f7fafc;
}

.mobile-sidebar-title[b-8rb8jkwbbp] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1a202c;
}

.mobile-sidebar-close[b-8rb8jkwbbp] {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: background 0.2s ease;
}

.mobile-sidebar-close:hover[b-8rb8jkwbbp] {
    background: rgba(0, 0, 0, 0.05);
}

.mobile-sidebar-content[b-8rb8jkwbbp] {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
}

.mobile-menu-section[b-8rb8jkwbbp] {
    margin-bottom: 1.5rem;
}

.mobile-menu-section-title[b-8rb8jkwbbp] {
    font-size: 0.875rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.75rem;
    padding: 0 0.5rem;
}

.mobile-menu-link[b-8rb8jkwbbp] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.5rem;
    text-decoration: none;
    color: #1a202c;
    font-weight: 500;
    border-radius: 8px;
    transition: all 0.2s ease;
    margin-bottom: 0.25rem;
}

.mobile-menu-link:hover[b-8rb8jkwbbp] {
    background: #f7fafc;
    transform: translateX(4px);
}

.mobile-menu-icon[b-8rb8jkwbbp] {
    width: 24px;
    height: 24px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
}

.mobile-menu-link-special[b-8rb8jkwbbp] {
    color: #667eea;
    font-weight: 600;
}

.mobile-menu-link-all[b-8rb8jkwbbp] {
    background: #f7fafc;
    font-weight: 600;
}

.mobile-menu-actions[b-8rb8jkwbbp] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem 0.5rem;
    border-top: 1px solid #e2e8f0;
    margin-top: auto;
}

.mobile-btn-secondary[b-8rb8jkwbbp],
.mobile-btn-primary[b-8rb8jkwbbp] {
    display: block;
    text-align: center;
    padding: 0.875rem 1rem;
    text-decoration: none;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.mobile-btn-secondary[b-8rb8jkwbbp] {
    background: #f7fafc;
    color: var(--accent-fill-rest);
    border: 1px solid #e2e8f0;
}

.mobile-btn-secondary:hover[b-8rb8jkwbbp] {
    background: #edf2f7;
}

.mobile-btn-primary[b-8rb8jkwbbp] {
    background: var(--accent-fill-rest);
    color: white;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.mobile-btn-primary:hover[b-8rb8jkwbbp] {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
}

/* Responsive Design */
@media (max-width: 768px) {
    .logo-text[b-8rb8jkwbbp] {
        font-size: 24px;
        letter-spacing: 1.5px;
    }

    .header-content[b-8rb8jkwbbp] {
        padding: 1rem 0.5rem;
    }

    /* Show mobile menu toggle button */
    .mobile-menu-toggle[b-8rb8jkwbbp] {
        display: flex;
    }

    /* Hide desktop nav menu on mobile */
    .nav-menu[b-8rb8jkwbbp] {
        display: none;
    }

    .header-actions[b-8rb8jkwbbp] {
        gap: 0.5rem;
    }

    .btn-secondary[b-8rb8jkwbbp],
    .btn-primary[b-8rb8jkwbbp] {
        padding: 0.5rem 0.75rem;
        font-size: 0.85rem;
    }

    .floating-courier-btn[b-8rb8jkwbbp] {
        bottom: 100px;
        right: 20px;
    }

    .courier-float-link[b-8rb8jkwbbp] {
        padding: 12px 16px;
    }

    .float-text strong[b-8rb8jkwbbp] {
        font-size: 14px;
    }

    .float-text span[b-8rb8jkwbbp] {
        font-size: 11px;
    }
}
/* /Components/Pages/AdminDashboard/AdminDashboard.razor.rz.scp.css */
.admin-dashboard-container[b-m7cs77to6x] {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.page-header[b-m7cs77to6x] {
    background: var(--neutral-layer-1);
    padding: 1.5rem;
    border-radius: var(--layer-corner-radius);
    box-shadow: var(--elevation-shadow-card-rest);
}

.filters-section[b-m7cs77to6x] {
    margin-bottom: 0.5rem;
}

.filters-card[b-m7cs77to6x] {
    padding: 1rem;
}

.filters-header[b-m7cs77to6x] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.filters-content[b-m7cs77to6x] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    align-items: end;
    overflow: visible;
    position: relative;
}

.filter-item[b-m7cs77to6x] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    position: relative;
    z-index: auto;
}

/* Fix date picker popup positioning */
.filter-item[b-m7cs77to6x]  fluent-date-picker {
    position: relative;
}

.filter-item[b-m7cs77to6x]  fluent-date-picker::part(root) {
    overflow: visible;
    position: relative;
}

.filter-item[b-m7cs77to6x]  .fluent-calendar-picker {
    position: absolute;
    top: auto;
    bottom: 100%;
    margin-bottom: 0.25rem;
    z-index: 1000;
}

.filter-actions[b-m7cs77to6x] {
    display: flex;
    gap: 0.5rem;
    flex-direction: row !important;
}

@media (max-width: 768px) {
    .filters-content[b-m7cs77to6x] {
        grid-template-columns: 1fr;
    }
}

.metrics-row[b-m7cs77to6x] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

.charts-row[b-m7cs77to6x] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    gap: 1.5rem;
}

.bottom-row[b-m7cs77to6x] {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1.5rem;
}

@media (max-width: 1024px) {
    .bottom-row[b-m7cs77to6x] {
        grid-template-columns: 1fr;
    }

    .charts-row[b-m7cs77to6x] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/AdminDashboard/Cards/AdminCompanyStoreMetricsCard.razor.rz.scp.css */
.metric-card[b-6ql20mqsx6] {
    padding: 1.5rem;
    height: 100%;
}

.card-header[b-6ql20mqsx6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    font-weight: 600;
}

.card-content[b-6ql20mqsx6] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.big-number[b-6ql20mqsx6] {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--accent-fill-rest);
}

.sub-metrics[b-6ql20mqsx6] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.badge[b-6ql20mqsx6] {
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.875rem;
}

.badge.success[b-6ql20mqsx6] {
    background: rgba(16, 185, 129, 0.1);
    color: rgb(16, 185, 129);
}

.badge.neutral[b-6ql20mqsx6] {
    background: rgba(156, 163, 175, 0.1);
    color: rgb(107, 114, 128);
}
/* /Components/Pages/AdminDashboard/Cards/AdminEmployeeMetricsCard.razor.rz.scp.css */
.metric-card[b-vfq8m67hux] {
    padding: 1.5rem;
    height: 100%;
}

.card-header[b-vfq8m67hux] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    font-weight: 600;
}

.card-content[b-vfq8m67hux] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.big-number[b-vfq8m67hux] {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--accent-fill-rest);
}

.sub-metrics[b-vfq8m67hux] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.badge[b-vfq8m67hux] {
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.875rem;
}

.badge.success[b-vfq8m67hux] {
    background: rgba(16, 185, 129, 0.1);
    color: rgb(16, 185, 129);
}

.badge.neutral[b-vfq8m67hux] {
    background: rgba(156, 163, 175, 0.1);
    color: rgb(107, 114, 128);
}
/* /Components/Pages/AdminDashboard/Cards/AdminFirmMetricsCard.razor.rz.scp.css */
.metric-card[b-jt9f141dkj] {
    padding: 1.5rem;
    height: 100%;
}

.card-header[b-jt9f141dkj] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    font-weight: 600;
}

.card-content[b-jt9f141dkj] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.big-number[b-jt9f141dkj] {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--accent-fill-rest);
}

.sub-metrics[b-jt9f141dkj] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.badge[b-jt9f141dkj] {
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.875rem;
}

.badge.success[b-jt9f141dkj] {
    background: rgba(16, 185, 129, 0.1);
    color: rgb(16, 185, 129);
}

.badge.warning[b-jt9f141dkj] {
    background: rgba(245, 158, 11, 0.1);
    color: rgb(245, 158, 11);
}
/* /Components/Pages/AdminDashboard/Cards/AdminOrderDeliveryMetricsCard.razor.rz.scp.css */
.metric-card[b-ww2l39chim] {
    padding: 1.5rem;
    height: 100%;
}

.card-header[b-ww2l39chim] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    font-weight: 600;
}

.card-content[b-ww2l39chim] {
    display: flex;
    flex-direction: column;
}

.metrics-grid[b-ww2l39chim] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.metric-box[b-ww2l39chim] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--neutral-layer-2);
    border-radius: 8px;
}

.metric-value[b-ww2l39chim] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--neutral-foreground-rest);
}

.metric-label[b-ww2l39chim] {
    font-size: 0.75rem;
    color: var(--neutral-foreground-hint);
    margin-top: 0.25rem;
}

.divider[b-ww2l39chim] {
    height: 1px;
    background: var(--neutral-stroke-divider);
    margin: 1rem 0;
}

.order-type-breakdown[b-ww2l39chim] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.breakdown-title[b-ww2l39chim] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.type-metrics[b-ww2l39chim] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

.type-metric[b-ww2l39chim] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: var(--neutral-layer-2);
    border-radius: 6px;
}

.type-metric .metric-value[b-ww2l39chim] {
    font-size: 1.25rem;
    font-weight: 700;
}

.type-metric .metric-label[b-ww2l39chim] {
    font-size: 0.75rem;
    color: var(--neutral-foreground-hint);
}
/* /Components/Pages/AdminDashboard/Cards/AdminPoolOrdersCard.razor.rz.scp.css */
.metric-card[b-oaaoh8xqtp] { padding: 1.5rem; height: 100%; }
.card-header[b-oaaoh8xqtp] { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem; font-weight: 600; }
.pools-list[b-oaaoh8xqtp] { display: flex; flex-direction: column; gap: 0.5rem; }
.pool-item[b-oaaoh8xqtp] { padding: 0.75rem; background: var(--neutral-layer-2); border-radius: 6px; display: flex; justify-content: space-between; align-items: center; }
.pool-info[b-oaaoh8xqtp] { display: flex; flex-direction: column; gap: 0.25rem; }
.pool-name[b-oaaoh8xqtp] { font-weight: 600; font-size: 0.875rem; }
.order-details[b-oaaoh8xqtp] { font-size: 0.75rem; color: var(--neutral-foreground-hint); }
/* /Components/Pages/AdminDashboard/Cards/AdminRecentFirmsCard.razor.rz.scp.css */
.metric-card[b-swcilhc11x] { padding: 1.5rem; height: 100%; }
.card-header[b-swcilhc11x] { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem; font-weight: 600; }
.firms-list[b-swcilhc11x] { display: flex; flex-direction: column; gap: 1rem; max-height: 600px; overflow-y: auto; }

.firm-item[b-swcilhc11x] {
    padding: 1rem;
    background: var(--neutral-layer-2);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.firm-header[b-swcilhc11x] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.firm-main-info[b-swcilhc11x] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
}

.firm-name[b-swcilhc11x] {
    font-weight: 600;
    font-size: 1rem;
    color: var(--neutral-foreground-rest);
}

.firm-meta[b-swcilhc11x] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.meta-item[b-swcilhc11x] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: var(--neutral-foreground-hint);
}

.firm-actions[b-swcilhc11x] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-shrink: 0;
}

.firm-details[b-swcilhc11x] {
    padding-top: 0.75rem;
    border-top: 1px solid var(--neutral-stroke-divider);
}

.detail-grid[b-swcilhc11x] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
}

.detail-item[b-swcilhc11x] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--neutral-foreground-rest);
}

.detail-item.full-width[b-swcilhc11x] {
    grid-column: 1 / -1;
}
/* /Components/Pages/AdminDashboard/Cards/AdminWalletMetricsCard.razor.rz.scp.css */
.metric-card[b-rusmv0x547] {
    padding: 1.5rem;
    height: 100%;
}

.card-header[b-rusmv0x547] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    font-weight: 600;
}

.card-content[b-rusmv0x547] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.big-number[b-rusmv0x547] {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--accent-fill-rest);
}

.sub-metrics[b-rusmv0x547] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.badge[b-rusmv0x547] {
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.875rem;
}

.badge.success[b-rusmv0x547] {
    background: rgba(16, 185, 129, 0.1);
    color: rgb(16, 185, 129);
}

.badge.warning[b-rusmv0x547] {
    background: rgba(245, 158, 11, 0.1);
    color: rgb(245, 158, 11);
}
/* /Components/Pages/AdminDashboard/Cards/AdminWorkspaceCouriersCard.razor.rz.scp.css */
.metric-card[b-rj8wrwm0g1] { padding: 1.5rem; height: 100%; }
.card-header[b-rj8wrwm0g1] { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem; font-weight: 600; }
.card-content[b-rj8wrwm0g1] { display: flex; flex-direction: column; }
.workspace-selector[b-rj8wrwm0g1] { margin-bottom: 1rem; }
.selector-label[b-rj8wrwm0g1] { font-size: 0.875rem; font-weight: 600; margin-bottom: 0.5rem; color: var(--neutral-foreground-rest); }
.couriers-list[b-rj8wrwm0g1] { display: flex; flex-direction: column; gap: 0.5rem; max-height: 400px; overflow-y: auto; }
.courier-item[b-rj8wrwm0g1] { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem; background: var(--neutral-layer-2); border-radius: 6px; }
.courier-info[b-rj8wrwm0g1] { flex: 1; }
.courier-name[b-rj8wrwm0g1] { font-weight: 600; font-size: 0.875rem; }
.courier-stats[b-rj8wrwm0g1] { font-size: 0.75rem; color: var(--neutral-foreground-hint); margin-top: 0.25rem; }
/* /Components/Pages/AIAssistant/AIAssistant.razor.rz.scp.css */
.page-container[b-c4fxmsfcyx] {
    height: 100vh;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    overflow: hidden;
}

.page-header[b-c4fxmsfcyx] {
    background: var(--neutral-layer-1);
    padding: 1.5rem;
    border-radius: var(--layer-corner-radius);
    box-shadow: var(--elevation-shadow-card-rest);
}

.page-subtitle[b-c4fxmsfcyx] {
    color: var(--neutral-foreground-hint);
    margin-top: 0.5rem;
}

.chat-container[b-c4fxmsfcyx] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    background: var(--neutral-layer-1);
    border-radius: var(--layer-corner-radius);
    box-shadow: var(--elevation-shadow-card-rest);
    border: 1px solid var(--neutral-stroke-divider-rest);
}

.chat-messages[b-c4fxmsfcyx] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-height: 0;
}

.welcome-message[b-c4fxmsfcyx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
/*    padding: 2rem;*/
    gap: 1rem;
    height: 100%;
}

.suggested-questions[b-c4fxmsfcyx] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 2rem;
    align-items: center;
    width: 100%;
}

.suggestions-grid[b-c4fxmsfcyx] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 0.75rem;
    width: 100%;
}

.suggestions-title[b-c4fxmsfcyx] {
    margin-bottom: 0.5rem;
    color: var(--neutral-foreground-hint);
}

.suggestion-button[b-c4fxmsfcyx] {
    width: 100%;
    text-align: center;
    padding: 0.75rem;
    border-radius: 8px;
    white-space: normal;
    height: auto;
    min-height: 60px;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .suggestions-grid[b-c4fxmsfcyx] {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 0.5rem;
    }
}

@media (max-width: 600px) {
    .suggestions-grid[b-c4fxmsfcyx] {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 0.5rem;
    }
}

@media (max-width: 480px) {
    .suggestions-grid[b-c4fxmsfcyx] {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
    
    .suggestion-button[b-c4fxmsfcyx] {
        min-height: 50px;
        padding: 0.5rem;
    }
}

.chat-message[b-c4fxmsfcyx] {
    max-width: 80%;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    position: relative;
}

.user-message[b-c4fxmsfcyx] {
    align-self: flex-end;
    background: var(--accent-fill-rest);
    color: white;
    padding: 1rem;
    border-radius: 16px 16px 4px 16px;
    margin-bottom: 20px;
}

.assistant-message[b-c4fxmsfcyx] {
    align-self: flex-start;
    background: var(--neutral-layer-2);
    padding: 1rem;
    border-radius: 16px 16px 16px 4px;
    margin-bottom: 20px;
}

.message-time[b-c4fxmsfcyx] {
    position: absolute;
    bottom: -18px;
    right: 8px;
    font-size: 0.75rem;
    color: var(--neutral-foreground-hint);
    opacity: 0.7;
}

.message-content[b-c4fxmsfcyx] {
    line-height: 1.5;
}

.assistant-content[b-c4fxmsfcyx] {
    white-space: pre-line;
}

.typing-indicator[b-c4fxmsfcyx] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--neutral-foreground-hint);
    font-style: italic;
    margin-top: 0.5rem;
}

.chat-input-container[b-c4fxmsfcyx] {
    border-top: 1px solid var(--neutral-stroke-divider-rest);
    background: var(--neutral-layer-floating);
    flex-shrink: 0;
    padding: 1rem;
}

.user-message .message-time[b-c4fxmsfcyx] {
    color: white;
    opacity: 0.9;
}

/* Scrollbar Styling */
.chat-messages[b-c4fxmsfcyx]::-webkit-scrollbar {
    width: 8px;
}

.chat-messages[b-c4fxmsfcyx]::-webkit-scrollbar-track {
    background: var(--neutral-layer-2);
    border-radius: 4px;
}

.chat-messages[b-c4fxmsfcyx]::-webkit-scrollbar-thumb {
    background: var(--neutral-stroke-control-default);
    border-radius: 4px;
}

.chat-messages[b-c4fxmsfcyx]::-webkit-scrollbar-thumb:hover {
    background: var(--neutral-stroke-control-hover);
}

/* Responsive Design */
@media (max-width: 768px) {
    .chat-message[b-c4fxmsfcyx] {
        max-width: 95%;
    }
    
    .page-container[b-c4fxmsfcyx] {
        padding: 0.5rem;
        gap: 0.5rem;
    }
    
    .page-header[b-c4fxmsfcyx] {
        padding: 1rem;
    }
    
    .welcome-message[b-c4fxmsfcyx] {
        padding: 1rem;
    }
    
    .suggested-questions[b-c4fxmsfcyx] {
        width: 100%;
    }
}
/* /Components/Pages/Announcements/Announcements.razor.rz.scp.css */
.announcements-container[b-3x5g971sgy] {
    width: 100%;
}

.loading-container[b-3x5g971sgy], .empty-state[b-3x5g971sgy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    gap: 16px;
    text-align: center;
}

.empty-state h3[b-3x5g971sgy] {
    margin: 0;
    color: var(--neutral-foreground-rest);
}

.empty-state p[b-3x5g971sgy] {
    margin: 0;
    color: var(--neutral-foreground-hint);
}

.announcements-grid[b-3x5g971sgy] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.announcement-card[b-3x5g971sgy] {
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    border: 1px solid var(--neutral-stroke-rest);
    height: fit-content;
    position: relative;
    overflow: hidden;
}

.announcement-card:hover[b-3x5g971sgy] {
    transform: translateY(-2px);
    box-shadow: var(--elevation-shadow-card-hover);
    border-color: var(--accent-fill-rest);
}

/* Indicator Styles */
.category-indicator[b-3x5g971sgy] {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    z-index: 1;
}

.priority-indicator[b-3x5g971sgy] {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 12px;
    z-index: 2;
}

.priority-indicator.critical[b-3x5g971sgy] {
    background-color: var(--error);
}

.priority-indicator.high[b-3x5g971sgy] {
    background-color: var(--warning);
}

.priority-indicator.low[b-3x5g971sgy] {
    background-color: var(--neutral-stroke-rest);
}

.sticky-indicator[b-3x5g971sgy] {
    position: absolute;
    top: 8px;
    right: 40px;
    width: 20px;
    height: 20px;
    background-color: var(--accent-fill-rest);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 10px;
    z-index: 2;
}

.card-header[b-3x5g971sgy] {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    margin-bottom: 1rem;
    padding-top: 8px;
}


.card-actions[b-3x5g971sgy] {
    display: flex;
    gap: 0.5rem;
    margin-left: 1rem;
}

.card-content h3.card-title[b-3x5g971sgy] {
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.4;
    margin: 0 0 0.75rem 0;
    color: var(--neutral-foreground-rest);
}

.card-description[b-3x5g971sgy] {
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--neutral-foreground-hint);
    margin: 0 0 1rem 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-meta[b-3x5g971sgy] {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.85rem;
    color: var(--neutral-foreground-hint);
}

.meta-date[b-3x5g971sgy] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* Pagination Styles */
.pagination-container[b-3x5g971sgy] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
    padding: 1rem;
}

.page-info[b-3x5g971sgy] {
    font-size: 0.9rem;
    color: var(--neutral-foreground-hint);
    font-weight: 500;
}

@media (max-width: 768px) {
    .announcements-grid[b-3x5g971sgy] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .card-header[b-3x5g971sgy] {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .card-actions[b-3x5g971sgy] {
        margin-left: 0;
        align-self: flex-end;
    }

    .pagination-container[b-3x5g971sgy] {
        gap: 0.5rem;
        margin-top: 1rem;
    }

    .page-info[b-3x5g971sgy] {
        font-size: 0.8rem;
    }
}
/* /Components/Pages/CustomerDeliveryMonitor/CustomerDeliveryMonitor.razor.rz.scp.css */
/* Reset and base styles */
*[b-0q53v3v20p] {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Full screen container */
.delivery-tracker-container[b-0q53v3v20p] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh; /* Dynamic viewport height for mobile */
    width: 100vw;
    width: 100dvw; /* Dynamic viewport width */
    overflow: hidden;
    background-color: #f5f5f5;
    /* Safe area support for iOS */
    padding-top: env(safe-area-inset-top);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
    /* Prevent pull-to-refresh and other touch actions on container */
    overscroll-behavior: none;
    touch-action: pan-x pan-y;
}

/* Map container takes all available space */
.map-container[b-0q53v3v20p] {
    flex: 1;
    position: relative;
    width: 100%;
    height: 100%;
    touch-action: manipulation; /* Allow pinch-zoom and pan on map */
    overscroll-behavior: contain; /* Prevent overscroll from affecting parent */
}

/* Fluent Card container - Mobile first approach */
.fluent-card-container[b-0q53v3v20p] {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 350px;
    z-index: 10;
    border-radius: 8px;
    overflow: hidden;
}

/* Desktop adjustments */
@media (min-width: 768px) {
    .fluent-card-container[b-0q53v3v20p] {
        position: absolute;
        top: 20px;
        bottom: auto;
        right: auto;
        left: 20px;
        transform: none;
        max-width: 350px;
        width: 320px;
    }
}

/* Dark theme card */
.dark-theme-card[b-0q53v3v20p] {
    background-color: #242424;
    color: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    width: 100%;
}

/* Progress bar at the very top */
.top-progress-container[b-0q53v3v20p] {
    height: 8px;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

.progress-bar[b-0q53v3v20p] {
    height: 100%;
    transition: width 0.5s ease;
    background-color: #4caf50 !important;
}

/* Status text now above the header */
.status-text-container[b-0q53v3v20p] {
    background-color: #1e1e1e;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.status-text[b-0q53v3v20p] {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
}

/* Card header */
.card-header[b-0q53v3v20p] {
    padding: 16px;
    background-color: #242424;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

/* Order info in header */
.order-info[b-0q53v3v20p] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.order-title[b-0q53v3v20p] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
}

.order-title strong[b-0q53v3v20p] {
    font-weight: 600;
    color: rgba(255, 255, 255, 1);
}

/* Status badge */
.status-badge[b-0q53v3v20p] {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    color: white;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* Card content */
.card-content[b-0q53v3v20p] {
    padding: 16px;
    background-color: #242424;
}

/* Section divider - now using <hr> element */
.section-divider[b-0q53v3v20p] {
    margin: 5px 0;
    border: none;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.1);
}

/* Location divider - smaller margin */
.location-divider[b-0q53v3v20p] {
    margin: 8px 0;
    border: none;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.1);
}

.delivery-info-section[b-0q53v3v20p] {
    padding: 8px 15px;
    margin-bottom: 0;
}

/* Location items */
.location-item[b-0q53v3v20p] {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    position: relative;
}

.location-item:last-child[b-0q53v3v20p] {
    margin-bottom: 0;
}

.location-icon[b-0q53v3v20p] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-right: 12px;
    flex-shrink: 0;
}

.location-icon svg[b-0q53v3v20p] {
    width: 100%;
    height: 100%;
    vertical-align: middle;
}

.location-text-container[b-0q53v3v20p] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    padding-top: 8px;
}

.location-title[b-0q53v3v20p] {
    font-weight: 600;
    font-size: 13px;
    color: rgba(255, 255, 255, 1);
    line-height: 1.3;
    margin-bottom: 2px;
}

.location-address[b-0q53v3v20p] {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.3;
}

/* Courier section */
.courier-section[b-0q53v3v20p] {
    margin-top: 0;
    padding-top: 0;
}

/* Time and Distance styles */
.time-distance-container[b-0q53v3v20p] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    margin-bottom: 5px;
}

.time-text[b-0q53v3v20p] {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #ffffff;
}

.distance-text[b-0q53v3v20p] {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #ffffff;
}

.icon-container[b-0q53v3v20p] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: #607d8b;
    margin-right: 8px;
    flex-shrink: 0;
}

.time-icon[b-0q53v3v20p], .distance-icon[b-0q53v3v20p] {
    color: #ffffff;
}

.time-inline[b-0q53v3v20p], .distance-inline[b-0q53v3v20p] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    background-color: #607d8b;
    border-radius: 50%;
    padding: 2px;
}

.time-inline[b-0q53v3v20p]  svg, .distance-inline[b-0q53v3v20p]  svg {
    width: 100%;
    height: 100%;
}

/* Icon row for separate icons below */
.icon-row[b-0q53v3v20p] {
    display: flex;
    align-items: center;
    margin-top: 16px;
}

.separate-distance[b-0q53v3v20p] {
    margin-left: 16px;
}

.distance-value[b-0q53v3v20p] {
    font-weight: 600;
    font-size: 13px;
    color: rgba(255, 255, 255, 1);
    margin-left: 12px;
    padding-top: 8px;
}

/* Loading overlay */
.loading-overlay[b-0q53v3v20p] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.8);
    z-index: 20;
}

.loading-overlay div[b-0q53v3v20p] {
    margin-top: 16px;
    font-size: 16px;
    color: #555;
}

/* Courier marker icon */
.courier-marker-icon[b-0q53v3v20p] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-right: 12px;
    flex-shrink: 0;
}

.courier-marker-icon svg[b-0q53v3v20p] {
    width: 36px;
    height: 36px;
}

/* Google Maps InfoWindow styling - Match DeliveryManagement.razor.css */
[b-0q53v3v20p] .gm-style .gm-style-iw-c {
    padding: 0 !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) !important;
    max-width: 360px !important;
    overflow: visible !important;
}

[b-0q53v3v20p] .gm-style .gm-style-iw-d {
    overflow: hidden !important;
    padding: 0 !important;
    max-height: none !important;
}

[b-0q53v3v20p] .gm-style .gm-style-iw-t::after {
    background: linear-gradient(45deg, rgba(235, 235, 240, 1) 50%, rgba(255, 255, 255, 0) 51%, rgba(255, 255, 255, 0) 100%) !important;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1) !important;
}

/* Fix for the close button container */
[b-0q53v3v20p] .gm-style-iw-tc,
[b-0q53v3v20p] .gm-style-iw-tc::after,
[b-0q53v3v20p] .gm-style-iw-tc div {
    background-color: transparent !important;
}

/* Make sure the info window has proper z-index and pointer events */
[b-0q53v3v20p] .gm-style-iw-c {
    z-index: 999 !important;
    pointer-events: auto !important;
    cursor: default !important;
}

/* Make sure close button container is visible but transparent */
[b-0q53v3v20p] .gm-style-iw-chr {
    opacity: 0 !important;
    pointer-events: auto !important;
    display: none !important;
}

/* Google Maps InfoWindow close button styling */
[b-0q53v3v20p] .gm-style .gm-style-iw-c button.gm-ui-hover-effect {
    top: 5px !important;
    right: 5px !important;
    width: 24px !important;
    height: 24px !important;
    background-color: rgba(255, 255, 255, 0.6) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
    z-index: 10 !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transition: all 0.2s ease !important;
}

[b-0q53v3v20p] .gm-style .gm-style-iw-c button.gm-ui-hover-effect:hover {
    background-color: rgba(255, 255, 255, 0.9) !important;
    transform: scale(1.1) !important;
}

[b-0q53v3v20p] .gm-style .gm-style-iw-c button.gm-ui-hover-effect img {
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    opacity: 0.8 !important;
}

/* Marker info window styling */
[b-0q53v3v20p] .marker-info-window {
    padding: 0;
    font-family: 'Segoe UI', system-ui, sans-serif;
    border-radius: 12px;
    overflow: hidden;
    width: 100%;
    max-width: 360px;
}

/* Courier status popup - styled like in the image */
[b-0q53v3v20p] .courier-status-popup {
    width: 100%;
    max-width: 360px;
    background: white;
    border-radius: 12px;
    overflow: hidden;
    font-family: 'Segoe UI', system-ui, sans-serif;
}

[b-0q53v3v20p] .courier-status-header {
    padding: 12px 16px;
    color: white;
    display: flex;
    align-items: center;
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 0.3px;
}

[b-0q53v3v20p] .courier-status-header span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Delivery point popup styles */
[b-0q53v3v20p] .delivery-point-popup {
    width: 100%;
    max-width: 360px;
    background: white;
    border-radius: 12px;
    overflow: hidden;
    font-family: 'Segoe UI', system-ui, sans-serif;
}

[b-0q53v3v20p] .delivery-point-header {
    padding: 12px 16px;
    color: white;
    display: flex;
    align-items: center;
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 0.3px;
}

[b-0q53v3v20p] .point-header-content {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
}

[b-0q53v3v20p] .point-id {
    font-weight: 600;
}

[b-0q53v3v20p] .marker-info-content {
    padding: 16px;
    background: #ebebf0;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

[b-0q53v3v20p] .marker-info-row {
    display: flex;
    margin-bottom: 12px;
    align-items: center;
}

[b-0q53v3v20p] .marker-info-row:last-child {
    margin-bottom: 0;
}

[b-0q53v3v20p] .marker-info-label {
    font-size: 13px;
    font-weight: 500;
    color: #555;
    width: 70px;
    flex-shrink: 0;
}

[b-0q53v3v20p] .marker-info-value {
    font-size: 14px;
    font-weight: 600;
    color: #222;
    flex-grow: 1;
}

/* Status badge styling */
[b-0q53v3v20p] .status-badge {
    padding: 4px 10px;
    border-radius: 16px;
    font-size: 13px;
    font-weight: 600;
    color: white;
    display: inline-flex;
    align-items: center;
}

[b-0q53v3v20p] .delivery-status {
    font-weight: 600;
    font-size: 0.85rem;
}

/* Status indicator in info window */
[b-0q53v3v20p] .marker-info-value.status {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 16px;
    font-size: 13px;
    background-color: #e0e2e8;
}

[b-0q53v3v20p] .marker-info-value.status.online {
    background-color: rgba(56, 193, 114, 0.2);
    color: #1e7d45;
}

[b-0q53v3v20p] .marker-info-value.status.onbreak {
    background-color: rgba(246, 173, 85, 0.2);
    color: #975a16;
}

/* Bottom row with time and distance info */
.bottom-info-row[b-0q53v3v20p] {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 8px 15px;
    margin-top: 0;
}

.bottom-info-item[b-0q53v3v20p] {
    display: flex;
    align-items: center;
}

.bottom-icon-container[b-0q53v3v20p] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.15);
    margin-right: 8px;
    flex-shrink: 0;
}

.bottom-icon[b-0q53v3v20p] {
    color: #ffffff;
    font-size: 14px;
}

.bottom-info-value[b-0q53v3v20p] {
    font-weight: 500;
    font-size: 14px;
    color: #ffffff;
}

/* Location marker styles */
.location-marker[b-0q53v3v20p] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: transparent;
    font-weight: bold;
    font-size: 18px;
    color: white;
}

.pickup .location-marker[b-0q53v3v20p] {
    background-color: #4CAF50;
    border: 2px solid white;
}

.delivery .location-marker[b-0q53v3v20p] {
    background-color: #2196F3;
    border: 2px solid white;
}

.courier .location-marker[b-0q53v3v20p] {
    background-color: #2ecc71;
    border: 2px solid white;
}

/* Last update container at the bottom of the card */
.last-update-container[b-0q53v3v20p] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
}

.last-update-text[b-0q53v3v20p] {
    font-size: 0.85rem;
    color: #888;
    font-weight: 400;
}

.last-update-container[b-0q53v3v20p]  fluent-button::part(control) {
    border: 1px solid #888;
    color: #888;
    transition: all 0.2s ease;
    min-width: 32px;
    height: 32px;
    padding: 0;
}

.last-update-container[b-0q53v3v20p]  fluent-button:hover::part(control) {
    border-color: #888;
    transform: scale(1.05);
}

.last-update-container[b-0q53v3v20p]  fluent-button:active::part(control) {
    transform: scale(0.95);
}

/* ========== MOBILE STYLES ========== */
/* Hide desktop card on mobile */
.mobile .fluent-card-container[b-0q53v3v20p] {
    display: none;
}

/* Swipeable card at the bottom of the screen - Mobile only */
.swipeable-card[b-0q53v3v20p] {
    display: none;
}

.mobile .swipeable-card[b-0q53v3v20p] {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(32, 32, 32, 0.95);
    color: white;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease-in-out;
    z-index: 100;
    max-height: 85vh;
    max-height: 85dvh; /* Dynamic viewport height */
    overflow-y: auto;
    /* Safe area support - add padding at bottom */
    padding-bottom: env(safe-area-inset-bottom);
}

/* Handle for toggling */
.mobile .swipe-handle[b-0q53v3v20p] {
    width: 100%;
    height: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.1);
    transition: background-color 0.2s ease;
    position: relative;
}

.mobile .swipe-handle:hover[b-0q53v3v20p],
.mobile .swipe-handle:active[b-0q53v3v20p] {
    background-color: rgba(0, 0, 0, 0.2);
}

.mobile .handle-indicator[b-0q53v3v20p] {
    width: 50px;
    height: 5px;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 3px;
    margin: 8px 0;
}

.mobile .toggle-text[b-0q53v3v20p] {
    position: absolute;
    right: 15px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    font-weight: 500;
}

/* Expanded and collapsed states */
.mobile .swipeable-card.collapsed[b-0q53v3v20p] {
    transform: translateY(calc(100% - 200px - env(safe-area-inset-bottom)));
}

.mobile .swipeable-card.expanded[b-0q53v3v20p] {
    transform: translateY(0);
}

/* Card content - Mobile */
.mobile .mobile-card-content[b-0q53v3v20p] {
    padding: 0 0 10px 0;
}

.mobile .top-progress-container[b-0q53v3v20p] {
    height: 5px;
}

.mobile .status-text-container[b-0q53v3v20p] {
    padding: 10px 15px;
    text-align: center;
}

.mobile .status-text[b-0q53v3v20p] {
    font-size: 16px;
}

.mobile .card-header[b-0q53v3v20p] {
    padding: 10px 15px;
}

.mobile .order-title[b-0q53v3v20p] {
    gap: 8px;
}

.mobile .status-badge[b-0q53v3v20p] {
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 500;
}

.mobile .delivery-info-content[b-0q53v3v20p] {
    padding: 0;
}

.mobile .location-item[b-0q53v3v20p] {
    padding: 5px 0;
}

.mobile .location-text-container[b-0q53v3v20p] {
    padding-top: 0;
    min-width: 0;
}

.mobile .location-title[b-0q53v3v20p] {
    font-size: 14px;
    margin-bottom: 4px;
}

.mobile .location-address[b-0q53v3v20p] {
    font-size: 13px;
    line-height: 1.4;
    word-break: break-word;
}

.mobile .bottom-info-item[b-0q53v3v20p] {
    margin-top: 2px;
}

.mobile .bottom-info-value[b-0q53v3v20p] {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
}

.mobile .location-marker[b-0q53v3v20p] {
    font-size: 16px;
}

.mobile .last-update-container[b-0q53v3v20p] {
    padding: 5px 15px 10px;
    text-align: center;
    justify-content: center;
}

.mobile .last-update-text[b-0q53v3v20p] {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
}

.mobile .loading-overlay[b-0q53v3v20p] {
    background-color: rgba(32, 32, 32, 0.7);
    color: white;
    z-index: 1000;
}

.mobile .loading-overlay div[b-0q53v3v20p] {
    margin-top: 15px;
    color: white;
}

/* ========== LANDSCAPE MODE STYLES ========== */
/* Add responsive styling for landscape mode */
@media screen and (orientation: landscape) {
    .fluent-card-container[b-0q53v3v20p] {
        max-height: 80vh;
        width: 400px;
        max-width: 90%;
        right: 20px;
        bottom: 20px;
        overflow-y: auto;
    }

    .dark-theme-card[b-0q53v3v20p] {
        max-height: 80vh;
        overflow-y: auto;
    }

    .delivery-info-section[b-0q53v3v20p] {
        padding: 8px 15px;
    }

    .card-content[b-0q53v3v20p] {
        max-height: calc(80vh - 120px);
        overflow-y: auto;
    }

    /* Mobile landscape - card on the right side */
    .mobile.landscape .swipeable-card[b-0q53v3v20p] {
        width: 400px;
        max-width: 50vw;
        right: 0;
        right: env(safe-area-inset-right);
        left: auto;
        bottom: 0;
        top: 0;
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        border-radius: 0;
        border-left: 1px solid rgba(255, 255, 255, 0.1);
        /* Safe area support for landscape */
        padding-left: env(safe-area-inset-left);
        padding-right: 0;
        padding-bottom: 0;
    }

    .mobile.landscape .swipeable-card.collapsed[b-0q53v3v20p] {
        transform: translateX(calc(100% - 300px - env(safe-area-inset-right)));
    }

    .mobile.landscape .swipeable-card.expanded[b-0q53v3v20p] {
        transform: translateX(0);
    }

    .mobile.landscape .swipe-handle[b-0q53v3v20p] {
        width: 36px;
        height: 100%;
        flex-direction: column;
        position: absolute;
        left: 0;
        top: 0;
        transform: translateX(-100%);
    }

    .mobile.landscape .handle-indicator[b-0q53v3v20p] {
        width: 5px;
        height: 50px;
        margin: 0;
    }

    .mobile.landscape .toggle-text[b-0q53v3v20p] {
        transform: rotate(-90deg);
        position: absolute;
        white-space: nowrap;
        left: -30px;
        top: 50%;
        right: auto;
    }

    .mobile.landscape .mobile-card-content[b-0q53v3v20p] {
        height: 100vh;
        overflow-y: auto;
    }

    .mobile.landscape .top-progress-container[b-0q53v3v20p] {
        width: 100%;
    }
}
/* /Components/Pages/Dashboard/Cards/ActiveDeliveriesCard.razor.rz.scp.css */
/* Active Deliveries Card Styles */

/* Deliveries List */
[b-mnm5ijmzyo] .deliveries-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    max-height: 70vh;
    overflow-y: auto;
    height: min-content;
}

[b-mnm5ijmzyo] .deliveries-list::-webkit-scrollbar {
    width: 6px;
}

[b-mnm5ijmzyo] .deliveries-list::-webkit-scrollbar-track {
    background: var(--neutral-layer-2);
    border-radius: 3px;
}

[b-mnm5ijmzyo] .deliveries-list::-webkit-scrollbar-thumb {
    background: var(--neutral-stroke-rest);
    border-radius: 3px;
}

[b-mnm5ijmzyo] .deliveries-list::-webkit-scrollbar-thumb:hover {
    background: var(--neutral-stroke-hover);
}

[b-mnm5ijmzyo] .delivery-row {
    padding: 8px 12px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 8px;
    background-color: var(--neutral-layer-1);
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

[b-mnm5ijmzyo] .delivery-row:hover {
    background-color: var(--neutral-layer-2);
    border-color: var(--accent-stroke-rest);
}

[b-mnm5ijmzyo] .delivery-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

[b-mnm5ijmzyo] .delivery-info {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    gap: 8px;
}

[b-mnm5ijmzyo] .delivery-id {
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    white-space: nowrap;
    font-size: 14px;
}

[b-mnm5ijmzyo] .delivery-separator {
    color: var(--neutral-foreground-hint);
    font-size: 12px;
}

[b-mnm5ijmzyo] .delivery-status {
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

[b-mnm5ijmzyo] .delivery-status.pending {
    background-color: #fef3c7;
    color: #d69e2e;
}

[b-mnm5ijmzyo] .delivery-status.assigned {
    background-color: #dbeafe;
    color: #2563eb;
}

[b-mnm5ijmzyo] .delivery-status.picked-up {
    background-color: #ecfdf5;
    color: #059669;
}

[b-mnm5ijmzyo] .delivery-status.delivered {
    background-color: #f0fdf4;
    color: #16a34a;
}

[b-mnm5ijmzyo] .delivery-status.cancelled {
    background-color: #fef2f2;
    color: #dc2626;
}

[b-mnm5ijmzyo] .delivery-duration {
    background-color: var(--accent-background-rest, #e3f2fd);
    color: var(--accent-foreground-rest, #1976d2);
    padding: 2px 6px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
}

[data-theme="dark"][b-mnm5ijmzyo]  .delivery-duration {
    background-color: #263143;
    color: #b3e0ff;
}

[b-mnm5ijmzyo] .delivery-amount {
    font-weight: 600;
    color: var(--accent-foreground-rest);
    font-size: 14px;
    white-space: nowrap;
}

[b-mnm5ijmzyo] .delivery-details {
    margin-bottom: 6px;
}

[b-mnm5ijmzyo] .delivery-extra-info {
    color: var(--neutral-foreground-hint);
    font-size: 12px;
    line-height: 1.3;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

[b-mnm5ijmzyo] .delivery-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

[b-mnm5ijmzyo] .action-group-left {
    display: flex;
    gap: 4px;
}

[b-mnm5ijmzyo] .action-group-right {
    display: flex;
    gap: 4px;
}

[b-mnm5ijmzyo] .delivery-actions .btn-small {
    width: 32px;
    height: 32px;
    min-width: 32px;
    padding: 0;
    font-size: 12px;
    border-radius: 4px;
}

/* Empty State */
[b-mnm5ijmzyo] .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
    color: var(--neutral-foreground-hint);
}

[b-mnm5ijmzyo] .empty-state .fui-Icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

[b-mnm5ijmzyo] .empty-state p {
    margin-bottom: 1rem;
    margin-top: 0;
}

/* Active Deliveries Card */
[b-mnm5ijmzyo] .active-deliveries-card {
    margin-bottom: 1rem;
}
/* /Components/Pages/Dashboard/Cards/ActiveOrdersCard.razor.rz.scp.css */
/* Active Orders Card Styles */

/* Orders List */
[b-1uxsh0t320] .orders-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
}

[b-1uxsh0t320] .orders-list.ultra-compact {
    max-height: 70vh;
    height: auto;
    overflow-y: auto;
    padding: 0;
    margin: 0;
}

[b-1uxsh0t320] .orders-list.ultra-compact::-webkit-scrollbar {
    width: 6px;
}

[b-1uxsh0t320] .orders-list.ultra-compact::-webkit-scrollbar-track {
    background: var(--neutral-layer-2);
    border-radius: 3px;
}

[b-1uxsh0t320] .orders-list.ultra-compact::-webkit-scrollbar-thumb {
    background: var(--neutral-stroke-rest);
    border-radius: 3px;
}

[b-1uxsh0t320] .orders-list.ultra-compact::-webkit-scrollbar-thumb:hover {
    background: var(--neutral-stroke-hover);
}

[b-1uxsh0t320] .order-row-enhanced {
    padding: 4px 8px;
    border-bottom: 1px solid var(--neutral-stroke-rest);
    font-size: 13px;
    transition: background-color 0.2s ease;
    background-color: var(--neutral-layer-1);
}

[b-1uxsh0t320] .order-row-enhanced:hover {
    background-color: var(--neutral-layer-2);
}

[b-1uxsh0t320] .order-row-enhanced:last-child {
    border-bottom: none;
}

[b-1uxsh0t320] .order-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2px;
}

[b-1uxsh0t320] .order-info {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    gap: 6px;
}

[b-1uxsh0t320] .order-type {
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    white-space: nowrap;
    font-size: 13px;
}

[b-1uxsh0t320] .order-separator {
    color: var(--neutral-foreground-hint);
    font-size: 11px;
}

[b-1uxsh0t320] .order-table {
    color: var(--neutral-foreground-rest);
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

[b-1uxsh0t320] .order-duration {
    background-color: var(--accent-background-rest, #e3f2fd);
    color: var(--accent-foreground-rest, #1976d2);
    padding: 1px 4px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    transition: background 0.2s, color 0.2s;
}

[data-theme="dark"][b-1uxsh0t320]  .order-duration {
    background-color: #263143;
    color: #b3e0ff;
}

[b-1uxsh0t320] .order-amount {
    font-weight: 600;
    color: var(--accent-foreground-rest);
    font-size: 13px;
    white-space: nowrap;
}

[b-1uxsh0t320] .order-details {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 4px;
}

[b-1uxsh0t320] .order-extra-info {
    color: var(--neutral-foreground-hint);
    font-size: 12px;
    line-height: 1.2;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[b-1uxsh0t320] .scheduled-time {
    color: var(--accent-foreground-rest, #1976d2);
    font-size: 11px;
    font-weight: 600;
    background-color: var(--accent-background-rest, #e3f2fd);
    padding: 2px 6px;
    border-radius: 12px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 2px;
}

[data-theme="dark"][b-1uxsh0t320]  .scheduled-time {
    background-color: #263143;
    color: #b3e0ff;
}

[b-1uxsh0t320] .order-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    min-height: 40px;
}

[b-1uxsh0t320] .action-group-left {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

[b-1uxsh0t320] .action-group-right {
    display: flex;
    gap: 4px;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    flex-shrink: 0;
    min-width: 0;
}

[b-1uxsh0t320] .order-actions .btn-small {
    height: 32px;
    min-width: 32px;
    padding: 0 8px;
    font-size: 11px;
    border-radius: 4px;
    background: var(--neutral-layer-2);
    color: var(--neutral-foreground-rest);
    white-space: nowrap;
    flex-shrink: 0;
}

[b-1uxsh0t320] .order-actions .btn-small:only-child {
    width: 32px;
    padding: 0;
}

[b-1uxsh0t320] .order-actions .btn-small[title="Detaylar"] {
    width: 32px;
    padding: 0;
}

/* Active Orders Card Specific */
[b-1uxsh0t320] .active-orders-card.compact {
    margin-top: 0.2rem;
    padding: 0.2rem 0.2rem 0 0.2rem;
}

[b-1uxsh0t320] .active-orders-card.minimal-width {
    min-width: 180px;
    max-width: 220px;
    width: 100%;
}

/* Empty State */
[b-1uxsh0t320] .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
    color: var(--neutral-foreground-hint);
}

[b-1uxsh0t320] .empty-state .fui-Icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

[b-1uxsh0t320] .empty-state p {
    margin-bottom: 1rem;
    margin-top: 0;
}
/* /Components/Pages/Dashboard/Cards/CourierStatusCard.razor.rz.scp.css */
/* Courier Status Card Styles */

/* Couriers Grid */
[b-uadusjnxwq] .couriers-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 1rem;
    max-height: 70vh;
    overflow-y: auto;
    height: min-content;
}

[b-uadusjnxwq] .couriers-grid::-webkit-scrollbar {
    width: 6px;
}

[b-uadusjnxwq] .couriers-grid::-webkit-scrollbar-track {
    background: var(--neutral-layer-2);
    border-radius: 3px;
}

[b-uadusjnxwq] .couriers-grid::-webkit-scrollbar-thumb {
    background: var(--neutral-stroke-rest);
    border-radius: 3px;
}

[b-uadusjnxwq] .couriers-grid::-webkit-scrollbar-thumb:hover {
    background: var(--neutral-stroke-hover);
}

[b-uadusjnxwq] .courier-card {
    display: flex;
    align-items: center;
    padding: 12px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 8px;
    background-color: var(--neutral-layer-1);
    cursor: pointer;
    transition: all 0.2s ease;
    gap: 12px;
}

[b-uadusjnxwq] .courier-card:hover {
    background-color: var(--neutral-layer-2);
    border-color: var(--accent-stroke-rest);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}

[b-uadusjnxwq] .courier-card.online {
    border-left: 4px solid #16a34a;
}

[b-uadusjnxwq] .courier-card.on-break {
    border-left: 4px solid #d69e2e;
}

[b-uadusjnxwq] .courier-card.offline {
    border-left: 4px solid #6b7280;
    opacity: 0.7;
}

[b-uadusjnxwq] .courier-card.undefined {
    border-left: 4px solid #dc2626;
}

[b-uadusjnxwq] .courier-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--neutral-layer-3);
    color: var(--neutral-foreground-rest);
}

[b-uadusjnxwq] .courier-info {
    flex: 1;
    min-width: 0;
}

[b-uadusjnxwq] .courier-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--neutral-foreground-rest);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

[b-uadusjnxwq] .courier-status {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
}

[b-uadusjnxwq] .courier-delivery-count {
    font-size: 11px;
    color: var(--accent-foreground-rest);
    margin-top: 2px;
}

[b-uadusjnxwq] .courier-indicator {
    display: flex;
    align-items: center;
}

[b-uadusjnxwq] .status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

[b-uadusjnxwq] .status-dot.online {
    background-color: #16a34a;
}

[b-uadusjnxwq] .status-dot.on-break {
    background-color: #d69e2e;
}

[b-uadusjnxwq] .status-dot.offline {
    background-color: #6b7280;
}

[b-uadusjnxwq] .status-dot.undefined {
    background-color: #dc2626;
}

/* Empty State */
[b-uadusjnxwq] .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
    color: var(--neutral-foreground-hint);
}

[b-uadusjnxwq] .empty-state .fui-Icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

[b-uadusjnxwq] .empty-state p {
    margin-bottom: 1rem;
    margin-top: 0;
}

/* Couriers Status Card */
[b-uadusjnxwq] .couriers-status-card {
    margin-bottom: 1rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    [b-uadusjnxwq] .couriers-grid {
        max-height: 50vh;
    }
    
    [b-uadusjnxwq] .courier-card {
        padding: 8px;
        gap: 8px;
    }
    
    [b-uadusjnxwq] .courier-avatar {
        width: 32px;
        height: 32px;
    }
}
/* /Components/Pages/Dashboard/Cards/DeliveryMapCard.razor.rz.scp.css */
/* Delivery Map Card Styles */

/* Map Container */
[b-ylo8bsyu4j] .map-container-mini {
    height: 200px;
    border-radius: 8px;
    overflow: hidden;
    background-color: var(--neutral-layer-2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--neutral-foreground-hint);
}

/* Map Card */
[b-ylo8bsyu4j] .map-card {
    margin-bottom: 1rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    [b-ylo8bsyu4j] .map-container-mini {
        height: 150px;
    }
}
/* /Components/Pages/Dashboard/Cards/SetupProgressCard.razor.rz.scp.css */
/* Setup Progress Card Styles */

/* Setup Steps */
[b-9n2lzpz8uz] .setup-steps {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
}

[b-9n2lzpz8uz] .setup-step {
    display: flex;
    align-items: center;
    padding: 1rem;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    gap: 1rem;
}

[b-9n2lzpz8uz] .setup-step:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

[b-9n2lzpz8uz] .setup-step.completed {
    background: var(--success-background-rest);
    border: 1px solid var(--success-stroke-rest);
}

[b-9n2lzpz8uz] .setup-step:not(.completed) {
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
}

[b-9n2lzpz8uz] .step-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--neutral-layer-card);
    border-radius: 8px;
    color: var(--accent-foreground-rest);
}

[b-9n2lzpz8uz] .setup-step.completed .step-icon {
    background: var(--success-background-rest);
    color: var(--success-foreground-rest);
}

[b-9n2lzpz8uz] .step-content {
    flex: 1;
}

[b-9n2lzpz8uz] .step-title {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

[b-9n2lzpz8uz] .step-description {
    font-size: 0.9rem;
    color: var(--neutral-foreground-hint);
}

[b-9n2lzpz8uz] .step-status {
    color: var(--success-foreground-rest);
}

[b-9n2lzpz8uz] .setup-step.completed .step-status {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Setup Progress Card */
[b-9n2lzpz8uz] .setup-progress-card {
    background: var(--neutral-layer-card);
    width: fit-content !important;
}
/* /Components/Pages/Dashboard/Cards/TableOverviewCard.razor.rz.scp.css */
/* Table Overview Card Styles */

/* Tables Grid */
[b-rdlehpq7pz] .tables-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 1rem;
    padding: 1rem;
    height: min-content;
}

[b-rdlehpq7pz] .tables-grid.compact {
    gap: 0.5rem;
    padding: 0.5rem;
}

[b-rdlehpq7pz] .table-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    border: none;
    border-left: 3px solid #bdbdbd;
    background: var(--neutral-layer-2);
    color: var(--neutral-foreground-rest);
    transition: border 0.2s, background 0.2s, color 0.2s;
    padding: 1.2rem 0.5rem;
    min-height: 120px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

[b-rdlehpq7pz] .table-card.compact {
    padding: 0.5rem 0.5rem 0.4rem 0.5rem;
    min-width: 0;
    font-size: 0.95em;
}

[b-rdlehpq7pz] .table-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.08);
}

[b-rdlehpq7pz] .table-card.available {
    border-left: 3px solid #1ecb4f;
}

[b-rdlehpq7pz] .table-card.occupied {
    border-left: 3px solid #ff3b3b;
    background: #ffeaea;
    transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}

[data-theme="dark"][b-rdlehpq7pz]  .table-card.occupied {
    background: #2a1818;
}

[b-rdlehpq7pz] .table-card.occupied:hover {
    box-shadow: 0 4px 16px rgba(255,59,59,0.10);
    filter: brightness(1.05);
}

[b-rdlehpq7pz] .table-card.reserved {
    border-left: 3px solid #ffb300;
}

[b-rdlehpq7pz] .table-card.out-of-service {
    border-left: 3px solid #bdbdbd;
    opacity: 0.5;
    cursor: not-allowed;
}

[b-rdlehpq7pz] .table-card .table-icon {
    font-size: 2.2rem;
    margin-bottom: 0.5rem;
}

[b-rdlehpq7pz] .table-card .table-number {
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: 0.2rem;
    color: inherit;
}

[b-rdlehpq7pz] .table-card .table-status {
    font-size: 0.95rem;
    color: var(--neutral-foreground-hint);
    opacity: 1;
}

[b-rdlehpq7pz] .table-card .table-employee {
    font-size: 0.8rem;
    margin-top: 0.2rem;
    opacity: 0.9;
}

/* Empty State */
[b-rdlehpq7pz] .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
    color: var(--neutral-foreground-hint);
    grid-column: 1 / -1;
}

[b-rdlehpq7pz] .empty-state.compact {
    padding: 0.2rem 0.2rem 0.1rem 0.2rem;
    font-size: 0.92em;
}

[b-rdlehpq7pz] .empty-state .fui-Icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

[b-rdlehpq7pz] .empty-state p {
    margin-bottom: 1rem;
}

/* Responsive Layout */
@media (max-width: 768px) {
    [b-rdlehpq7pz] .tables-grid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    }
}
/* /Components/Pages/Dashboard/Dashboard.razor.rz.scp.css */
/* Control Panel Dashboard Styles */
.dashboard-container[b-8xdruzeydh] {
    margin: 0 auto;
    padding: 1rem;
    font-family: var(--body-font);
    width: 100%;
}

.dashboard-header[b-8xdruzeydh] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.dashboard-header h1[b-8xdruzeydh] {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0;
    color: var(--neutral-foreground-rest);
}

.date-display[b-8xdruzeydh] {
    font-size: 0.9rem;
    color: var(--neutral-foreground-hint);
}

/* Shared Card Styling for Dashboard Components */
[b-8xdruzeydh] .panel-card {
    height: 100%;
    border-radius: 12px;
    border: 1px solid var(--neutral-stroke-rest);
    overflow: hidden;
}

[b-8xdruzeydh] .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.7rem 1rem;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
    background: transparent;
}

[b-8xdruzeydh] .card-header h2 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

[b-8xdruzeydh] .view-all {
    display: flex;
    align-items: center;
}

/* Header Info Styles */
[b-8xdruzeydh] .table-listing-info-header {
    font-size: 12px;
    color: #666;
    font-weight: 500;
    white-space: nowrap;
}

[b-8xdruzeydh] .card-update-info {
    font-size: 11px;
    color: #999;
    font-style: italic;
    white-space: nowrap;
}

[b-8xdruzeydh] .header-actions {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-left: auto;
}

[b-8xdruzeydh] .header-info-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

[b-8xdruzeydh] .header-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

[b-8xdruzeydh] .refresh-btn {
    width: 32px;
    height: 32px;
    min-width: 32px;
    padding: 0;
    border-radius: 4px;
}

[b-8xdruzeydh] .refresh-btn.loading svg {
    animation: spin-b-8xdruzeydh 0.6s linear infinite;
}

@keyframes spin-b-8xdruzeydh {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Unknown Firm Type Warning Card Styles */
[b-8xdruzeydh] .panel-card.warning-card {
    text-align: center;
    padding: 2rem;
}

[b-8xdruzeydh] .panel-card.warning-card .fui-Icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: var(--warning-foreground-rest);
}

[b-8xdruzeydh] .panel-card.warning-card h3 {
    color: var(--neutral-foreground-rest);
    margin-bottom: 0.5rem;
    font-size: 1.25rem;
}

[b-8xdruzeydh] .panel-card.warning-card p {
    color: var(--neutral-foreground-hint);
    margin-bottom: 1.5rem;
    font-size: 1rem;
}
/* /Components/Pages/Dashboard/LogisticsDashboard.razor.rz.scp.css */
/* Logistics Dashboard Styles */

/* Card Styling with deep selectors for FluentUI */
[b-whmooze233] .panel-card {
    height: 100%;
    border-radius: 12px;
    border: 1px solid var(--neutral-stroke-rest);
    overflow: hidden;
}

[b-whmooze233] .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.7rem 1rem 0.7rem 1rem;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
    background: transparent;
}

[b-whmooze233] .card-header h2 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

[b-whmooze233] .view-all {
    display: flex;
    align-items: center;
}





/* Empty State */
[b-whmooze233] .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
    color: var(--neutral-foreground-hint);
}

[b-whmooze233] .empty-state .fui-Icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

[b-whmooze233] .empty-state p {
    margin-bottom: 1rem;
    margin-top: 0;
}

/* Header Info */
[b-whmooze233] .table-listing-info-header {
    font-size: 12px;
    color: #666;
    font-weight: 500;
    white-space: nowrap;
}

[b-whmooze233] .card-update-info {
    font-size: 11px;
    color: #999;
    font-style: italic;
    white-space: nowrap;
}

[b-whmooze233] .header-actions {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-left: auto;
}

[b-whmooze233] .header-info-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

[b-whmooze233] .header-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

[b-whmooze233] .refresh-btn {
    width: 32px;
    height: 32px;
    min-width: 32px;
    padding: 0;
    border-radius: 4px;
}

[b-whmooze233] .refresh-btn.loading svg {
    animation: spin-b-whmooze233 0.6s linear infinite;
}

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


/* Loading States */
[b-whmooze233] .loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    gap: 1rem;
    height: 100%;
    color: var(--neutral-foreground-hint);
}

[b-whmooze233] .loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    gap: 16px;
}

[b-whmooze233] .loading-container p {
    color: var(--neutral-foreground-hint);
    font-size: 16px;
    margin: 0;
}

/* Responsive Layout for General Elements */
@media (max-width: 768px) {
    [b-whmooze233] .header-actions {
        flex-direction: column;
        gap: 8px;
    }
    
    [b-whmooze233] .refresh-btn {
        width: 28px;
        height: 28px;
        min-width: 28px;
    }
}
/* /Components/Pages/Dashboard/RestaurantDashboard.razor.rz.scp.css */
/* Restaurant Dashboard Styles */


/* Card Styling with deep selectors for FluentUI */
[b-j4rwmvrykx] .panel-card {
    height: auto !important;
    border-radius: 12px;
    border: 1px solid var(--neutral-stroke-rest);
    overflow: hidden;
}

/* FluentCard specific styling */
[b-j4rwmvrykx] fluent-card.panel-card {
    height: auto !important;
}

[b-j4rwmvrykx] fluent-card::part(content) {
    height: auto !important;
}

[b-j4rwmvrykx] fluent-card::part(root) {
    height: auto !important;
}

[b-j4rwmvrykx] .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.7rem 1rem 0.7rem 1rem;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
    background: transparent;
}

[b-j4rwmvrykx] .card-header h2 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

[b-j4rwmvrykx] .view-all {
    display: flex;
    align-items: center;
}

/* Stats Grid */
[b-j4rwmvrykx] .stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
}

[b-j4rwmvrykx] .stat-item {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    border-radius: 6px;
    background-color: var(--neutral-layer-1);
    transition: transform 0.2s, box-shadow 0.2s;
    gap: 0.75rem;
}

[b-j4rwmvrykx] .stat-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
}

[b-j4rwmvrykx] .stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 8px;
    color: white;
}

[b-j4rwmvrykx] .stat-details {
    flex: 1;
}

[b-j4rwmvrykx] .stat-label {
    font-size: 0.9rem;
    color: var(--neutral-foreground-hint);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

[b-j4rwmvrykx] .stat-value {
    font-size: 1rem;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

/* Quick Actions */
[b-j4rwmvrykx] .quick-actions-card {
    max-width: 200px !important;
}

[b-j4rwmvrykx] .action-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
}

[b-j4rwmvrykx] .action-button {
    width: 100%;
    justify-content: flex-start;
    padding-left: 0.75rem;
}

[b-j4rwmvrykx] .action-button::part(content) {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}

[b-j4rwmvrykx] .action-button::part(start) {
    margin-right: 0;
}




/* Empty State */
[b-j4rwmvrykx] .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
    color: var(--neutral-foreground-hint);
}

[b-j4rwmvrykx] .empty-state.compact {
    padding: 0.2rem 0.2rem 0.1rem 0.2rem;
    font-size: 0.92em;
}

[b-j4rwmvrykx] .empty-state .fui-Icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

[b-j4rwmvrykx] .empty-state p {
    margin-bottom: 1rem;
}

/* Header Info */
[b-j4rwmvrykx] .table-listing-info-header {
    font-size: 12px;
    color: #666;
    font-weight: 500;
    white-space: nowrap;
}

[b-j4rwmvrykx] .card-update-info {
    font-size: 11px;
    color: #999;
    font-style: italic;
    white-space: nowrap;
}

[b-j4rwmvrykx] .header-actions {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-left: auto;
}

[b-j4rwmvrykx] .header-info-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

[b-j4rwmvrykx] .header-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

[b-j4rwmvrykx] .refresh-btn {
    width: 32px;
    height: 32px;
    min-width: 32px;
    padding: 0;
    border-radius: 4px;
}

[b-j4rwmvrykx] .refresh-btn.loading svg {
    animation: spin-b-j4rwmvrykx 0.6s linear infinite;
}

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



/* Active Staff Card */
[b-j4rwmvrykx] .active-staff-card {
    grid-area: staff;
}

[b-j4rwmvrykx] .staff-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
}

[b-j4rwmvrykx] .staff-card {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    border-radius: 6px;
    background-color: var(--neutral-layer-1);
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

[b-j4rwmvrykx] .staff-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
}

[b-j4rwmvrykx] .staff-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--neutral-layer-2);
    margin-right: 0.75rem;
    overflow: hidden;
}

[b-j4rwmvrykx] .staff-avatar img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

[b-j4rwmvrykx] .staff-details {
    flex: 1;
}

[b-j4rwmvrykx] .staff-name {
    font-weight: 500;
    line-height: 1.2;
}

[b-j4rwmvrykx] .staff-role {
    font-size: 0.8rem;
    color: var(--neutral-foreground-hint);
}

[b-j4rwmvrykx] .staff-actions {
    display: flex;
    gap: 5px;
    align-items: center;
}

/* Daily Sales Card */
[b-j4rwmvrykx] .daily-sales-card {
    grid-area: sales;
}

[b-j4rwmvrykx] .completed-orders-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    padding: 1rem;
}

[b-j4rwmvrykx] .completed-order-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem;
    border-radius: 4px;
    background-color: var(--neutral-layer-1);
}

[b-j4rwmvrykx] .order-basic-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

[b-j4rwmvrykx] .sales-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.75rem;
    border-top: 1px solid var(--neutral-stroke-divider-rest);
    margin-top: 0.5rem;
}

[b-j4rwmvrykx] .summary-value {
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--accent-foreground-rest);
}

/* Loading States */
[b-j4rwmvrykx] .loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    gap: 1rem;
    height: 100%;
    color: var(--neutral-foreground-hint);
}

[b-j4rwmvrykx] .loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    gap: 16px;
}

[b-j4rwmvrykx] .loading-container p {
    color: var(--neutral-foreground-hint);
    font-size: 16px;
    margin: 0;
}

/* Setup Progress Card Styles */
[b-j4rwmvrykx] .setup-progress-card {
    background: var(--neutral-layer-card);
}

/* Responsive Layout */
@media (max-width: 1024px) {
    [b-j4rwmvrykx] .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Tables Grid - Multiple selector approaches */
.tables-grid[b-j4rwmvrykx] {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
    gap: 1rem !important;
    padding: 1rem !important;
    height: min-content !important;
}

.tables-grid.compact[b-j4rwmvrykx] {
    gap: 0.5rem !important;
    padding: 0.5rem !important;
}

[b-j4rwmvrykx] .tables-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
    gap: 1rem !important;
    padding: 1rem !important;
    height: min-content !important;
}

[b-j4rwmvrykx] .tables-grid.compact {
    gap: 0.5rem !important;
    padding: 0.5rem !important;
}

/* Alternative approach with descendant selectors */
[b-j4rwmvrykx] fluent-card .tables-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
    gap: 1rem !important;
    padding: 1rem !important;
}

[b-j4rwmvrykx] fluent-card .tables-grid.compact {
    gap: 0.5rem !important;
    padding: 0.5rem !important;
}

/* Table Cards - Multiple approaches */
.table-card[b-j4rwmvrykx] {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 18px !important;
    border: none !important;
    border-left: 3px solid #bdbdbd !important;
    background: var(--neutral-layer-2) !important;
    color: var(--neutral-foreground-rest) !important;
    transition: border 0.2s, background 0.2s, color 0.2s !important;
    padding: 1.2rem 0.5rem !important;
    min-height: 120px !important;
    cursor: pointer !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
}

.table-card.compact[b-j4rwmvrykx] {
    padding: 0.5rem 0.5rem 0.4rem 0.5rem !important;
    min-width: 0 !important;
    font-size: 0.95em !important;
}

[b-j4rwmvrykx] .table-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    border: none;
    border-left: 3px solid #bdbdbd;
    background: var(--neutral-layer-2);
    color: var(--neutral-foreground-rest);
    transition: border 0.2s, background 0.2s, color 0.2s;
    padding: 1.2rem 0.5rem;
    min-height: 120px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

[b-j4rwmvrykx] .table-card.compact {
    padding: 0.5rem 0.5rem 0.4rem 0.5rem;
    min-width: 0;
    font-size: 0.95em;
}

[b-j4rwmvrykx] .table-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.08);
}

[b-j4rwmvrykx] .table-card.available {
    border-left: 3px solid #1ecb4f;
}

[b-j4rwmvrykx] .table-card.occupied {
    border-left: 3px solid #ff3b3b;
    background: #ffeaea;
}

[b-j4rwmvrykx] .table-card.reserved {
    border-left: 3px solid #ffb300;
}

[b-j4rwmvrykx] .table-card.out-of-service {
    border-left: 3px solid #bdbdbd;
    opacity: 0.5;
    cursor: not-allowed;
}

[b-j4rwmvrykx] .table-card .table-icon {
    font-size: 2.2rem;
    margin-bottom: 0.5rem;
}

[b-j4rwmvrykx] .table-card .table-number {
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: 0.2rem;
    color: inherit;
}

[b-j4rwmvrykx] .table-card .table-status {
    font-size: 0.95rem;
    color: var(--neutral-foreground-hint);
    opacity: 1;
}

[b-j4rwmvrykx] .table-card .table-employee {
    font-size: 0.8rem;
    margin-top: 0.2rem;
    opacity: 0.9;
}

/* Orders List */
[b-j4rwmvrykx] .orders-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
}

[b-j4rwmvrykx] .orders-list.ultra-compact {
    max-height: 70vh;
    height: auto;
    overflow-y: auto;
    padding: 0;
    margin: 0;
}

[b-j4rwmvrykx] .order-row-enhanced {
    padding: 4px 8px;
    border-bottom: 1px solid var(--neutral-stroke-rest);
    font-size: 13px;
    transition: background-color 0.2s ease;
    background-color: var(--neutral-layer-1);
}

[b-j4rwmvrykx] .order-row-enhanced:hover {
    background-color: var(--neutral-layer-2);
}

@media (max-width: 768px) {
    [b-j4rwmvrykx] .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    [b-j4rwmvrykx] .tables-grid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    }
}

@media (max-width: 480px) {
    [b-j4rwmvrykx] .stats-grid {
        grid-template-columns: 1fr;
    }
    
    [b-j4rwmvrykx] .action-buttons {
        flex-direction: column;
    }
}
/* /Components/Pages/Deliveries/ActiveDeliveriesMap.razor.rz.scp.css */
/* Map container needs position relative for absolute positioning of the popup */
.map-container[b-3vpz5tpoyc] {
    position: relative;
    width: 100%;
    height: 100%;
}

/* Modern courier status popup styles */
.courier-status-popup[b-3vpz5tpoyc] {
    position: absolute;
    top: 15px;
    left: 15px;
    width: auto;
    max-width: calc(100% - 30px); /* Ensure it can't be wider than container minus padding */
    background-color: rgba(26, 26, 37, 0.92);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
    padding: 12px 16px;
    display: flex;
    flex-wrap: wrap; /* Allow items to wrap based on their own width */
    align-items: center;
    gap: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    box-sizing: border-box;
    overflow: hidden;
}

.courier-status-header[b-3vpz5tpoyc] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 0.95rem;
    color: white;
    white-space: nowrap;
    width: auto;
    flex: 0 0 auto; /* Don't grow or shrink */
}

.courier-status-header[b-3vpz5tpoyc]  svg {
    width: 18px;
    height: 18px;
    color: #e2e8f0;
    margin-right: 0;
}

.status-indicators[b-3vpz5tpoyc] {
    display: flex;
    flex-wrap: wrap; /* Allow status items to wrap within their container */
    gap: 8px;
    flex: 1 1 270px; /* Grow and shrink, with a flex-basis of 270px */
    min-width: 0; /* Allow container to be narrower than its contents */
}

.status-item[b-3vpz5tpoyc] {
    display: flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 8px;
    background-color: #4a5568;
    transition: all 0.2s ease;
    border: 1px solid rgba(255, 255, 255, 0.05);
    height: 32px;
    box-sizing: border-box;
    flex: 0 1 auto; /* Allow status items to shrink */
    justify-content: space-between;
}

.status-item:hover[b-3vpz5tpoyc] {
    background-color: #4a5568;
}

.status-dot[b-3vpz5tpoyc] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-right: 6px;
}

.status-dot.online[b-3vpz5tpoyc] {
    background-color: #38c172;
    box-shadow: 0 0 4px rgba(56, 193, 114, 0.6);
}

.status-dot.onbreak[b-3vpz5tpoyc] {
    background-color: #f6ad55;
    box-shadow: 0 0 4px rgba(246, 173, 85, 0.6);
}

.status-dot.offline[b-3vpz5tpoyc] {
    background-color: #a0aec0;
    box-shadow: 0 0 4px rgba(160, 174, 192, 0.6);
}

.courier-count[b-3vpz5tpoyc] {
    font-family: 'Segoe UI', system-ui, sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: white;
    display: inline-block;
}

.status-label[b-3vpz5tpoyc] {
    font-size: 0.95rem;
    color: #cbd5e0;
    font-weight: 400;
    display: inline-block;
    margin-right: 8px;
}

.total-counter[b-3vpz5tpoyc] {
    background-color: #4a5568;
    color: white;
    padding: 5px 10px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.95rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    white-space: nowrap;
    flex: 0 0 auto; /* Don't grow or shrink */
}

/* Modern marker tooltip/info window styles */
[b-3vpz5tpoyc] .gm-style .gm-style-iw-c {
    padding: 0 !important; /* Remove default padding */
    border-radius: 12px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) !important;
    max-width: 360px !important; /* Increased from 320px to 360px */
    overflow: visible !important;
}

[b-3vpz5tpoyc] .gm-style .gm-style-iw-d {
    overflow: hidden !important;
    padding: 0 !important;
    max-height: none !important;
}

[b-3vpz5tpoyc] .gm-style .gm-style-iw-t::after {
    background: linear-gradient(45deg, rgba(235, 235, 240, 1) 50%, rgba(255, 255, 255, 0) 51%, rgba(255, 255, 255, 0) 100%) !important;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1) !important;
}

/* Fix for the close button container */
[b-3vpz5tpoyc] .gm-style-iw-tc,
[b-3vpz5tpoyc] .gm-style-iw-tc::after,
[b-3vpz5tpoyc] .gm-style-iw-tc div {
    background-color: transparent !important;
}

/* Make sure the info window has proper z-index and pointer events */
[b-3vpz5tpoyc] .gm-style-iw-c {
    z-index: 999 !important;
    pointer-events: auto !important;
    cursor: default !important;
}

/* Make sure close button container is visible but transparent */
[b-3vpz5tpoyc] .gm-style-iw-chr {
    opacity: 0 !important; /* Keep it invisible but functional */
    pointer-events: auto !important; /* Ensure click events work */
    display: none !important;
}

/* Google Maps InfoWindow close button styling */
[b-3vpz5tpoyc] .gm-style .gm-style-iw-c button.gm-ui-hover-effect {
    top: 5px !important;
    right: 5px !important;
    width: 24px !important;
    height: 24px !important;
    background-color: rgba(255, 255, 255, 0.6) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
    z-index: 10 !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transition: all 0.2s ease !important;
}

[b-3vpz5tpoyc] .gm-style .gm-style-iw-c button.gm-ui-hover-effect:hover {
    background-color: rgba(255, 255, 255, 0.9) !important;
    transform: scale(1.1) !important;
}

[b-3vpz5tpoyc] .gm-style .gm-style-iw-c button.gm-ui-hover-effect img {
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    opacity: 0.8 !important;
}

[b-3vpz5tpoyc] .marker-info-window {
    padding: 0;
    font-family: 'Segoe UI', system-ui, sans-serif;
    border-radius: 12px;
    overflow: hidden;
    width: 100%;
    max-width: 360px;
}

[b-3vpz5tpoyc] .marker-info-header {
    padding: 12px 16px;
    color: white;
    font-weight: 600;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 16px;
    letter-spacing: 0.3px;
    position: relative; /* For properly positioning the close button */
}

[b-3vpz5tpoyc] .marker-info-content {
    padding: 16px;
    background: #ebebf0; /* Darker background color */
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

[b-3vpz5tpoyc] .marker-info-row {
    display: flex;
    margin-bottom: 12px;
    align-items: center;
}

[b-3vpz5tpoyc] .marker-info-row:last-child {
    margin-bottom: 0;
}

[b-3vpz5tpoyc] .marker-info-label {
    font-size: 13px;
    font-weight: 500;
    color: #555;
    width: 70px;
    flex-shrink: 0;
}

[b-3vpz5tpoyc] .marker-info-value {
    font-size: 14px;
    font-weight: 600;
    color: #222;
    flex-grow: 1;
}

/* Status indicator in info window */
[b-3vpz5tpoyc] .marker-info-value.status {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 16px;
    font-size: 13px;
    background-color: #e0e2e8;
}

[b-3vpz5tpoyc] .marker-info-value.status.online {
    background-color: rgba(56, 193, 114, 0.2);
    color: #1e7d45;
}

[b-3vpz5tpoyc] .marker-info-value.status.onbreak {
    background-color: rgba(246, 173, 85, 0.2);
    color: #975a16;
}

[b-3vpz5tpoyc] .marker-info-value.status.offline {
    background-color: rgba(160, 174, 192, 0.2);
    color: #4a5568;
}
/* /Components/Pages/Deliveries/DeliveryAccordionItem.razor.rz.scp.css */
/* FluentUI Accordion override styles */
[b-evq88yniph] .fluent-accordion-item {
    margin-bottom: 0.5rem;
    transition: all 0.3s ease;
}

[b-evq88yniph] .fluent-accordion-item-header {
    padding: 0 !important;
    border-radius: 8px !important;
    overflow: hidden;
    transition: all 0.3s ease;
}

[b-evq88yniph] .fluent-accordion-item-header:hover {
    background-color: transparent !important;
}

[b-evq88yniph] .fluent-accordion-item-header[aria-expanded="true"] {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
}

[b-evq88yniph] .fluent-accordion-item-content {
    padding: 0 !important;
    transition: all 0.3s ease;
}

/* Progress container styles */
.progress-container[b-evq88yniph] {
    position: relative;
    height: 100%;
    border-radius: 6px;
    overflow: hidden;
    margin-top: 8px;
}

.progress-bar[b-evq88yniph] {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    transition: width 0.3s ease, background-color 0.3s ease;
}

/* Accordion grid styles */
.accordion-grid[b-evq88yniph] {
    margin-bottom: 8px;
}

.accordion-label[b-evq88yniph] {
    font-size: 0.875rem;
    color: var(--neutral-foreground-rest);
}

/* Animation classes - Ana dosyada mevcut animation'ları kullan */
.accordion-item-highlight[b-evq88yniph] {
    position: relative;
    z-index: 10;
}

.accordion-item-highlight[b-evq88yniph]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 8px;
    pointer-events: none;
    z-index: -1;
}

.accordion-item-created[b-evq88yniph]::before {
    animation: border-pulse-created-b-evq88yniph 3s ease-out;
}

.accordion-item-assigned[b-evq88yniph]::before {
    animation: border-pulse-assigned-b-evq88yniph 3s ease-out;
}

.accordion-item-status-updated[b-evq88yniph]::before {
    animation: border-pulse-status-updated-b-evq88yniph 3s ease-out;
}

.accordion-item-cancelled[b-evq88yniph]::before {
    animation: border-pulse-cancelled-b-evq88yniph 3s ease-out;
}

.accordion-item-completed[b-evq88yniph]::before {
    animation: border-pulse-completed-b-evq88yniph 3s ease-out;
}

/* Ana dosyadan animation keyframes'leri inherit ediyoruz */
@keyframes border-pulse-created-b-evq88yniph {
    0% {
        box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.8);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(46, 204, 113, 0);
    }
}

@keyframes border-pulse-assigned-b-evq88yniph {
    0% {
        box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.8);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(52, 152, 219, 0);
    }
}

@keyframes border-pulse-status-updated-b-evq88yniph {
    0% {
        box-shadow: 0 0 0 3px rgba(241, 196, 15, 0.8);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(241, 196, 15, 0);
    }
}

@keyframes border-pulse-cancelled-b-evq88yniph {
    0% {
        box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.8);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(231, 76, 60, 0);
    }
}

@keyframes border-pulse-completed-b-evq88yniph {
    0% {
        box-shadow: 0 0 0 3px rgba(39, 174, 96, 0.8);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(39, 174, 96, 0);
    }
}

/* Delivery details styles */
.delivery-details[b-evq88yniph] {
    padding: 16px;
    background-color: var(--neutral-layer-1);
    border-radius: 8px;
}

.detail-header[b-evq88yniph] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
}

.detail-id[b-evq88yniph] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.detail-date[b-evq88yniph] {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--neutral-foreground-hint);
    font-size: 0.875rem;
}

.detail-actions[b-evq88yniph] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.time-info[b-evq88yniph] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    white-space: nowrap;
}

.time-label[b-evq88yniph] {
    font-weight: 500;
    color: var(--neutral-foreground-hint);
}

.time-value[b-evq88yniph] {
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.contact-grid[b-evq88yniph] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 16px;
}

.contact-card[b-evq88yniph] {
    background-color: var(--neutral-layer-2);
    border-radius: 6px;
    padding: 12px;
}

.contact-title[b-evq88yniph] {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--neutral-foreground-hint);
    font-size: 0.875rem;
    margin-bottom: 8px;
}

.contact-info[b-evq88yniph] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.contact-name[b-evq88yniph] {
    font-weight: 600;
}

.contact-phone[b-evq88yniph] {
    color: var(--neutral-foreground-hint);
    font-size: 0.875rem;
}

.details-grid[b-evq88yniph] {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 16px;
}

.detail-card[b-evq88yniph] {
    background-color: var(--neutral-layer-2);
    border-radius: 6px;
    padding: 12px;
}

.detail-title[b-evq88yniph] {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--neutral-foreground-hint);
    font-size: 0.875rem;
    margin-bottom: 8px;
}

.detail-content[b-evq88yniph] {
    font-size: 0.875rem;
}

.address .detail-content[b-evq88yniph] {
    line-height: 1.4;
}

.distance-info[b-evq88yniph] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    color: var(--neutral-foreground-hint);
    font-size: 0.875rem;
}

.payment-row[b-evq88yniph], .option-row[b-evq88yniph] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
}

.amount[b-evq88yniph] {
    font-weight: 600;
    color: var(--accent-foreground-rest);
}

.delivery-link[b-evq88yniph] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--accent-foreground-rest);
    text-decoration: none;
}

.delivery-link:hover[b-evq88yniph] {
    text-decoration: underline;
}

.status-badge[b-evq88yniph] {
    padding: 4px 8px;
    border-radius: 4px;
    color: white;
    font-size: 0.75rem;
    font-weight: 500;
}

.courier-note[b-evq88yniph] {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--neutral-stroke-divider-rest);
}

.note-title[b-evq88yniph] {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--neutral-foreground-hint);
    font-size: 0.875rem;
    margin-bottom: 4px;
}

.note-content[b-evq88yniph] {
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--neutral-foreground-rest);
    background-color: var(--neutral-layer-3);
    padding: 8px;
    border-radius: 4px;
    margin-left: 22px;
}

/* Responsive design - Ana dosyadaki responsive pattern'i takip et */
@media (max-width: 768px) {
    .contact-grid[b-evq88yniph] {
        grid-template-columns: 1fr !important;
    }
    
    .details-grid[b-evq88yniph] {
        grid-template-columns: 1fr !important;
    }
    
    .detail-header[b-evq88yniph] {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }
    
    .time-info[b-evq88yniph] {
        font-size: 0.65rem;
    }
    
    .detail-actions[b-evq88yniph] {
        justify-content: flex-end;
    }
}
/* /Components/Pages/Deliveries/DeliveryManagement.razor.rz.scp.css */
[b-gmvgeg1khr] fluent-tabs::part(activeIndicator) {
    width: 85%;
}

/* Modern courier status popup styles */
.courier-status-popup[b-gmvgeg1khr] {
    position: absolute;
    top: 15px;
    left: 15px;
    width: auto;
    max-width: calc(100% - 30px); /* Ensure it can't be wider than container minus padding */
    background-color: rgba(26, 26, 37, 0.92);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
    padding: 12px 16px;
    display: flex;
    flex-wrap: wrap; /* Allow items to wrap based on their own width */
    align-items: center;
    gap: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    box-sizing: border-box;
    overflow: hidden;
}

.courier-status-header[b-gmvgeg1khr] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 0.95rem;
    color: white;
    white-space: nowrap;
    width: auto;
    flex: 0 0 auto; /* Don't grow or shrink */
}

.courier-status-header[b-gmvgeg1khr]  svg {
    width: 18px;
    height: 18px;
    color: #e2e8f0;
    margin-right: 0;
}

.delivery-link[b-gmvgeg1khr] {
    font-weight: bold;
    text-decoration: none;
    color: inherit;
    font-size: 1rem;
    cursor: pointer;
}

    .delivery-link:hover[b-gmvgeg1khr] {
        color: var(--accent-foreground-rest);
    }

.status-indicators[b-gmvgeg1khr] {
    display: flex;
    flex-wrap: wrap; /* Allow status items to wrap within their container */
    gap: 8px;
    flex: 1 1 270px; /* Grow and shrink, with a flex-basis of 270px */
    min-width: 0; /* Allow container to be narrower than its contents */
}

.status-item[b-gmvgeg1khr] {
    display: flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 8px;
    background-color: #4a5568;
    transition: all 0.2s ease;
    border: 1px solid rgba(255, 255, 255, 0.05);
    height: 32px;
    box-sizing: border-box;
    flex: 0 1 auto; /* Allow status items to shrink */
    justify-content: space-between;
}

.status-item:hover[b-gmvgeg1khr] {
    background-color: #4a5568;
}

.status-dot[b-gmvgeg1khr] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-right: 6px;
}

.status-dot.online[b-gmvgeg1khr] {
    background-color: #38c172;
    box-shadow: 0 0 4px rgba(56, 193, 114, 0.6);
}

.status-dot.break[b-gmvgeg1khr] {
    background-color: #f6ad55;
    box-shadow: 0 0 4px rgba(246, 173, 85, 0.6);
}

.status-dot.offline[b-gmvgeg1khr] {
    background-color: #a0aec0;
    box-shadow: 0 0 4px rgba(160, 174, 192, 0.6);
}

.courier-count[b-gmvgeg1khr] {
    font-family: 'Segoe UI', system-ui, sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: white;
    display: inline-block;
}

.status-label[b-gmvgeg1khr] {
    font-size: 0.95rem;
    color: #cbd5e0;
    font-weight: 400;
    display: inline-block;
    margin-right: 8px;
}

.total-counter[b-gmvgeg1khr] {
    background-color: #4a5568;
    color: white;
    padding: 5px 10px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.95rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    white-space: nowrap;
    flex: 0 0 auto; /* Don't grow or shrink */
}

/* Map container needs position relative for absolute positioning of the popup */
.map-container[b-gmvgeg1khr] {
    position: relative;
    width: 100%;
    height: 100%;
}

/* Modern marker tooltip/info window styles */
[b-gmvgeg1khr] .gm-style .gm-style-iw-c {
    padding: 0 !important; /* Remove default padding */
    border-radius: 12px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) !important;
    max-width: 360px !important; /* Increased from 320px to 360px */
    overflow: visible !important;
}

[b-gmvgeg1khr] .gm-style .gm-style-iw-d {
    overflow: hidden !important;
    padding: 0 !important;
    max-height: none !important;
}

[b-gmvgeg1khr] .gm-style .gm-style-iw-t::after {
    background: linear-gradient(45deg, rgba(235, 235, 240, 1) 50%, rgba(255, 255, 255, 0) 51%, rgba(255, 255, 255, 0) 100%) !important;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1) !important;
}

/* Fix for the close button container */
[b-gmvgeg1khr] .gm-style-iw-tc,
[b-gmvgeg1khr] .gm-style-iw-tc::after,
[b-gmvgeg1khr] .gm-style-iw-tc div {
    background-color: transparent !important;
}

/* Make sure the info window has proper z-index and pointer events */
[b-gmvgeg1khr] .gm-style-iw-c {
    z-index: 999 !important;
    pointer-events: auto !important;
    cursor: default !important;
}

/* Make sure close button container is visible but transparent */
[b-gmvgeg1khr] .gm-style-iw-chr {
    opacity: 0 !important; /* Keep it invisible but functional */
    pointer-events: auto !important; /* Ensure click events work */
    display: none !important;
}

/* Google Maps InfoWindow close button styling */
[b-gmvgeg1khr] .gm-style .gm-style-iw-c button.gm-ui-hover-effect {
    top: 5px !important;
    right: 5px !important;
    width: 24px !important;
    height: 24px !important;
    background-color: rgba(255, 255, 255, 0.6) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
    z-index: 10 !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transition: all 0.2s ease !important;
}

[b-gmvgeg1khr] .gm-style .gm-style-iw-c button.gm-ui-hover-effect:hover {
    background-color: rgba(255, 255, 255, 0.9) !important;
    transform: scale(1.1) !important;
}

[b-gmvgeg1khr] .gm-style .gm-style-iw-c button.gm-ui-hover-effect img {
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    opacity: 0.8 !important;
}

[b-gmvgeg1khr] .marker-info-window {
    padding: 0;
    font-family: 'Segoe UI', system-ui, sans-serif;
    border-radius: 12px;
    overflow: hidden;
    width: 100%;
    max-width: 360px;
}

[b-gmvgeg1khr] .marker-info-header {
    padding: 12px 16px;
    color: white;
    font-weight: 600;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 16px;
    letter-spacing: 0.3px;
    position: relative; /* For properly positioning the close button */
}

[b-gmvgeg1khr] .marker-info-content {
    padding: 16px;
    background: #ebebf0; /* Darker background color */
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

[b-gmvgeg1khr] .marker-info-row {
    display: flex;
    margin-bottom: 12px;
    align-items: center;
}

[b-gmvgeg1khr] .marker-info-row:last-child {
    margin-bottom: 0;
}

[b-gmvgeg1khr] .marker-info-label {
    font-size: 13px;
    font-weight: 500;
    color: #555;
    width: 70px;
    flex-shrink: 0;
}

[b-gmvgeg1khr] .marker-info-value {
    font-size: 14px;
    font-weight: 600;
    color: #222;
    flex-grow: 1;
}

/* Status indicator in info window */
[b-gmvgeg1khr] .marker-info-value.status {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 16px;
    font-size: 13px;
    background-color: #e0e2e8;
}

[b-gmvgeg1khr] .marker-info-value.status.online {
    background-color: rgba(56, 193, 114, 0.2);
    color: #1e7d45;
}

[b-gmvgeg1khr] .marker-info-value.status.onbreak {
    background-color: rgba(246, 173, 85, 0.2);
    color: #975a16;
}

[b-gmvgeg1khr] .marker-info-value.status.offline {
    background-color: rgba(160, 174, 192, 0.2);
    color: #4a5568;
}

/* Delivery list styling */
.delivery-item[b-gmvgeg1khr] {
    background-color: white;
    border-radius: 8px;
    margin-bottom: 10px;
    transition: all 0.2s ease;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.delivery-item:hover[b-gmvgeg1khr] {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

.delivery-header[b-gmvgeg1khr] {
    cursor: pointer;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.delivery-details[b-gmvgeg1khr] {
    padding: 12px 8px 0px 8px;
    background-color: transparent;
}

/* Time duration styling */
.time-duration[b-gmvgeg1khr] {
    color: white;
    font-weight: 500;
    font-size: 0.9rem;
    width: 50px;
    flex-shrink: 0;
}

/* Progress bar styles for accordion items */
.progress-container[b-gmvgeg1khr] {
    position: relative;
    height: 100%;
    border-radius: 6px;
    overflow: hidden;
    margin-top: 8px; /* Add margin between text and progress bar */
}

.progress-bar[b-gmvgeg1khr] {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    transition: width 0.3s ease, background-color 0.3s ease;
}

/* Status badge styling */
.status-badge[b-gmvgeg1khr] {
    padding: 4px 10px;
    color: white;
    font-size: 0.85rem;
    border-radius: 16px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    line-height: 1;
    height: 28px;
}

/* Remove the absolute positioning from the header's status badge */
.progress-container .status-badge[b-gmvgeg1khr] {
    display: none; /* Hide the badge in the header */
}

/* Style the status badge in the delivery details section */
.delivery-details .status-badge[b-gmvgeg1khr] {
    margin-right: 8px;
    background-color: var(--neutral-layer-4);
}

/* Status-specific badge colors in details section */
.delivery-details .status-badge.pending[b-gmvgeg1khr] {
    background-color: rgba(255, 165, 0, 0.15);
    color: darkorange;
}

.delivery-details .status-badge.assigned[b-gmvgeg1khr] {
    background-color: rgba(52, 152, 219, 0.15);
    color: #2980b9;
}

.delivery-details .status-badge.pickedup[b-gmvgeg1khr] {
    background-color: rgba(46, 204, 113, 0.15);
    color: #27ae60;
}

.delivery-details .status-badge.delivered[b-gmvgeg1khr] {
    background-color: rgba(46, 204, 113, 0.15);
    color: #27ae60;
}

.delivery-details .status-badge.cancelled[b-gmvgeg1khr] {
    background-color: rgba(231, 76, 60, 0.15);
    color: #c0392b;
}

/* Accordion styling */
[b-gmvgeg1khr] .fluent-accordion-item {
    margin-bottom: 0.5rem;
    transition: all 0.3s ease;
}

[b-gmvgeg1khr] .fluent-accordion-item-header {
    padding: 0 !important;
    border-radius: 8px !important;
    overflow: hidden;
    transition: all 0.3s ease;
}

[b-gmvgeg1khr] .fluent-accordion-item-header:hover {
    background-color: transparent !important;
}

[b-gmvgeg1khr] .fluent-accordion-item-header[aria-expanded="true"] {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
}

[b-gmvgeg1khr] .fluent-accordion-item-content {
    padding: 0 !important;
    transition: all 0.3s ease;
}

/* Add styling for detail rows in the expanded view */
.detail-row[b-gmvgeg1khr] {
    display: flex;
    margin-bottom: 6px;
    align-items: flex-start;
}

.detail-label[b-gmvgeg1khr] {
    font-weight: 500;
    color: var(--neutral-foreground-hint);
    width: 120px;
    flex-shrink: 0;
    font-size: 0.9rem;
}

.detail-value[b-gmvgeg1khr] {
    font-weight: 500;
    color: var(--neutral-foreground-rest);
    flex: 1;
    font-size: 0.9rem;
}

/* Add address styling for expanded details */
.address-container[b-gmvgeg1khr] {
    display: flex;
    align-items: flex-start;
    margin: 10px 0;
    padding: 12px;
    background-color: var(--neutral-layer-1);
    border-radius: 8px;
}

.address-icon[b-gmvgeg1khr] {
    margin-right: 12px;
    color: var(--neutral-foreground-hint);
    flex-shrink: 0;
    font-size: 18px;
}

.address-text[b-gmvgeg1khr] {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--neutral-foreground-rest);
}

/* Payment information section */
.payment-info[b-gmvgeg1khr] {
    background-color: var(--neutral-layer-1);
    padding: 12px;
    border-radius: 8px;
    margin: 10px 0;
}

.payment-row[b-gmvgeg1khr] {
    display: flex;
    align-items: stretch;
    border-radius: 6px;
    overflow: hidden;
}

.payment-column[b-gmvgeg1khr] {
    flex: 1;
    padding: 8px 12px;
    border-right: 1px solid var(--neutral-stroke-subtle);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
}

.payment-column:last-child[b-gmvgeg1khr] {
    border-right: none;
}

.payment-method[b-gmvgeg1khr], .delivery-option[b-gmvgeg1khr] {
    display: flex;
    align-items: center;
    font-size: 0.9rem;
    color: var(--neutral-foreground-rest);
    margin-bottom: 4px;
}

.total-amount[b-gmvgeg1khr] {
    display: flex;
    align-items: center;
    font-weight: 600;
    color: white;
}

/* Make sure we handle overflow properly */
.payment-method[b-gmvgeg1khr], .delivery-option[b-gmvgeg1khr], .total-amount[b-gmvgeg1khr] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    gap: 8px;
}

/* Hide deprecated payment classes */
.payment-label-container[b-gmvgeg1khr],
.payment-label[b-gmvgeg1khr],
.payment-value[b-gmvgeg1khr] {
    display: none;
}


/* Contact Information Row Styling */
.contacts-row[b-gmvgeg1khr] {
    display: flex;
    align-items: stretch;
    background-color: var(--neutral-layer-1);
    border-radius: 6px;
    margin-bottom: 10px;
    padding: 8px;
    overflow: hidden;
}

.contact-column[b-gmvgeg1khr] {
    flex: 1;
    padding: 8px 12px;
    border-right: 1px solid var(--neutral-stroke-subtle);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
}

.contact-column:last-child[b-gmvgeg1khr] {
    border-right: none;
}

.contact-label[b-gmvgeg1khr] {
    font-weight: 600;
    color: var(--neutral-foreground-hint);
    align-self: flex-start;
    font-size: 0.75rem;
    margin-right: 4px;
    opacity: 0.9;
}

.contact-name[b-gmvgeg1khr] {
    font-weight: 600;
    margin-bottom: 0;
    font-size: 0.9rem;
    color: var(--neutral-foreground-rest);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.contact-phone[b-gmvgeg1khr] {
    color: var(--neutral-foreground-hint);
    font-size: 0.8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Info Row Styling (Address + Payment) */
.info-row[b-gmvgeg1khr] {
    display: flex;
    margin-bottom: 10px;
    gap: 10px;
}

.info-row .address-container[b-gmvgeg1khr] {
    flex: 3;
    margin: 0;
    margin-bottom: 0;
    background-color: var(--neutral-layer-1);
}

.info-row .payment-info[b-gmvgeg1khr] {
    flex: 2;
    margin: 0;
    margin-bottom: 0;
}

/* Options Row Styling */
.options-row[b-gmvgeg1khr] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    background-color: var(--neutral-layer-1);
    padding: 8px 12px;
    border-radius: 6px;
    margin-bottom: 10px;
    font-size: 0.8rem;
}

.option-item[b-gmvgeg1khr] {
    display: flex;
    align-items: center;
    margin-right: 24px;
    color: var(--neutral-foreground-rest);
}

.option-item:last-child[b-gmvgeg1khr] {
    margin-right: 0;
}

.option-item fluent-icon[b-gmvgeg1khr] {
    margin-right: 6px;
    color: var(--neutral-foreground-hint);
}

/* Standardize icons */
.detail-icon[b-gmvgeg1khr] {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-foreground-rest);
}

/* Status badge improvements */
.order-status[b-gmvgeg1khr] {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 16px;
    font-size: 0.85rem;
    font-weight: 600;
}

.order-status.pending[b-gmvgeg1khr] {
    background-color: rgba(255, 165, 0, 0.15);
    color: darkorange;
}

.order-status.assigned[b-gmvgeg1khr] {
    background-color: rgba(52, 152, 219, 0.15);
    color: #2980b9;
}

.order-status.pickedup[b-gmvgeg1khr] {
    background-color: rgba(46, 204, 113, 0.15);
    color: #27ae60;
}

.order-status.delivered[b-gmvgeg1khr] {
    background-color: rgba(46, 204, 113, 0.15);
    color: #27ae60;
}

.order-status.cancelled[b-gmvgeg1khr] {
    background-color: rgba(231, 76, 60, 0.15);
    color: #c0392b;
}

/* Status colors for text elements */
.status-text-pending[b-gmvgeg1khr] {
    color: orange;
    font-weight: 600;
}

.status-text-assigned[b-gmvgeg1khr] {
    color: #3498db;
    font-weight: 600;
}

.status-text-pickedup[b-gmvgeg1khr] {
    color: #2ecc71;
    font-weight: 600;
}

.status-text-delivered[b-gmvgeg1khr] {
    color: #2ecc71;
    font-weight: 600;
}

.status-text-cancelled[b-gmvgeg1khr] {
    color: #e74c3c;
    font-weight: 600;
}

.category-title[b-gmvgeg1khr] {
    margin: 0 !important;
    font-weight: 600;
}

.size24-icon[b-gmvgeg1khr] {
    font-size: 1.5rem;
}

/* Status-specific styling */
.status-pending[b-gmvgeg1khr] {
    border-left: 4px solid orange;
}

.status-assigned[b-gmvgeg1khr] {
    border-left: 4px solid #3498db;
}

.status-pickedup[b-gmvgeg1khr] {
    border-left: 4px solid #2ecc71;
}

.status-delivered[b-gmvgeg1khr] {
    border-left: 4px solid #2ecc71;
}

.status-cancelled[b-gmvgeg1khr] {
    border-left: 4px solid #e74c3c;
}

/* Empty state styling */
.empty-state[b-gmvgeg1khr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 16px;
    text-align: center;
    color: var(--neutral-foreground-rest);
    background-color: var(--neutral-layer-1);
    border-radius: 8px;
    margin: 16px 0;
}

.empty-state fluent-icon[b-gmvgeg1khr] {
    margin-bottom: 16px;
    color: var(--neutral-foreground-hint);
}

/* Custom card replacement for FluentCard */
.custom-card[b-gmvgeg1khr] {
    display: flex;
    flex-direction: column;
    background-color: var(--neutral-layer-card-rest);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--neutral-stroke-rest);
    overflow-y: auto;
}

/* Card header and body styling, matching MenuCategories.razor */
.card-header[b-gmvgeg1khr] {
    background: var(--neutral-layer-1);
    padding: 16px 24px;
    border-top-left-radius: calc(var(--layer-corner-radius) * 1px);
    border-top-right-radius: calc(var(--layer-corner-radius) * 1px);
    display: flex;
    align-items: center;
}

.card-body[b-gmvgeg1khr] {
    padding: 8px;
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
[b-gmvgeg1khr] .gm-style .gm-style-iw-c button.gm-ui-hover-effect img {
    width: 14px !important;
    height: 14px !important;
    margin: 5px !important;
}

/* Animation for delivery items */
@keyframes highlight-created-b-gmvgeg1khr {
    0% {
        background-color: rgba(46, 204, 113, 0.3);
        transform: scale(1.02);
        box-shadow: 0 0 15px rgba(46, 204, 113, 0.5);
    }
    100% {
        background-color: transparent;
        transform: scale(1);
        box-shadow: none;
    }
}

@keyframes highlight-updated-b-gmvgeg1khr {
    0% {
        background-color: rgba(52, 152, 219, 0.3);
        transform: scale(1.02);
        box-shadow: 0 0 15px rgba(52, 152, 219, 0.5);
    }
    100% {
        background-color: transparent;
        transform: scale(1);
        box-shadow: none;
    }
}

@keyframes highlight-cancelled-b-gmvgeg1khr {
    0% {
        background-color: rgba(231, 76, 60, 0.3);
        transform: scale(1.02);
        box-shadow: 0 0 15px rgba(231, 76, 60, 0.5);
    }
    100% {
        background-color: transparent;
        transform: scale(1);
        box-shadow: none;
    }
}

@keyframes highlight-completed-b-gmvgeg1khr {
    0% {
        background-color: rgba(39, 174, 96, 0.3);
        transform: scale(1.02);
        box-shadow: 0 0 15px rgba(39, 174, 96, 0.5);
    }
    100% {
        background-color: transparent;
        transform: scale(1);
        box-shadow: none;
    }
}

@keyframes fade-out-b-gmvgeg1khr {
    0% {
        opacity: 1;
        transform: translateX(0);
    }
    100% {
        opacity: 0;
        transform: translateX(-20px);
    }
}

.delivery-item-created[b-gmvgeg1khr] {
    animation: highlight-created-b-gmvgeg1khr 3s ease-out;
}

.delivery-item-updated[b-gmvgeg1khr] {
    animation: highlight-updated-b-gmvgeg1khr 3s ease-out;
}

.delivery-item-cancelled[b-gmvgeg1khr] {
    animation: highlight-cancelled-b-gmvgeg1khr 3s ease-out;
}

.delivery-item-completed[b-gmvgeg1khr] {
    animation: highlight-completed-b-gmvgeg1khr 3s ease-out;
}

.delivery-item-removed[b-gmvgeg1khr] {
    animation: fade-out-b-gmvgeg1khr 1s ease-out forwards;
}

/* Animated badge for new events */
.event-badge[b-gmvgeg1khr] {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: bold;
    color: white;
    margin-left: 5px;
    animation: badge-pulse-b-gmvgeg1khr 2s infinite;
}

@keyframes badge-pulse-b-gmvgeg1khr {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.event-badge-created[b-gmvgeg1khr] {
    background-color: #2ecc71;
}

.event-badge-updated[b-gmvgeg1khr] {
    background-color: #3498db;
}

.event-badge-cancelled[b-gmvgeg1khr] {
    background-color: #e74c3c;
}

.event-badge-completed[b-gmvgeg1khr] {
    background-color: #27ae60;
}

/* Highlight animation for accordion item */
.accordion-item-highlight[b-gmvgeg1khr] {
    position: relative;
    z-index: 10;
}

.accordion-item-highlight[b-gmvgeg1khr]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 8px;
    pointer-events: none;
    z-index: -1;
}

.accordion-item-created[b-gmvgeg1khr]::before {
    animation: border-pulse-created-b-gmvgeg1khr 3s ease-out;
}

.accordion-item-updated[b-gmvgeg1khr]::before {
    animation: border-pulse-updated-b-gmvgeg1khr 3s ease-out;
}

.accordion-item-cancelled[b-gmvgeg1khr]::before {
    animation: border-pulse-cancelled-b-gmvgeg1khr 3s ease-out;
}

.accordion-item-completed[b-gmvgeg1khr]::before {
    animation: border-pulse-completed-b-gmvgeg1khr 3s ease-out;
}

@keyframes border-pulse-created-b-gmvgeg1khr {
    0% {
        box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.8);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(46, 204, 113, 0);
    }
}

@keyframes border-pulse-updated-b-gmvgeg1khr {
    0% {
        box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.8);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(52, 152, 219, 0);
    }
}

@keyframes border-pulse-cancelled-b-gmvgeg1khr {
    0% {
        box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.8);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(231, 76, 60, 0);
    }
}

@keyframes border-pulse-completed-b-gmvgeg1khr {
    0% {
        box-shadow: 0 0 0 3px rgba(39, 174, 96, 0.8);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(39, 174, 96, 0);
    }
}

.delivery-details[b-gmvgeg1khr] {
    padding: 16px;
    background-color: var(--neutral-layer-1);
    border-radius: 8px;
}

.detail-header[b-gmvgeg1khr] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
}

.detail-id[b-gmvgeg1khr] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.detail-date[b-gmvgeg1khr] {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--neutral-foreground-hint);
    font-size: 0.875rem;
}

.detail-actions[b-gmvgeg1khr] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.contact-grid[b-gmvgeg1khr] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 16px;
}

.contact-card[b-gmvgeg1khr] {
    background-color: var(--neutral-layer-2);
    border-radius: 6px;
    padding: 12px;
}

.contact-title[b-gmvgeg1khr] {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--neutral-foreground-hint);
    font-size: 0.875rem;
    margin-bottom: 8px;
}

.contact-info[b-gmvgeg1khr] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.contact-name[b-gmvgeg1khr] {
    font-weight: 600;
}

.contact-phone[b-gmvgeg1khr] {
    color: var(--neutral-foreground-hint);
    font-size: 0.875rem;
}

.details-grid[b-gmvgeg1khr] {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 16px;
}

.detail-card[b-gmvgeg1khr] {
    background-color: var(--neutral-layer-2);
    border-radius: 6px;
    padding: 12px;
}

.detail-title[b-gmvgeg1khr] {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--neutral-foreground-hint);
    font-size: 0.875rem;
    margin-bottom: 8px;
}

.detail-content[b-gmvgeg1khr] {
    font-size: 0.875rem;
}

.address .detail-content[b-gmvgeg1khr] {
    line-height: 1.4;
}

.distance-info[b-gmvgeg1khr] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    color: var(--neutral-foreground-hint);
    font-size: 0.875rem;
}

.payment-row[b-gmvgeg1khr], .option-row[b-gmvgeg1khr] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
}

.amount[b-gmvgeg1khr] {
    font-weight: 600;
    color: var(--accent-foreground-rest);
}

.delivery-link[b-gmvgeg1khr] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--accent-foreground-rest);
    text-decoration: none;
}

    .delivery-link:hover[b-gmvgeg1khr] {
        text-decoration: underline;
    }

.status-badge[b-gmvgeg1khr] {
    padding: 4px 8px;
    border-radius: 4px;
    color: white;
    font-size: 0.75rem;
    font-weight: 500;
}

.courier-note[b-gmvgeg1khr] {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--neutral-stroke-divider-rest);
}

.note-title[b-gmvgeg1khr] {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--neutral-foreground-hint);
    font-size: 0.875rem;
    margin-bottom: 4px;
}

.note-content[b-gmvgeg1khr] {
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--neutral-foreground-rest);
    background-color: var(--neutral-layer-3);
    padding: 8px;
    border-radius: 4px;
    margin-left: 22px;
}

/* FluentCombobox dropdown height limit for firm selection */
[b-gmvgeg1khr] fluent-combobox::part(listbox) {
    max-height: 300px !important;
    overflow-y: auto !important;
    height: auto !important;
}
/* /Components/Pages/Deliveries/DeliverySimulation.razor.rz.scp.css */
/* Map container styling */
#map[b-szstg6dfjq] {
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Custom marker styling */
:global(.warehouse-icon)[b-szstg6dfjq] {
    border: none !important;
    background: none !important;
}

:global(.stop-icon)[b-szstg6dfjq] {
    border: none !important;
    background: none !important;
}

/* Form styling */
.form-control:focus[b-szstg6dfjq] {
    border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* Card styling */
.card[b-szstg6dfjq] {
    margin-bottom: 1.5rem;
    border: none;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    border-radius: 0.5rem;
}

.card-header[b-szstg6dfjq] {
    background-color: rgba(0, 0, 0, 0.03);
    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
    padding: 0.75rem 1.25rem;
    border-radius: 0.5rem 0.5rem 0 0;
}

.card-body[b-szstg6dfjq] {
    padding: 1.25rem;
}

/* Table styling */
.table-responsive[b-szstg6dfjq] {
    border-radius: 0.25rem;
}

.table[b-szstg6dfjq] {
    margin-bottom: 0;
}

.table th[b-szstg6dfjq] {
    border-top: none;
    background-color: rgba(0, 0, 0, 0.02);
}

/* Accordion styling */
.accordion-button:not(.collapsed)[b-szstg6dfjq] {
    background-color: rgba(0, 123, 255, 0.1);
    color: #0d6efd;
}

.accordion-button:focus[b-szstg6dfjq] {
    box-shadow: none;
    border-color: rgba(0, 0, 0, 0.125);
}

/* Alert styling */
.alert[b-szstg6dfjq] {
    border-radius: 0.5rem;
}

.alert-info[b-szstg6dfjq] {
    background-color: rgba(0, 123, 255, 0.1);
    border-color: rgba(0, 123, 255, 0.2);
    color: #0d6efd;
}

.alert-danger[b-szstg6dfjq] {
    background-color: rgba(220, 53, 69, 0.1);
    border-color: rgba(220, 53, 69, 0.2);
    color: #dc3545;
}

/* Panel Card Styling */
.panel-card[b-szstg6dfjq] {
    padding: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.panel-section[b-szstg6dfjq] {
    padding: 16px;
    border-bottom: 1px solid #eaeaea;
}

.section-title[b-szstg6dfjq] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px 0;
    font-size: 16px;
    font-weight: 600;
}

.section-content[b-szstg6dfjq] {
    margin-left: 24px;
}

.location-display[b-szstg6dfjq] {
    background-color: #f5f5f5;
    padding: 8px 12px;
    border-radius: 4px;
    margin: 8px 0;
    font-family: monospace;
    font-size: 14px;
}

.helper-text[b-szstg6dfjq] {
    color: #666;
    font-size: 14px;
    margin: 8px 0;
}

.action-button[b-szstg6dfjq] {
    margin-top: 8px;
}

.action-buttons[b-szstg6dfjq] {
    display: flex;
    gap: 8px;
    justify-content: space-between;
}

.primary-button[b-szstg6dfjq] {
    flex: 2;
}

.secondary-button[b-szstg6dfjq] {
    flex: 1;
}

.delivery-type-selector[b-szstg6dfjq] {
    display: flex;
    gap: 16px;
}

/* Delivery List */
.delivery-list[b-szstg6dfjq] {
    max-height: 400px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 4px;
}

.delivery-card[b-szstg6dfjq] {
    padding: 12px;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.delivery-header[b-szstg6dfjq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f0f0f0;
}

.delivery-id[b-szstg6dfjq] {
    font-weight: 600;
    font-size: 16px;
}

.delivery-details[b-szstg6dfjq] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.delivery-detail[b-szstg6dfjq] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

.detail-icon[b-szstg6dfjq] {
    min-width: 16px;
    color: #555;
}

.detail-value[b-szstg6dfjq] {
    word-break: break-word;
    font-family: monospace;
}

.badge[b-szstg6dfjq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #0078d4;
    color: white;
    border-radius: 12px;
    padding: 0 8px;
    font-size: 12px;
    margin-left: 4px;
    height: 20px;
}

/* Map Instructions */
.map-instructions[b-szstg6dfjq] {
    position: absolute;
    top: 15px;
    left: 0;
    right: 0;
    z-index: 10;
    display: flex;
    justify-content: center;
    pointer-events: none;
    width: 80%;
    max-width: 400px;
    margin: 0 auto;
}

.instruction-card[b-szstg6dfjq] {
    background-color: white !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
    border-radius: 8px;
    padding: 12px;
    pointer-events: auto;
    width: 100%;
}

.instruction-content[b-szstg6dfjq] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.instruction-icon[b-szstg6dfjq] {
    background-color: #0078d4;
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.instruction-text[b-szstg6dfjq] {
    flex: 1;
}

.instruction-text h5[b-szstg6dfjq] {
    margin: 0 0 4px 0;
    font-size: 16px;
    color: #333 !important;
}

.instruction-text p[b-szstg6dfjq] {
    margin: 0;
    font-size: 14px;
    color: #555 !important;
}

.current-location[b-szstg6dfjq] {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #eaeaea;
    font-size: 13px;
    color: #666;
}

.courier-step .instruction-icon[b-szstg6dfjq] {
    background-color: #0078d4;
}

.delivery-step .instruction-icon[b-szstg6dfjq] {
    background-color: #107c10;
}

/* Route Steps Panel */
.route-steps-panel[b-szstg6dfjq] {
    position: absolute;
    right: 15px;
    top: 15px;
    bottom: 15px;
    width: 300px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    pointer-events: auto;
    z-index: 5;
}

.route-summary[b-szstg6dfjq] {
    padding: 15px;
    background-color: #f8f9fa;
    border-bottom: 1px solid #eaeaea;
}

.route-summary h5[b-szstg6dfjq] {
    margin: 0 0 10px 0;
}

.summary-stats[b-szstg6dfjq] {
    display: flex;
    justify-content: space-between;
}

.summary-item[b-szstg6dfjq] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.summary-item small[b-szstg6dfjq] {
    color: #666;
    font-size: 0.8rem;
}

.step-card[b-szstg6dfjq] {
    padding: 15px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.step-card:hover[b-szstg6dfjq] {
    background-color: #f9f9f9;
}

.step-card.highlighted-step[b-szstg6dfjq] {
    background-color: rgba(242, 242, 242, 0.8);
    transform: translateY(-1px);
}

.step-card.hovered-step[b-szstg6dfjq] {
    background-color: rgba(248, 248, 248, 0.6);
}

.step-header[b-szstg6dfjq] {
    display: flex;
    align-items: center;
}

.step-icon[b-szstg6dfjq] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
}

.pickup[b-szstg6dfjq] {
    background-color: #33a02c;
}

.delivery[b-szstg6dfjq] {
    background-color: #e31a1c;
}

.step-info[b-szstg6dfjq] {
    flex: 1;
}

.step-title[b-szstg6dfjq] {
    font-weight: 600;
}

.step-subtitle[b-szstg6dfjq] {
    color: #666;
    font-size: 0.9rem;
}

.step-details[b-szstg6dfjq] {
    margin-top: 8px;
    padding: 0px;
    border-radius: 4px;
}

.step-metrics[b-szstg6dfjq] {
    display: flex;
    gap: 15px;
    margin-bottom: 5px;
}

.step-metric[b-szstg6dfjq] {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #666;
    font-size: 0.9rem;
}

.step-metric span[b-szstg6dfjq] {
    color: #666 !important;
}

.step-load[b-szstg6dfjq] {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #666;
    font-size: 0.9rem;
}

.divider[b-szstg6dfjq] {
    margin: 10px 0;
    height: 1px;
    background-color: #eee;
}

.panel-loading[b-szstg6dfjq] {
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
} 
/* /Components/Pages/Employees/EmployeeDetails.razor.rz.scp.css */
.dashboard-container[b-po5mm717pu] {
    padding: 20px;
}

.dashboard-card[b-po5mm717pu] {
    height: 100%;
    transition: all 0.3s ease;
    border-radius: 8px;
    overflow: hidden;
}

    .dashboard-card:hover[b-po5mm717pu] {
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
        transform: translateY(-2px);
    }

.metric-card[b-po5mm717pu] {
    text-align: center;
    padding: 16px;
}

.metric-value[b-po5mm717pu] {
    font-size: 2.5rem;
    font-weight: bold;
    margin: 10px 0;
    color: var(--accent-fill-rest);
}

.metric-label[b-po5mm717pu] {
    font-size: 1rem;
    color: var(--neutral-foreground-rest);
}

.metric-icon[b-po5mm717pu] {
    font-size: 2rem;
    margin-bottom: 10px;
    color: var(--accent-fill-rest);
}

.section-title[b-po5mm717pu] {
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.form-container[b-po5mm717pu] {
    padding: 16px;
}

.action-buttons[b-po5mm717pu] {
    display: flex;
    gap: 8px;
    margin-top: 16px;
}

.tab-content[b-po5mm717pu] {
    margin-top: 16px;
}

.custom-grid[b-po5mm717pu] {
    margin-top: 16px;
}

.status-badge[b-po5mm717pu] {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: bold;
}

.status-active[b-po5mm717pu] {
    background-color: #e6f7e6;
    color: #2e7d32;
}

.status-inactive[b-po5mm717pu] {
    background-color: #ffebee;
    color: #c62828;
}

.online-status-tag[b-po5mm717pu] {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    min-width: 70px;
    letter-spacing: 0.5px;
    border: 1px solid transparent;
    backdrop-filter: blur(10px);
    transition: all 0.2s ease-in-out;
}

.online-status-tag.status-online[b-po5mm717pu] {
    background-color: rgba(34, 197, 94, 0.15);
    color: #16a34a;
    border-color: rgba(34, 197, 94, 0.2);
}

.online-status-tag.status-break[b-po5mm717pu] {
    background-color: rgba(251, 146, 60, 0.15);
    color: #ea580c;
    border-color: rgba(251, 146, 60, 0.2);
}

.online-status-tag.status-offline[b-po5mm717pu] {
    background-color: rgba(107, 114, 128, 0.15);
    color: #4b5563;
    border-color: rgba(107, 114, 128, 0.2);
}

.online-status-tag:hover[b-po5mm717pu] {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.online-status-tag.status-online:hover[b-po5mm717pu] {
    background-color: rgba(34, 197, 94, 0.2);
}

.online-status-tag.status-break:hover[b-po5mm717pu] {
    background-color: rgba(251, 146, 60, 0.2);
}

.online-status-tag.status-offline:hover[b-po5mm717pu] {
    background-color: rgba(107, 114, 128, 0.2);
}

.courier-routes-card[b-po5mm717pu] {
    background: var(--fill-color);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 8px;
    padding: calc(var(--design-unit) * 5px);
}

.courier-routes-card .card-header[b-po5mm717pu] {
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}
/* /Components/Pages/Employees/EmployeeLogin.razor.rz.scp.css */
/* Employee Login Page - Minimal Design */

.employee-login-container[b-xa02c06nbg] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: var(--accent-fill-rest);
    padding: 20px;
}

.login-card[b-xa02c06nbg] {
    background: var(--neutral-layer-1);
    border-radius: var(--layer-corner-radius);
    box-shadow: var(--elevation-shadow-card-rest);
    width: 100%;
    max-width: 400px;
    padding: 48px 40px;
}

/* Logo Section */
.logo-section[b-xa02c06nbg] {
    text-align: center;
    margin-bottom: 40px;
}

.brand-logo[b-xa02c06nbg] {
    font-family: 'Damion', cursive;
    font-size: 32px;
    color: var(--accent-fill-rest);
    font-weight: 400;
    letter-spacing: -0.5px;
}

/* Header */
.login-header[b-xa02c06nbg] {
    text-align: center;
    margin-bottom: 36px;
}

.login-title[b-xa02c06nbg] {
    font-size: 22px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0 0 10px 0;
}

.login-subtitle[b-xa02c06nbg] {
    font-size: 14px;
    color: #737373;
    margin: 0;
    line-height: 1.5;
    font-weight: 400;
}

/* Form */
.login-form[b-xa02c06nbg] {
    width: 100%;
}

.form-group[b-xa02c06nbg] {
    margin-bottom: 20px;
}

[b-xa02c06nbg] .auth-code-input input {
    font-size: 18px !important;
    text-align: center !important;
    letter-spacing: 8px !important;
    text-transform: uppercase !important;
    font-weight: 500 !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    padding: 14px 20px !important;
    border-radius: 8px !important;
    border: 1.5px solid #e5e7eb !important;
    background: #ffffff !important;
    transition: border-color 0.15s ease !important;
    width: 100% !important;
}

[b-xa02c06nbg] .auth-code-input input:focus {
    border-color: #6366f1 !important;
    outline: none !important;
    box-shadow: none !important;
}

[b-xa02c06nbg] .auth-code-input input::placeholder {
    color: #a8a8a8 !important;
    letter-spacing: normal !important;
    font-size: 14px !important;
    text-transform: none !important;
}

[b-xa02c06nbg] .auth-code-input label {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #1a1a1a !important;
    margin-bottom: 8px !important;
    display: block !important;
}

.validation-message[b-xa02c06nbg] {
    color: #ef4444;
    font-size: 13px;
    margin-top: 6px;
}

/* Error Message */
.error-message[b-xa02c06nbg] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    background: #fef2f2;
    border-radius: 6px;
    margin-bottom: 20px;
}

.error-message span[b-xa02c06nbg] {
    color: #dc2626;
    font-size: 13px;
    font-weight: 400;
}

/* Buttons - Simplified */

/* Divider */
.divider[b-xa02c06nbg] {
    position: relative;
    text-align: center;
    margin: 28px 0;
}

.divider[b-xa02c06nbg]::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: #e5e7eb;
}

.divider span[b-xa02c06nbg] {
    position: relative;
    background: var(--neutral-layer-1);
    padding: 0 16px;
    color: var(--neutral-foreground-hint);
    font-size: 12px;
    font-weight: 400;
    text-transform: lowercase;
    letter-spacing: 0.3px;
}

/* Alternative Actions */
.alternative-actions[b-xa02c06nbg] {
    margin-bottom: 20px;
}

/* Help Text */
.help-text[b-xa02c06nbg] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px;
    background: #fafbfc;
    border-radius: 6px;
}

.help-text span[b-xa02c06nbg] {
    color: #8a8a8a;
    font-size: 13px;
    line-height: 1.4;
}

/* Responsive */
@media (max-width: 480px) {
    .login-card[b-xa02c06nbg] {
        padding: 40px 24px;
        box-shadow: none;
        border-radius: 0;
        max-width: 100%;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    
    .employee-login-container[b-xa02c06nbg] {
        padding: 0;
        background: var(--neutral-layer-1);
    }
    
    .brand-logo[b-xa02c06nbg] {
        font-size: 30px;
    }
    
    .login-title[b-xa02c06nbg] {
        font-size: 20px;
    }
    
    [b-xa02c06nbg] .auth-code-input input {
        font-size: 16px !important;
        letter-spacing: 6px !important;
        padding: 12px 16px !important;
    }
}


/* Focus visible for accessibility */
*:focus-visible[b-xa02c06nbg] {
    outline: 2px solid #6366f1;
    outline-offset: 2px;
    border-radius: 4px;
}
/* /Components/Pages/Employees/Employees.razor.rz.scp.css */
.actions-container[b-tgrecvs5yx] {
    display: flex;
    gap: 5px;
}

.online-status-tag[b-tgrecvs5yx] {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    min-width: 70px;
    letter-spacing: 0.5px;
    border: 1px solid transparent;
    backdrop-filter: blur(10px);
    transition: all 0.2s ease-in-out;
}

.online-status-tag.status-online[b-tgrecvs5yx] {
    background-color: rgba(34, 197, 94, 0.15);
    color: #16a34a;
    border-color: rgba(34, 197, 94, 0.2);
}

.online-status-tag.status-break[b-tgrecvs5yx] {
    background-color: rgba(251, 146, 60, 0.15);
    color: #ea580c;
    border-color: rgba(251, 146, 60, 0.2);
}

.online-status-tag.status-offline[b-tgrecvs5yx] {
    background-color: rgba(107, 114, 128, 0.15);
    color: #4b5563;
    border-color: rgba(107, 114, 128, 0.2);
}

.online-status-tag:hover[b-tgrecvs5yx] {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.online-status-tag.status-online:hover[b-tgrecvs5yx] {
    background-color: rgba(34, 197, 94, 0.2);
}

.online-status-tag.status-break:hover[b-tgrecvs5yx] {
    background-color: rgba(251, 146, 60, 0.2);
}

.online-status-tag.status-offline:hover[b-tgrecvs5yx] {
    background-color: rgba(107, 114, 128, 0.2);
}
/* /Components/Pages/FoodCompany/FoodCompanyDetails.razor.rz.scp.css */
.dashboard-card[b-jg59nxgg9v] {
    height: 100%;
    transition: all 0.3s ease;
    border-radius: 8px;
    overflow: hidden;
}

    .dashboard-card:hover[b-jg59nxgg9v] {
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
        transform: translateY(-2px);
    }

.metric-card[b-jg59nxgg9v] {
    text-align: center;
    padding: 16px;
}

.metric-value[b-jg59nxgg9v] {
    font-size: 2.5rem;
    font-weight: bold;
    margin: 10px 0;
    color: var(--accent-fill-rest);
}

.metric-label[b-jg59nxgg9v] {
    font-size: 1rem;
    color: var(--neutral-foreground-rest);
}

.metric-icon[b-jg59nxgg9v] {
    font-size: 2rem;
    margin-bottom: 10px;
    color: var(--accent-fill-rest);
}

.section-title[b-jg59nxgg9v] {
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.map-container[b-jg59nxgg9v] {
    border-radius: 8px;
    overflow: hidden;
    height: 350px;
}

.form-container[b-jg59nxgg9v] {
    padding: 16px;
}

.action-buttons[b-jg59nxgg9v] {
    display: flex;
    gap: 8px;
    margin-top: 16px;
}

.tab-content[b-jg59nxgg9v] {
    padding: 16px 0;
}

.custom-grid[b-jg59nxgg9v] {
    margin-top: 16px;
}

.status-badge[b-jg59nxgg9v] {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: bold;
}

.status-active[b-jg59nxgg9v] {
    background-color: #e6f7e6;
    color: #2e7d32;
}

.status-inactive[b-jg59nxgg9v] {
    background-color: #ffebee;
    color: #c62828;
}
/* /Components/Pages/Integrations/ConfigureIntegration.razor.rz.scp.css */
.configure-container[b-vawh68gwx3] {
    padding: 20px;
}

.loading-container[b-vawh68gwx3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px;
    gap: 16px;
    min-height: 400px;
}

.integration-header[b-vawh68gwx3] {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--neutral-layer-2);
    border-radius: 12px;
    padding: 20px;
}

.integration-logo[b-vawh68gwx3] {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    background: var(--neutral-layer-4);
    display: flex;
    align-items: center;
    justify-content: center;
}

.integration-info[b-vawh68gwx3] {
    flex: 1;
}

.integration-title[b-vawh68gwx3] {
    font-size: 1.5rem;
    font-weight: bold;
    margin: 0;
    color: var(--neutral-foreground-rest);
}

.integration-provider[b-vawh68gwx3] {
    font-size: 0.9rem;
    color: var(--accent-foreground-rest);
    font-weight: 500;
}

.config-section[b-vawh68gwx3] {
    margin-bottom: 24px;
}

.config-card[b-vawh68gwx3] {
    border-radius: 12px;
    overflow: hidden;
}

.config-header[b-vawh68gwx3] {
    background: var(--neutral-layer-2);
    padding: 16px 20px;
    border-bottom: 1px solid var(--neutral-stroke-rest);
    display: flex;
    align-items: center;
    gap: 12px;
}

.config-body[b-vawh68gwx3] {
    padding: 20px;
}

.form-group[b-vawh68gwx3] {
    margin-bottom: 16px;
}

.form-label[b-vawh68gwx3] {
    font-weight: bold;
    margin-bottom: 4px;
    display: block;
}

.form-description[b-vawh68gwx3] {
    font-size: 0.85rem;
    color: var(--neutral-foreground-hint);
    margin-bottom: 8px;
}

.test-result[b-vawh68gwx3] {
    margin-top: 16px;
    padding: 12px;
    border-radius: 8px;
}

.test-success[b-vawh68gwx3] {
    background-color: #e6f7e6;
    color: #2e7d32;
    border: 1px solid #4caf50;
}

.test-error[b-vawh68gwx3] {
    background-color: #ffebee;
    color: #c62828;
    border: 1px solid #f44336;
}

.test-warning[b-vawh68gwx3] {
    background-color: #fff3e0;
    color: #f57c00;
    border: 1px solid #ff9800;
}

.action-buttons[b-vawh68gwx3] {
    display: flex;
    gap: 12px;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--neutral-stroke-rest);
}

.mode-selector[b-vawh68gwx3] {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.mode-button[b-vawh68gwx3] {
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid var(--neutral-stroke-rest);
    background: var(--neutral-layer-1);
    cursor: pointer;
    transition: all 0.2s ease;
}

.mode-button.active[b-vawh68gwx3] {
    background: var(--accent-fill-rest);
    color: white;
    border-color: var(--accent-fill-rest);
}

.array-input[b-vawh68gwx3] {
    margin-bottom: 8px;
}

.array-item[b-vawh68gwx3] {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
    align-items: center;
}

.array-item input[b-vawh68gwx3] {
    flex: 1;
}

.centered-error[b-vawh68gwx3] {
    text-align: center;
    padding: 40px;
}

.header-stack[b-vawh68gwx3] {
    margin-bottom: 24px;
}

.header-title[b-vawh68gwx3] {
    margin: 0;
    font-size: 1.8rem;
}

.header-desc[b-vawh68gwx3] {
    margin: 0;
    color: var(--neutral-foreground-hint);
}

.integration-header[b-vawh68gwx3] {
    margin-bottom: 16px;
}

.integration-desc[b-vawh68gwx3] {
    margin: 8px 0 0 0;
    color: var(--neutral-foreground-hint);
}

.config-section[b-vawh68gwx3] {
    max-width: 420px;
}

.config-header h3[b-vawh68gwx3] {
    margin: 0;
}

.action-buttons[b-vawh68gwx3] {
    justify-content: flex-start;
    max-width: 420px;
    margin: 24px 0 0 0;
} 
/* /Components/Pages/Integrations/IntegrationsIndex.razor.rz.scp.css */
/* Compact Integration Marketplace Design */

/* Page Layout - More Compact */

.page-header[b-57wgt64wdt] {
    margin-bottom: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.page-title[b-57wgt64wdt] {
    font-size: 2rem;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin: 0;
}

/* Header Actions - Like other pages */
.header-actions[b-57wgt64wdt] {
    display: flex;
    gap: 10px;
    align-items: end;
    flex-wrap: wrap;
}

.store-filter[b-57wgt64wdt] {
    display: flex;
    flex-direction: column;
}

.store-filter label[b-57wgt64wdt] {
    margin-bottom: 5px;
    font-weight: 500;
}

.store-filter select[b-57wgt64wdt] {
    width: 200px;
    height: 32px;
    padding: 6px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* Loading States - Compact */
.loading-state[b-57wgt64wdt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    gap: 1rem;
}

.loading-spinner[b-57wgt64wdt] {
    width: 1.5rem;
    height: 1.5rem;
    border: 2px solid var(--neutral-stroke-rest);
    border-top: 2px solid var(--accent-fill-rest);
    border-radius: 50%;
    animation: spin-b-57wgt64wdt 0.8s linear infinite;
}

@keyframes spin-b-57wgt64wdt {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading-state p[b-57wgt64wdt] {
    color: var(--neutral-foreground-hint);
    font-size: 0.875rem;
    margin: 0;
}

/* Marketplace Grid - Compact */
.marketplace-grid[b-57wgt64wdt] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Category Section - Compact */
.category-section[b-57wgt64wdt] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.category-header[b-57wgt64wdt] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--accent-fill-rest);
    min-height: 2rem;
}

.category-info[b-57wgt64wdt] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
}

.category-icon[b-57wgt64wdt] {
    width: 1rem;
    height: 1rem;
    color: var(--accent-fill-rest);
    flex-shrink: 0;
}

.category-title[b-57wgt64wdt] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin: 0;
    white-space: nowrap;
    flex-shrink: 0;
}

.category-count[b-57wgt64wdt] {
    background: var(--accent-fill-rest);
    color: white;
    padding: 0.125rem 0.375rem;
    border-radius: 0.75rem;
    font-size: 0.625rem;
    font-weight: 600;
    flex-shrink: 0;
    margin-left: 0.375rem;
}

/* Integrations Grid - 4 per row */
.integrations-grid[b-57wgt64wdt] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

/* Integration Card - Tables.razor style with left border */
.integration-card[b-57wgt64wdt] {
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 0.5rem;
    padding: 1rem;
    position: relative;
    transition: all 0.2s ease;
    cursor: pointer;
    overflow: hidden;
    min-height: 140px;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 0.75rem;
}

.integration-card[b-57wgt64wdt]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 3px;
    background: transparent;
    transition: background 0.2s ease;
}

.integration-card:hover[b-57wgt64wdt] {
    border-color: var(--accent-fill-rest);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.integration-card.connected[b-57wgt64wdt] {
    border-color: #22c55e;
    background: var(--neutral-layer-1);
}

.integration-card.connected[b-57wgt64wdt]::before {
    background: #22c55e;
}

.integration-card.configured[b-57wgt64wdt] {
    border-color: #f97316;
    background: var(--neutral-layer-1);
}

.integration-card.configured[b-57wgt64wdt]::before {
    background: #f97316;
}

/* Connection Indicator (Far Left) - Like Tables availability */
.connection-indicator[b-57wgt64wdt] {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.connection-indicator.connected[b-57wgt64wdt] {
    color: #22c55e;
    background: rgba(34, 197, 94, 0.15);
}

.connection-indicator.disconnected[b-57wgt64wdt] {
    color: var(--neutral-foreground-hint);
    background: var(--neutral-layer-2);
}

/* Integration Info Section (Center) - Like MenuPreview product-info */
.integration-info[b-57wgt64wdt] {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
    min-width: 0;
}

/* Integration Image Section (Right) - Like MenuPreview product-image-container */
.integration-image-container[b-57wgt64wdt] {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    border-radius: 0.375rem;
    overflow: hidden;
    background: var(--neutral-layer-2);
    display: flex;
    align-items: center;
    justify-content: center;
}

.integration-image-container img[b-57wgt64wdt] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.integration-image-placeholder[b-57wgt64wdt] {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--neutral-foreground-hint);
    font-size: 0.75rem;
    gap: 0.25rem;
}

/* Card Content - Compact */
.card-content[b-57wgt64wdt] {
    margin-bottom: 0.75rem;
    flex: 1;
}

.integration-name[b-57wgt64wdt] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin: 0 0 0.125rem 0;
    line-height: 1.2;
}

.integration-provider[b-57wgt64wdt] {
    font-size: 0.625rem;
    color: var(--accent-fill-rest);
    margin: 0 0 0.375rem 0;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.integration-description[b-57wgt64wdt] {
    font-size: 0.75rem;
    color: var(--neutral-foreground-hint);
    line-height: 1.3;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Card Footer - Compact */
.card-footer[b-57wgt64wdt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--neutral-stroke-rest);
    margin-top: auto;
}

/* Pricing Info - Compact */
.pricing-info[b-57wgt64wdt] {
    flex-shrink: 0;
}

.badge[b-57wgt64wdt] {
    display: inline-block;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.badge.free[b-57wgt64wdt] {
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
}

.badge.paid[b-57wgt64wdt] {
    background: rgba(59, 130, 246, 0.1);
    color: #2563eb;
}

.badge.coming-soon[b-57wgt64wdt] {
    background: rgba(245, 158, 11, 0.1);
    color: #d97706;
}

/* Card Actions - Compact */
.card-actions[b-57wgt64wdt] {
    display: flex;
    gap: 0.375rem;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: center;
}

/* Custom Buttons - Compact */
.btn[b-57wgt64wdt] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.6875rem;
    font-weight: 500;
    border-radius: 0.25rem;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    outline: none;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    min-height: 26px;
    flex-shrink: 0;
}

.btn-primary[b-57wgt64wdt] {
    background: var(--accent-fill-rest);
    color: white;
}

.btn-primary:hover[b-57wgt64wdt] {
    background: var(--accent-fill-hover);
}

.btn-secondary[b-57wgt64wdt] {
    background: var(--neutral-layer-2);
    color: var(--neutral-foreground-rest);
    border: 1px solid var(--neutral-stroke-rest);
}

.btn-secondary:hover[b-57wgt64wdt] {
    background: var(--neutral-layer-3);
    border-color: var(--accent-fill-rest);
}

.btn-outline[b-57wgt64wdt] {
    background: transparent;
    color: var(--neutral-foreground-hint);
    border: 1px solid var(--neutral-stroke-rest);
}

.btn-outline:hover[b-57wgt64wdt] {
    background: var(--neutral-layer-2);
    color: var(--neutral-foreground-rest);
    border-color: var(--accent-fill-rest);
}

/* Empty States - Compact */
.empty-state[b-57wgt64wdt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    text-align: center;
    background: var(--neutral-layer-1);
    border-radius: 0.5rem;
    border: 1px solid var(--neutral-stroke-rest);
}

.empty-icon[b-57wgt64wdt] {
    width: 2.5rem;
    height: 2.5rem;
    margin-bottom: 0.75rem;
    opacity: 0.4;
    color: var(--neutral-foreground-hint);
}

.empty-state h3[b-57wgt64wdt] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin: 0 0 0.25rem 0;
}

.empty-state p[b-57wgt64wdt] {
    font-size: 0.875rem;
    color: var(--neutral-foreground-hint);
    margin: 0;
    max-width: 300px;
    line-height: 1.4;
}

/* Responsive Design - Compact */
@media (max-width: 768px) {
    .page-container[b-57wgt64wdt] {
        padding: 0.75rem;
    }
    
    .page-header[b-57wgt64wdt] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
        margin-bottom: 0.75rem;
    }
    
    .header-left[b-57wgt64wdt] {
        margin-bottom: 0.25rem;
    }
    
    .header-actions[b-57wgt64wdt] {
        justify-content: flex-start;
    }
    
    .store-filter[b-57wgt64wdt] {
        width: 150px;
    }
    
    .store-filter select[b-57wgt64wdt] {
        width: 150px;
        height: 26px;
    }
    
    .integrations-grid[b-57wgt64wdt] {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
    
    .integration-card[b-57wgt64wdt] {
        padding: 0.75rem;
        min-height: 120px;
    }
    
    .card-footer[b-57wgt64wdt] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.25rem;
    }
    
    .card-actions[b-57wgt64wdt] {
        justify-content: stretch;
    }
    
    .btn[b-57wgt64wdt] {
        flex: 1;
        justify-content: center;
        font-size: 0.625rem;
        padding: 0.25rem 0.375rem;
    }
}

@media (max-width: 480px) {
    .page-container[b-57wgt64wdt] {
        padding: 0.5rem;
    }
    
    .page-title[b-57wgt64wdt] {
        font-size: 1.25rem;
    }
    
    .page-subtitle[b-57wgt64wdt] {
        font-size: 0.75rem;
    }
    
    .integrations-grid[b-57wgt64wdt] {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    
    .integration-card[b-57wgt64wdt] {
        padding: 0.75rem;
        min-height: 120px;
    }
    
    .integration-name[b-57wgt64wdt] {
        font-size: 0.8125rem;
    }
    
    .integration-description[b-57wgt64wdt] {
        font-size: 0.6875rem;
    }
}
/* /Components/Pages/Inventory/Inventory.razor.rz.scp.css */
.inventory-container[b-wnjwfyyk1c] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background: var(--neutral-layer-1);
}

.inventory-toolbar[b-wnjwfyyk1c] {
    background: white;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--neutral-stroke-layer-rest);
    flex-shrink: 0;
}

.inventory-content[b-wnjwfyyk1c] {
    flex: 1;
    display: flex;
    overflow: hidden;
}

.inventory-main-section[b-wnjwfyyk1c] {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: white;
    overflow: hidden;
}

.filters-bar[b-wnjwfyyk1c] {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--neutral-stroke-layer-rest);
    background: var(--neutral-layer-1);
}

.grid-container[b-wnjwfyyk1c] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.inventory-grid[b-wnjwfyyk1c] {
    flex: 1;
    overflow: auto;
}

    .inventory-grid[b-wnjwfyyk1c]::part(grid) {
        border: none;
    }

    .inventory-grid[b-wnjwfyyk1c]::part(header-cell) {
        background: var(--neutral-layer-2);
        font-weight: 600;
        border-bottom: 2px solid var(--neutral-stroke-layer-rest);
        padding: 0.75rem 1rem;
    }

    .inventory-grid[b-wnjwfyyk1c]::part(row) {
        border-bottom: 1px solid var(--neutral-stroke-layer-rest);
    }

        .inventory-grid[b-wnjwfyyk1c]::part(row):hover {
            background: var(--neutral-layer-2);
        }

    .inventory-grid[b-wnjwfyyk1c]::part(cell) {
        padding: 0.75rem 1rem;
    }

.pagination-container[b-wnjwfyyk1c] {
    padding: 1rem;
    border-top: 1px solid var(--neutral-stroke-layer-rest);
    background: white;
}

/* Scrollbar Styling */
.inventory-grid[b-wnjwfyyk1c]::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.inventory-grid[b-wnjwfyyk1c]::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

    .inventory-grid[b-wnjwfyyk1c]::-webkit-scrollbar-thumb:hover {
        background: rgba(0, 0, 0, 0.3);
    }

.inventory-grid[b-wnjwfyyk1c]::-webkit-scrollbar-track {
    background: transparent;
}

/* Responsive Design */
@media (max-width: 768px) {
    .inventory-toolbar[b-wnjwfyyk1c],
    .filters-bar[b-wnjwfyyk1c] {
        padding: 1rem;
    }

    .inventory-grid[b-wnjwfyyk1c] {
        font-size: 0.9rem;
    }
}
/* /Components/Pages/Kiosks/KioskDetails.razor.rz.scp.css */
/* Section title styling */
.section-title-wrapper[b-lqrlnsasd1] {
    padding: 16px 16px 0 16px;
}

.section-title-heading[b-lqrlnsasd1] {
    margin: 0;
    font-size: 14px;
}

/* Description text */
.section-description[b-lqrlnsasd1] {
    padding: 8px 16px 0 16px;
    font-size: 11px;
    color: #666;
    line-height: 1.3;
}

/* Form container */
.form-wrapper[b-lqrlnsasd1] {
    padding: 12px;
}

/* Labels */
.field-label[b-lqrlnsasd1] {
    font-weight: bold;
    font-size: 12px;
}

/* Pairing key display */
.pairing-key-code[b-lqrlnsasd1] {
    background: var(--neutral-layer-2);
    padding: 8px 12px;
    border-radius: 4px;
    font-family: monospace;
    font-size: 12px;
    flex: 1;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pairing-key-button[b-lqrlnsasd1] {
    min-width: 32px;
    padding: 4px 8px;
}

/* Device identifier code */
.device-id-code[b-lqrlnsasd1] {
    background: var(--neutral-layer-2);
    padding: 8px 12px;
    border-radius: 4px;
    font-family: monospace;
    font-size: 11px;
    display: block;
    margin-top: 4px;
}

/* Info text */
.info-text[b-lqrlnsasd1] {
    padding: 8px 0;
    font-size: 13px;
}

/* Save buttons container */
.save-buttons-container[b-lqrlnsasd1] {
    margin-top: 16px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--neutral-stroke-divider-rest);
}

/* Section headings */
.section-heading[b-lqrlnsasd1] {
    font-size: 13px;
    margin-top: 8px;
}

.section-heading-large[b-lqrlnsasd1] {
    font-size: 13px;
    margin-top: 16px;
}
/* /Components/Pages/Kiosks/Kiosks.razor.rz.scp.css */
/* Filters container */
.filters-container[b-01kbifzl64] {
    display: flex;
    gap: 10px;
    align-items: end;
    flex-wrap: wrap;
}

/* Filter item wrapper */
.filter-item[b-01kbifzl64] {
    display: flex;
    flex-direction: column;
}

/* Filter labels */
.filter-label[b-01kbifzl64] {
    margin-bottom: 5px;
    font-weight: 500;
}

/* Filter selects */
.filter-select[b-01kbifzl64] {
    width: 200px;
    height: 32px;
    padding: 6px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.filter-select-status[b-01kbifzl64] {
    width: 150px;
    height: 32px;
    padding: 6px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* Search field */
.search-field[b-01kbifzl64] {
    width: 200px;
}
/* /Components/Pages/Kiosks/KiosksGrid.razor.rz.scp.css */
/* Pairing key code block */
.pairing-key-display[b-h5ygj7ff2k] {
    background: var(--neutral-layer-2);
    padding: 4px 8px;
    border-radius: 4px;
    font-family: monospace;
    font-size: 13px;
}

/* Empty state text */
.empty-state-text[b-h5ygj7ff2k] {
    color: var(--neutral-foreground-hint);
}
/* /Components/Pages/Landing/About.razor.rz.scp.css */
/* About Page Styles */
.about-container[b-o7ld7dhdnc] {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    line-height: 1.6;
    color: #1a1a1a;
    min-height: 100vh;
    background: #f8fafc;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 2rem 1rem;
    box-sizing: border-box;
}

.about-content[b-o7ld7dhdnc] {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 3rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    position: relative;
}

/* Header Styles */
.about-header[b-o7ld7dhdnc] {
    text-align: center;
    margin-bottom: 4rem;
    padding-bottom: 2rem;
    border-bottom: 2px solid #e2e8f0;
}

.back-link[b-o7ld7dhdnc] {
    display: inline-flex;
    align-items: center;
    color: var(--accent-fill-rest);
    text-decoration: none;
    font-weight: 500;
    margin-bottom: 2rem;
    transition: color 0.3s ease;
}

.back-link:hover[b-o7ld7dhdnc] {
    color: #5a67d8;
}

.about-title[b-o7ld7dhdnc] {
    font-size: 3rem;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.about-subtitle[b-o7ld7dhdnc] {
    font-size: 1.25rem;
    color: #4a5568;
    margin: 0;
}

/* Hero Section */
.hero-section[b-o7ld7dhdnc] {
    margin-bottom: 4rem;
    text-align: center;
}

.hero-content h2[b-o7ld7dhdnc] {
    font-size: 2rem;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 1.5rem;
}

.hero-content p[b-o7ld7dhdnc] {
    font-size: 1.125rem;
    color: #4a5568;
    max-width: 800px;
    margin: 0 auto 3rem;
    line-height: 1.7;
}

.hero-stats[b-o7ld7dhdnc] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.stat-item[b-o7ld7dhdnc] {
    text-align: center;
    padding: 2rem;
    background: #f7fafc;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    transition: transform 0.3s ease;
}

.stat-item:hover[b-o7ld7dhdnc] {
    transform: translateY(-5px);
}

.stat-number[b-o7ld7dhdnc] {
    display: block;
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--accent-fill-rest);
    margin-bottom: 0.5rem;
}

.stat-label[b-o7ld7dhdnc] {
    font-size: 1rem;
    color: #4a5568;
    font-weight: 500;
}

/* Mission Section */
.mission-section[b-o7ld7dhdnc] {
    margin-bottom: 4rem;
}

.mission-grid[b-o7ld7dhdnc] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.mission-item[b-o7ld7dhdnc] {
    text-align: center;
    padding: 2.5rem;
    background: white;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.mission-item[b-o7ld7dhdnc]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--accent-fill-rest);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.mission-item:hover[b-o7ld7dhdnc]::before {
    transform: scaleX(1);
}

.mission-item:hover[b-o7ld7dhdnc] {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.mission-icon[b-o7ld7dhdnc] {
    font-size: 3rem;
    margin-bottom: 1.5rem;
}

.mission-item h3[b-o7ld7dhdnc] {
    font-size: 1.5rem;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 1rem;
}

.mission-item p[b-o7ld7dhdnc] {
    color: #4a5568;
    line-height: 1.6;
}

/* Story Section */
.story-section[b-o7ld7dhdnc] {
    margin-bottom: 4rem;
}

.story-section h2[b-o7ld7dhdnc] {
    font-size: 2rem;
    font-weight: 600;
    color: #2d3748;
    text-align: center;
    margin-bottom: 3rem;
}

.story-content[b-o7ld7dhdnc] {
    display: grid;
    gap: 4rem;
    align-items: start;
}

.story-text p[b-o7ld7dhdnc] {
    margin-bottom: 1.5rem;
    color: #4a5568;
    line-height: 1.7;
    font-size: 1.1rem;
}

.story-timeline[b-o7ld7dhdnc] {
    position: relative;
    padding-left: 2rem;
}

.story-timeline[b-o7ld7dhdnc]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--accent-fill-rest);
}

.timeline-item[b-o7ld7dhdnc] {
    position: relative;
    margin-bottom: 2rem;
    padding-left: 2rem;
}

.timeline-item[b-o7ld7dhdnc]::before {
    content: '';
    position: absolute;
    left: -1.5rem;
    top: 0.5rem;
    width: 12px;
    height: 12px;
    background: var(--accent-fill-rest);
    border-radius: 50%;
    border: 3px solid white;
    box-shadow: 0 0 0 3px var(--accent-fill-rest);
}

.timeline-year[b-o7ld7dhdnc] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--accent-fill-rest);
    margin-bottom: 0.5rem;
}

.timeline-content h4[b-o7ld7dhdnc] {
    font-size: 1.1rem;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 0.25rem;
}

.timeline-content p[b-o7ld7dhdnc] {
    color: #4a5568;
    font-size: 0.9rem;
    margin: 0;
}

/* Team Section */
.team-section[b-o7ld7dhdnc] {
    margin-bottom: 4rem;
}

.team-section h2[b-o7ld7dhdnc] {
    font-size: 2rem;
    font-weight: 600;
    color: #2d3748;
    text-align: center;
    margin-bottom: 1rem;
}

.team-description[b-o7ld7dhdnc] {
    text-align: center;
    color: #4a5568;
    font-size: 1.1rem;
    margin-bottom: 3rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.team-grid[b-o7ld7dhdnc] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.team-member[b-o7ld7dhdnc] {
    text-align: center;
    padding: 2rem;
    background: white;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
}

.team-member:hover[b-o7ld7dhdnc] {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.member-avatar[b-o7ld7dhdnc] {
    font-size: 4rem;
    margin-bottom: 1rem;
}

.team-member h3[b-o7ld7dhdnc] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 0.5rem;
}

.member-role[b-o7ld7dhdnc] {
    color: var(--accent-fill-rest);
    font-weight: 500;
    margin-bottom: 0.75rem;
}

.member-bio[b-o7ld7dhdnc] {
    color: #4a5568;
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0;
}

/* Technology Section */
.technology-section[b-o7ld7dhdnc] {
    margin-bottom: 4rem;
}

.technology-section h2[b-o7ld7dhdnc] {
    font-size: 2rem;
    font-weight: 600;
    color: #2d3748;
    text-align: center;
    margin-bottom: 3rem;
}

.tech-content[b-o7ld7dhdnc] {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 4rem;
    align-items: center;
}

.tech-text p[b-o7ld7dhdnc] {
    color: #4a5568;
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 2rem;
}

.tech-features[b-o7ld7dhdnc] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.tech-features li[b-o7ld7dhdnc] {
    color: #4a5568;
    margin-bottom: 0.75rem;
    font-size: 1rem;
}

.tech-stack[b-o7ld7dhdnc] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.tech-item[b-o7ld7dhdnc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5rem;
    background: #f7fafc;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
}

.tech-item:hover[b-o7ld7dhdnc] {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.tech-icon[b-o7ld7dhdnc] {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.tech-name[b-o7ld7dhdnc] {
    font-weight: 600;
    color: #2d3748;
    font-size: 0.9rem;
}

/* Contact CTA */
.contact-cta[b-o7ld7dhdnc] {
    text-align: center;
    padding: 3rem;
    background: var(--accent-fill-rest);
    border-radius: 16px;
    color: white;
}

.contact-cta h2[b-o7ld7dhdnc] {
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: white;
}

.contact-cta p[b-o7ld7dhdnc] {
    font-size: 1.1rem;
    margin-bottom: 2rem;
    opacity: 0.9;
}

.cta-buttons[b-o7ld7dhdnc] {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.btn-primary[b-o7ld7dhdnc] {
    padding: 1rem 2rem;
    background: white;
    color: var(--accent-fill-rest);
    text-decoration: none;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.btn-primary:hover[b-o7ld7dhdnc] {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 255, 255, 0.3);
}

.btn-secondary[b-o7ld7dhdnc] {
    padding: 1rem 2rem;
    background: transparent;
    color: white;
    text-decoration: none;
    font-weight: 600;
    border-radius: 8px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.btn-secondary:hover[b-o7ld7dhdnc] {
    background: rgba(255, 255, 255, 0.1);
    border-color: white;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .story-content[b-o7ld7dhdnc] {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .tech-content[b-o7ld7dhdnc] {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .hero-stats[b-o7ld7dhdnc] {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 1.5rem;
    }
}

@media (max-width: 768px) {
    .about-container[b-o7ld7dhdnc] {
        padding: 1rem 0.5rem;
    }

    .about-content[b-o7ld7dhdnc] {
        padding: 2rem;
        border-radius: 8px;
        max-width: 100%;
    }

    .about-title[b-o7ld7dhdnc] {
        font-size: 2.5rem;
    }

    .mission-grid[b-o7ld7dhdnc] {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .team-grid[b-o7ld7dhdnc] {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1.5rem;
    }

    .tech-stack[b-o7ld7dhdnc] {
        grid-template-columns: 1fr;
    }

    .cta-buttons[b-o7ld7dhdnc] {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }

    .cta-buttons a[b-o7ld7dhdnc] {
        width: 100%;
        max-width: 300px;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .about-container[b-o7ld7dhdnc] {
        padding: 0.5rem 0.25rem;
    }

    .about-content[b-o7ld7dhdnc] {
        padding: 1.5rem;
        border-radius: 6px;
    }

    .about-title[b-o7ld7dhdnc] {
        font-size: 2rem;
    }

    .hero-stats[b-o7ld7dhdnc] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .stat-item[b-o7ld7dhdnc] {
        padding: 1.5rem;
    }

    .mission-item[b-o7ld7dhdnc] {
        padding: 2rem;
    }

    .team-member[b-o7ld7dhdnc] {
        padding: 1.5rem;
    }
} 
/* /Components/Pages/Landing/Applications.razor.rz.scp.css */
/* Applications Page Styles */
.applications-container[b-mgx5u1udit] {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    line-height: 1.6;
    color: #1a1a1a;
    min-height: 100vh;
    background: #f8fafc;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 2rem 1rem;
    box-sizing: border-box;
}

.applications-content[b-mgx5u1udit] {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 3rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    position: relative;
}

/* Header Styles */
.applications-header[b-mgx5u1udit] {
    text-align: center;
    margin-bottom: 4rem;
    padding-bottom: 2rem;
    border-bottom: 2px solid #e2e8f0;
}

.back-link[b-mgx5u1udit] {
    display: inline-flex;
    align-items: center;
    color: var(--accent-fill-rest);
    text-decoration: none;
    font-weight: 500;
    margin-bottom: 2rem;
    transition: color 0.3s ease;
}

.back-link:hover[b-mgx5u1udit] {
    color: #5a67d8;
}

.applications-title[b-mgx5u1udit] {
    font-size: 3rem;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.applications-subtitle[b-mgx5u1udit] {
    font-size: 1.25rem;
    color: #4a5568;
    margin-bottom: 2rem;
}

/* Section Styles */
.mobile-apps-section[b-mgx5u1udit],
.extensions-section[b-mgx5u1udit] {
    margin-bottom: 4rem;
}

.mobile-apps-section h2[b-mgx5u1udit],
.extensions-section h2[b-mgx5u1udit] {
    font-size: 2rem;
    font-weight: 600;
    color: #2d3748;
    text-align: center;
    margin-bottom: 1rem;
}

.section-description[b-mgx5u1udit] {
    color: #4a5568;
    text-align: center;
    margin-bottom: 3rem;
    font-size: 1.1rem;
}

.apps-grid[b-mgx5u1udit] {
    display: flex;
    justify-content: center;
    margin-top: 3rem;
}

.app-card[b-mgx5u1udit] {
    background: white;
    border-radius: 20px;
    padding: 2.5rem;
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    max-width: 600px;
    width: 100%;
}

.app-card[b-mgx5u1udit]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--accent-fill-rest), #5a67d8);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.app-card:hover[b-mgx5u1udit]::before {
    transform: scaleX(1);
}

.app-card:hover[b-mgx5u1udit] {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    border-color: var(--accent-fill-rest);
}

/* App Header */
.app-header[b-mgx5u1udit] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 2rem;
}

.app-icon[b-mgx5u1udit] {
    width: 60px;
    height: 60px;
    background-image: url('assets/employee-app-icon.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
    flex-shrink: 0;
}

.app-icon .icon[b-mgx5u1udit] {
    display: none;
}

.app-info[b-mgx5u1udit] {
    flex: 1;
}

.app-title[b-mgx5u1udit] {
    font-size: 1.3rem;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 0.5rem;
}

.app-description[b-mgx5u1udit] {
    color: #4a5568;
    margin-bottom: 0;
    line-height: 1.5;
    font-size: 0.9rem;
}

/* Screenshots Carousel */
.app-screenshots[b-mgx5u1udit] {
    margin-bottom: 2rem;
}

.screenshots-carousel[b-mgx5u1udit] {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    background: #f8fafc;
    padding: 1rem;
}

.screenshot-container[b-mgx5u1udit] {
    display: flex;
    transition: transform 0.5s ease;
    gap: 1rem;
}

.screenshot[b-mgx5u1udit] {
    width: calc(100% / 2 - 0.5rem);
    height: 500px;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
    background: white;
}

/* Carousel Navigation */
.carousel-nav[b-mgx5u1udit] {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 10;
}

.carousel-btn.prev[b-mgx5u1udit] {
    position: absolute;
    left: 0.5rem;
    pointer-events: all;
}

.carousel-btn.next[b-mgx5u1udit] {
    position: absolute;
    right: 0.5rem;
    pointer-events: all;
}

.carousel-btn[b-mgx5u1udit] {
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--accent-fill-rest);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    pointer-events: all;
}

.carousel-btn:hover[b-mgx5u1udit] {
    background: white;
    transform: scale(1.1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    color: var(--accent-fill-hover);
}

/* Carousel Dots */
.carousel-dots[b-mgx5u1udit] {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1rem;
}

.dot[b-mgx5u1udit] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #cbd5e0;
    cursor: pointer;
    transition: all 0.3s ease;
}

.dot.active[b-mgx5u1udit] {
    background: var(--accent-fill-rest);
    transform: scale(1.2);
}

.dot:hover[b-mgx5u1udit] {
    background: #a0aec0;
}


.app-features[b-mgx5u1udit] {
    margin-bottom: 2.5rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.feature-section[b-mgx5u1udit] {
    margin-bottom: 0;
}

.feature-section-title[b-mgx5u1udit] {
    font-size: 1rem;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 0.5rem;
}

.feature-item[b-mgx5u1udit] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.feature-check[b-mgx5u1udit] {
    color: #48bb78;
    font-weight: 700;
    font-size: 1.1rem;
}

/* Download Section */
.download-section[b-mgx5u1udit] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
}

.download-buttons[b-mgx5u1udit] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex: 1;
    align-items: flex-start;
}

.store-badge-btn[b-mgx5u1udit] {
    display: block;
    transition: all 0.3s ease;
    border-radius: 8px;
    overflow: hidden;
}

.store-badge-btn:hover[b-mgx5u1udit] {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.store-badge[b-mgx5u1udit] {
    height: 60px;
    width: auto;
    display: block;
}

/* QR Section */
.qr-section[b-mgx5u1udit] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.qr-code[b-mgx5u1udit] {
    width: 120px;
    height: 120px;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    padding: 8px;
}

.qr-code:hover[b-mgx5u1udit] {
    border-color: var(--accent-fill-rest);
    background: #f0f4ff;
}

.qr-placeholder[b-mgx5u1udit] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.qr-label[b-mgx5u1udit] {
    font-size: 0.75rem;
    color: #718096;
    font-weight: 500;
}

/* Extensions Section */
.extensions-section[b-mgx5u1udit] {
    padding: 6rem 2rem;
    background: #f7fafc;
    width: 100%;
}

.extensions-grid[b-mgx5u1udit] {
    display: grid;
    grid-template-columns: 1fr;
    max-width: 600px;
    margin: 3rem auto 0;
}

.extension-card[b-mgx5u1udit] {
    background: white;
    border-radius: 20px;
    padding: 2.5rem;
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.extension-card[b-mgx5u1udit]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #4285f4, #0f9d58, #f4b400, #ea4335);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.extension-card:hover[b-mgx5u1udit]::before {
    transform: scaleX(1);
}

.extension-card:hover[b-mgx5u1udit] {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    border-color: #4285f4;
}

/* Extension Header */
.extension-header[b-mgx5u1udit] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 2rem;
}

.extension-icon[b-mgx5u1udit] {
    width: 60px;
    height: 60px;
    background-image: url('assets/employee-app-icon.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(66, 133, 244, 0.3);
    flex-shrink: 0;
}

.extension-icon .icon[b-mgx5u1udit] {
    display: none;
}

.extension-info[b-mgx5u1udit] {
    flex: 1;
}

.extension-title[b-mgx5u1udit] {
    font-size: 1.3rem;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 0.5rem;
}

.extension-description[b-mgx5u1udit] {
    color: #4a5568;
    margin-bottom: 0;
    line-height: 1.5;
    font-size: 0.9rem;
}

.extension-features[b-mgx5u1udit] {
    margin-bottom: 2.5rem;
}

/* Browser Buttons */
.extension-download[b-mgx5u1udit] {
    display: flex;
    justify-content: center;
}

.browser-buttons[b-mgx5u1udit] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}

.browser-btn[b-mgx5u1udit] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    background: white;
    color: #1a202c;
    text-decoration: none;
    border-radius: 12px;
    border: 2px solid #e2e8f0;
    transition: all 0.3s ease;
    font-weight: 600;
    min-width: 180px;
}

.browser-btn:hover[b-mgx5u1udit] {
    border-color: var(--accent-fill-rest);
    background: #f0f4ff;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.2);
}

.browser-btn.chrome:hover[b-mgx5u1udit] {
    border-color: #4285f4;
    background: #f0f4ff;
}

.browser-btn.edge:hover[b-mgx5u1udit] {
    border-color: #0078d4;
    background: #f0f8ff;
}

.browser-btn img[b-mgx5u1udit] {
    width: 32px;
    height: 32px;
}

.browser-label[b-mgx5u1udit] {
    display: block;
    font-size: 0.875rem;
    font-weight: 400;
    opacity: 0.8;
}

.browser-platform[b-mgx5u1udit] {
    display: block;
    font-size: 1rem;
    font-weight: 600;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .apps-grid[b-mgx5u1udit] {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .download-section[b-mgx5u1udit] {
        flex-direction: column;
        align-items: stretch;
        gap: 1.5rem;
    }
    
    .download-buttons[b-mgx5u1udit] {
        flex-direction: row;
    }
    
    .qr-section[b-mgx5u1udit] {
        flex-direction: row;
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .applications-content[b-mgx5u1udit] {
        padding: 2rem;
    }
    
    .applications-title[b-mgx5u1udit] {
        font-size: 2.5rem;
    }
    
    .mobile-apps-section[b-mgx5u1udit],
    .extensions-section[b-mgx5u1udit] {
        padding: 4rem 1rem;
    }
    
    .app-card[b-mgx5u1udit],
    .extension-card[b-mgx5u1udit] {
        padding: 2rem;
    }
    
    .app-header[b-mgx5u1udit],
    .extension-header[b-mgx5u1udit] {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 1rem;
    }
    
    .app-icon[b-mgx5u1udit],
    .extension-icon[b-mgx5u1udit] {
        width: 80px;
        height: 80px;
    }
    
    /* Mobile carousel shows 1 image */
    .screenshot[b-mgx5u1udit] {
        width: calc(100% - 0rem);
        height: 400px;
    }
    
    .app-features[b-mgx5u1udit] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .download-buttons[b-mgx5u1udit] {
        flex-direction: column;
        gap: 1rem;
    }
    
    .browser-buttons[b-mgx5u1udit] {
        flex-direction: column;
        width: 100%;
    }
    
    .browser-btn[b-mgx5u1udit] {
        min-width: auto;
        width: 100%;
    }
}

@media (max-width: 480px) {
    .hero-title[b-mgx5u1udit] {
        font-size: 2rem;
    }
    
    .apps-grid[b-mgx5u1udit] {
        grid-template-columns: 1fr;
    }
    
    .app-card[b-mgx5u1udit],
    .extension-card[b-mgx5u1udit] {
        padding: 1.5rem;
    }
    
    .download-section[b-mgx5u1udit] {
        gap: 1rem;
    }
}

/* Contact Section */
.contact-section[b-mgx5u1udit] {
    text-align: center;
    padding: 3rem;
    background: var(--accent-fill-rest);
    border-radius: 16px;
    color: white;
    margin-top: 4rem;
}

.contact-section h2[b-mgx5u1udit] {
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: white;
}

.contact-section p[b-mgx5u1udit] {
    font-size: 1.1rem;
    margin-bottom: 2rem;
    opacity: 0.9;
}

.contact-buttons[b-mgx5u1udit] {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.btn-primary[b-mgx5u1udit] {
    padding: 1rem 2rem;
    background: white;
    color: var(--accent-fill-rest);
    text-decoration: none;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.btn-primary:hover[b-mgx5u1udit] {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 255, 255, 0.3);
}

.btn-secondary[b-mgx5u1udit] {
    padding: 1rem 2rem;
    background: transparent;
    color: white;
    text-decoration: none;
    font-weight: 600;
    border-radius: 8px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.btn-secondary:hover[b-mgx5u1udit] {
    background: rgba(255, 255, 255, 0.1);
    border-color: white;
}
/* /Components/Pages/Landing/BusinessCalculator.razor.rz.scp.css */
/* Business Calculator - Landing ile Uyumlu */

/* Container & Layout */
.calculator-container[b-ejjshlu6nm] {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    line-height: 1.6;
    color: #1a1a1a;
    min-height: 100vh;
    background: #f7fafc;
    width: 100%;
    padding: 0;
    box-sizing: border-box;
}

.calculator-content[b-ejjshlu6nm] {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 2rem 2rem 4rem;
}

/* Header Section */
.calculator-header[b-ejjshlu6nm] {
    text-align: center;
    margin-bottom: 3rem;
}

.calculator-header h1[b-ejjshlu6nm] {
    font-size: 2.5rem;
    font-weight: 800;
    color: #1a202c;
    margin-bottom: 1rem;
    letter-spacing: -0.02em;
}

.calculator-header p[b-ejjshlu6nm] {
    font-size: 1.25rem;
    color: #4a5568;
    margin-bottom: 2rem;
}

/* Progress Indicator */
.progress-indicator[b-ejjshlu6nm] {
    max-width: 600px;
    margin: 0 auto;
}

.progress-bar-container[b-ejjshlu6nm] {
    width: 100%;
    height: 8px;
    background: #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 0.75rem;
}

.progress-bar-fill[b-ejjshlu6nm] {
    height: 100%;
    background: var(--accent-fill-rest);
    border-radius: 8px;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.progress-text[b-ejjshlu6nm] {
    text-align: center;
    font-size: 0.875rem;
    font-weight: 600;
    color: #4a5568;
}

/* Wizard Container */
.wizard-container[b-ejjshlu6nm] {
    background: white;
    border-radius: 16px;
    padding: 2.5rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    border: 1px solid #e2e8f0;
    margin-bottom: 2rem;
}

/* Step Content */
.step-content[b-ejjshlu6nm] {
    min-height: 400px;
    animation: fadeIn-b-ejjshlu6nm 0.5s ease-out;
}

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

.step-header[b-ejjshlu6nm] {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 1.5rem;
    text-align: left;
    margin-bottom: 2rem;
}

.step-header-icon[b-ejjshlu6nm] {
    flex-shrink: 0;
}

.step-header-content[b-ejjshlu6nm] {
    flex: 1;
}

.step-header h2[b-ejjshlu6nm] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1a202c;
    margin: 0 0 0.5rem 0;
}

.step-header p[b-ejjshlu6nm] {
    font-size: 1rem;
    color: #4a5568;
    margin: 0;
}

/* Form Inputs */
.form-inputs[b-ejjshlu6nm] {
    max-width: 700px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Slider Value Display */
.slider-value[b-ejjshlu6nm] {
    text-align: center;
    margin-top: 1rem;
    padding: 0.75rem;
    background: rgba(102, 126, 234, 0.08);
    border-radius: 8px;
    font-size: 1rem;
    color: #1a202c;
}

.input-group[b-ejjshlu6nm] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.input-group label[b-ejjshlu6nm] {
    font-weight: 600;
    color: #2d3748;
    font-size: 1rem;
}

.input-group small[b-ejjshlu6nm] {
    font-size: 0.875rem;
    color: #718096;
    margin-top: 0.25rem;
}

.checkbox-group[b-ejjshlu6nm] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.checkbox-list[b-ejjshlu6nm] {
    max-width: 700px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.radio-group[b-ejjshlu6nm] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.radio-group label[b-ejjshlu6nm] {
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 0.5rem;
}

/* Business Type Cards */
.options-grid[b-ejjshlu6nm] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    max-width: 900px;
    margin: 0 auto;
}

.options-grid.single-row[b-ejjshlu6nm] {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.option-card[b-ejjshlu6nm] {
    padding: 1.5rem;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    background: white;
}

.option-card:hover[b-ejjshlu6nm] {
    border-color: var(--accent-fill-rest);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
    transform: translateY(-2px);
}

.option-card.selected[b-ejjshlu6nm] {
    border-color: var(--accent-fill-rest);
    background: rgba(102, 126, 234, 0.05);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
}

.option-card h3[b-ejjshlu6nm] {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 1rem 0 0.5rem;
    color: #1a202c;
}

.option-card p[b-ejjshlu6nm] {
    font-size: 0.875rem;
    color: #718096;
    margin: 0;
    line-height: 1.5;
}

/* Platform Selection */
.platform-selection[b-ejjshlu6nm] {
    max-width: 800px;
    margin: 0 auto;
}

.platforms-detail[b-ejjshlu6nm] {
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.platform-item[b-ejjshlu6nm] {
    padding: 1.25rem;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #f7fafc;
}

.courier-type-selection[b-ejjshlu6nm] {
    margin-top: 1rem;
    margin-left: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.courier-type-selection label[b-ejjshlu6nm] {
    font-weight: 600;
    font-size: 0.875rem;
    color: #2d3748;
}

.input-group.small[b-ejjshlu6nm] {
    margin-top: 0.75rem;
}

/* Wizard Actions */
.wizard-actions[b-ejjshlu6nm] {
    display: flex;
    gap: 1rem;
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid #e2e8f0;
    justify-content: space-between;
}

.wizard-actions .spacer[b-ejjshlu6nm] {
    flex: 1;
}

/* Results Container */
.results-container[b-ejjshlu6nm] {
    max-width: 1200px;
    margin: 0 auto;
}

/* Parameters Summary */
.parameters-summary[b-ejjshlu6nm] {
    background: white;
    padding: 2rem;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    margin-bottom: 3rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.parameters-summary h3[b-ejjshlu6nm] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 1.5rem;
    text-align: center;
}

.parameters-grid[b-ejjshlu6nm] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}

.param-item[b-ejjshlu6nm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: #f7fafc;
    border-radius: 8px;
    border-left: 3px solid var(--accent-fill-rest);
}

.param-label[b-ejjshlu6nm] {
    font-size: 0.875rem;
    font-weight: 500;
    color: #4a5568;
}

.param-value[b-ejjshlu6nm] {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1a202c;
}

.param-item.editable[b-ejjshlu6nm] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-left: 3px solid var(--accent-fill-rest);
    transition: all 0.2s ease;
}

.param-item.editable:hover[b-ejjshlu6nm] {
    border-color: var(--accent-fill-rest);
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.15);
}

.param-unit[b-ejjshlu6nm] {
    font-size: 0.875rem;
    font-weight: 500;
    color: #4a5568;
    margin-left: 0.5rem;
}

.results-header[b-ejjshlu6nm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3rem;
    gap: 2rem;
}

.results-header-content[b-ejjshlu6nm] {
    flex: 1;
    text-align: left;
}

.results-header h1[b-ejjshlu6nm] {
    font-size: 2.25rem;
    font-weight: 800;
    color: #1a202c;
    margin-bottom: 1rem;
}

.results-header p[b-ejjshlu6nm] {
    font-size: 1.125rem;
    color: #4a5568;
}

/* Comparison Section */
.comparison-section[b-ejjshlu6nm] {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 2rem;
    margin-bottom: 3rem;
    align-items: start;
}

.comparison-card[b-ejjshlu6nm] {
    background: white;
    padding: 2rem;
    border-radius: 16px;
    border: 2px solid #e2e8f0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.comparison-card.before[b-ejjshlu6nm] {
    border-color: #fc8181;
}

.comparison-card.after[b-ejjshlu6nm] {
    border-color: #68d391;
}

.comparison-card .card-header[b-ejjshlu6nm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #e2e8f0;
}

.comparison-card h2[b-ejjshlu6nm] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1a202c;
}

.comparison-arrow[b-ejjshlu6nm] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-fill-rest);
}

.metrics[b-ejjshlu6nm] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.metric-with-explanation[b-ejjshlu6nm] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.metric[b-ejjshlu6nm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background: #f7fafc;
    border-radius: 8px;
}

.metric-label[b-ejjshlu6nm] {
    font-size: 0.875rem;
    color: #4a5568;
    font-weight: 500;
}

.metric-value[b-ejjshlu6nm] {
    font-size: 1.125rem;
    font-weight: 700;
}

.metric-value.cost[b-ejjshlu6nm] {
    color: #e53e3e;
}

.metric-value.savings[b-ejjshlu6nm] {
    color: #38a169;
}

.metric-value.negative[b-ejjshlu6nm] {
    color: #e53e3e;
}

.metric-value.positive[b-ejjshlu6nm] {
    color: #38a169;
}

.metric-explanation[b-ejjshlu6nm] {
    font-size: 0.75rem;
    color: #718096;
    font-style: italic;
    padding-left: 0.75rem;
    line-height: 1.4;
}

/* Savings Highlight */
.savings-highlight[b-ejjshlu6nm] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.savings-card[b-ejjshlu6nm] {
    background: white;
    padding: 2rem;
    border-radius: 16px;
    border: 2px solid var(--accent-fill-rest);
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.15);
    display: flex;
    gap: 1.5rem;
    align-items: center;
}

.savings-card.annual[b-ejjshlu6nm] {
    border-color: #ed8936;
}

.savings-content h3[b-ejjshlu6nm] {
    font-size: 1rem;
    font-weight: 600;
    color: #4a5568;
    margin-bottom: 0.5rem;
}

.savings-amount[b-ejjshlu6nm] {
    font-size: 2.5rem;
    font-weight: 800;
    color: #1a202c;
    margin-bottom: 0.25rem;
}

.savings-percentage[b-ejjshlu6nm],
.savings-note[b-ejjshlu6nm] {
    font-size: 0.875rem;
    color: #718096;
}

/* Feature Recommendations */
.recommendations-section[b-ejjshlu6nm] {
    margin-bottom: 3rem;
}

.section-header[b-ejjshlu6nm] {
    text-align: center;
    margin-bottom: 2.5rem;
}

.section-header h2[b-ejjshlu6nm] {
    font-size: 2rem;
    font-weight: 800;
    color: #1a202c;
    margin-bottom: 0.75rem;
}

.section-header p[b-ejjshlu6nm] {
    font-size: 1.125rem;
    color: #4a5568;
}

.features-grid[b-ejjshlu6nm] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.feature-card[b-ejjshlu6nm] {
    background: white;
    padding: 1.75rem;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    transition: all 0.3s ease;
}

.feature-card:hover[b-ejjshlu6nm] {
    border-color: var(--accent-fill-rest);
    box-shadow: 0 4px 16px rgba(102, 126, 234, 0.15);
    transform: translateY(-2px);
}

.feature-icon[b-ejjshlu6nm] {
    margin-bottom: 1rem;
}

.feature-card h3[b-ejjshlu6nm] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1a202c;
    margin-bottom: 0.75rem;
}

.feature-card p[b-ejjshlu6nm] {
    font-size: 0.875rem;
    color: #4a5568;
    margin-bottom: 1rem;
    line-height: 1.6;
}

.feature-benefit[b-ejjshlu6nm] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: #f0fff4;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #38a169;
    border: 1px solid #c6f6d5;
}

/* Breakdown Table */
.breakdown-section[b-ejjshlu6nm] {
    margin-bottom: 3rem;
}

.breakdown-section .section-header[b-ejjshlu6nm] {
    text-align: center;
    margin-bottom: 2rem;
}

.breakdown-section h3[b-ejjshlu6nm] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 0.5rem;
}

.breakdown-section p[b-ejjshlu6nm] {
    font-size: 1rem;
    color: #718096;
}

.breakdown-table-container[b-ejjshlu6nm] {
    background: white;
    border-radius: 16px;
    padding: 0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    border: 1px solid #e2e8f0;
    overflow: hidden;
}

.breakdown-table[b-ejjshlu6nm] {
    width: 100%;
    border-collapse: collapse;
}

.breakdown-table thead[b-ejjshlu6nm] {
    background: var(--accent-fill-rest);
}

.breakdown-table thead tr[b-ejjshlu6nm] {
    color: white;
}

.breakdown-table th[b-ejjshlu6nm] {
    padding: 1.25rem 1.5rem;
    text-align: left;
    font-weight: 700;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.breakdown-table th.feature-column[b-ejjshlu6nm] {
    width: 40%;
}

.breakdown-table th.cost-column[b-ejjshlu6nm] {
    width: 20%;
    text-align: right;
}

.breakdown-table th.savings-column[b-ejjshlu6nm] {
    width: 20%;
    text-align: right;
}

.breakdown-table tbody tr[b-ejjshlu6nm] {
    border-bottom: 1px solid #e2e8f0;
    transition: background-color 0.2s ease;
}

.breakdown-table tbody tr:hover[b-ejjshlu6nm] {
    background: #f7fafc;
}

.breakdown-table tbody tr:last-child[b-ejjshlu6nm] {
    border-bottom: none;
}

.breakdown-table tbody tr.positive-row[b-ejjshlu6nm] {
    background: rgba(16, 185, 129, 0.03);
}

.breakdown-table tbody tr.negative-row[b-ejjshlu6nm] {
    background: rgba(239, 68, 68, 0.03);
}

.breakdown-table td[b-ejjshlu6nm] {
    padding: 1.25rem 1.5rem;
}

.feature-cell[b-ejjshlu6nm] {
    font-weight: 500;
}

.feature-info[b-ejjshlu6nm] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.feature-info strong[b-ejjshlu6nm] {
    font-size: 0.95rem;
    color: #1a202c;
    font-weight: 600;
}

.feature-info small[b-ejjshlu6nm] {
    font-size: 0.8rem;
    color: #718096;
    font-style: italic;
    line-height: 1.4;
}

.cost-cell[b-ejjshlu6nm],
.savings-cell[b-ejjshlu6nm] {
    text-align: right;
}

.amount[b-ejjshlu6nm] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 1rem;
    font-weight: 600;
}

.amount.current[b-ejjshlu6nm] {
    color: #e53e3e;
}

.amount.new[b-ejjshlu6nm] {
    color: #4a5568;
}

.amount.positive[b-ejjshlu6nm] {
    color: #10B981;
    font-weight: 700;
}

.amount.negative[b-ejjshlu6nm] {
    color: #EF4444;
    font-weight: 700;
}

.amount-zero[b-ejjshlu6nm] {
    color: #cbd5e0;
    font-size: 1.25rem;
}

.breakdown-table tfoot[b-ejjshlu6nm] {
    background: #f7fafc;
    border-top: 3px solid var(--accent-fill-rest);
}

.breakdown-table tfoot tr.total-row td[b-ejjshlu6nm] {
    padding: 1.5rem;
    font-size: 1.1rem;
}

.breakdown-table tfoot .amount.total-savings[b-ejjshlu6nm] {
    color: #10B981;
    font-size: 1.5rem;
    font-weight: 800;
}

/* CTA Section */
.results-cta[b-ejjshlu6nm] {
    background: white;
    padding: 3rem 2rem;
    border-radius: 16px;
    border: 2px solid var(--accent-fill-rest);
    text-align: center;
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.15);
}

.results-cta h2[b-ejjshlu6nm] {
    font-size: 2rem;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 0.75rem;
}

.results-cta p[b-ejjshlu6nm] {
    font-size: 1.125rem;
    color: #4a5568;
    margin-bottom: 2rem;
}

.cta-buttons[b-ejjshlu6nm] {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-primary[b-ejjshlu6nm],
.btn-secondary[b-ejjshlu6nm],
.btn-neutral[b-ejjshlu6nm] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.btn-primary[b-ejjshlu6nm] {
    background: var(--accent-fill-rest);
    color: white;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.btn-primary:hover[b-ejjshlu6nm] {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
}

.btn-secondary[b-ejjshlu6nm] {
    background: white;
    color: var(--accent-fill-rest);
    border: 2px solid var(--accent-fill-rest);
}

.btn-secondary:hover[b-ejjshlu6nm] {
    background: #f7fafc;
    transform: translateY(-2px);
}

.btn-neutral[b-ejjshlu6nm] {
    background: #e2e8f0;
    color: #2d3748;
}

.btn-neutral:hover[b-ejjshlu6nm] {
    background: #cbd5e0;
    transform: translateY(-2px);
}

.btn-accent[b-ejjshlu6nm] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    background: var(--accent-fill-rest);
    color: white;
}

.btn-accent:hover[b-ejjshlu6nm] {
    background: var(--accent-fill-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.35);
}

.btn-accent:disabled[b-ejjshlu6nm] {
    background: #cbd5e0;
    color: #718096;
    cursor: not-allowed;
    transform: none;
}

/* Yes/No Selection */
.yes-no-selection[b-ejjshlu6nm] {
    max-width: 600px;
    margin: 0 auto 2rem;
    padding: 1.5rem;
    background: #f7fafc;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

.selection-label[b-ejjshlu6nm] {
    font-size: 1rem;
    font-weight: 600;
    color: #1a202c;
    margin-bottom: 1rem;
    text-align: center;
}

.yes-no-buttons[b-ejjshlu6nm] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.yn-button[b-ejjshlu6nm] {
    padding: 1.25rem 1.5rem;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    background: white;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: #4a5568;
}

.yn-button:hover[b-ejjshlu6nm] {
    border-color: var(--accent-fill-rest);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
}

.yn-button.selected[b-ejjshlu6nm] {
    border-color: var(--accent-fill-rest);
    background: rgba(102, 126, 234, 0.08);
    color: var(--accent-fill-rest);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
}

/* Features Selection Section */
.features-selection-section[b-ejjshlu6nm] {
    margin-top: 2rem;
}

.features-selection-section h3[b-ejjshlu6nm] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1a202c;
    text-align: center;
    margin-bottom: 0.5rem;
}

.selection-subtitle[b-ejjshlu6nm] {
    text-align: center;
    font-size: 0.95rem;
    color: #4a5568;
    margin-bottom: 1.5rem;
}

/* Feature Cards Grid */
.feature-cards-grid[b-ejjshlu6nm] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    max-width: 900px;
    margin: 0 auto;
}

.feature-select-card[b-ejjshlu6nm] {
    padding: 1.25rem;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    background: white;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    position: relative;
}

.feature-select-card:hover[b-ejjshlu6nm] {
    border-color: var(--accent-fill-rest);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
    transform: translateY(-2px);
}

.feature-select-card.selected[b-ejjshlu6nm] {
    border-color: var(--accent-fill-rest);
    background: rgba(102, 126, 234, 0.05);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
}

.feature-card-icon[b-ejjshlu6nm] {
    flex-shrink: 0;
    color: var(--accent-fill-rest);
    display: flex;
    align-items: center;
    justify-content: center;
}

.feature-select-card.selected .feature-card-icon[b-ejjshlu6nm] {
    color: var(--accent-fill-rest);
}

.feature-card-content[b-ejjshlu6nm] {
    flex: 1;
    min-width: 0;
}

.feature-card-content h4[b-ejjshlu6nm] {
    font-size: 0.95rem;
    font-weight: 600;
    color: #1a202c;
    margin: 0 0 0.35rem 0;
    line-height: 1.3;
}

.feature-card-content p[b-ejjshlu6nm] {
    font-size: 0.8rem;
    color: #718096;
    margin: 0;
    line-height: 1.4;
}

.feature-card-check[b-ejjshlu6nm] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

/* Responsive Design */
@media (max-width: 768px) {
    .calculator-content[b-ejjshlu6nm] {
        padding: 1.5rem 1rem 2rem;
    }

    .calculator-header h1[b-ejjshlu6nm] {
        font-size: 1.875rem;
    }

    .wizard-container[b-ejjshlu6nm] {
        padding: 1.5rem;
    }

    .step-header[b-ejjshlu6nm] {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .step-header h2[b-ejjshlu6nm] {
        font-size: 1.5rem;
    }

    .step-header p[b-ejjshlu6nm] {
        text-align: center;
    }

    .comparison-section[b-ejjshlu6nm] {
        grid-template-columns: 1fr;
    }

    .comparison-arrow[b-ejjshlu6nm] {
        transform: rotate(90deg);
        margin: 1rem 0;
    }

    .breakdown-row[b-ejjshlu6nm] {
        grid-template-columns: 1fr;
        gap: 0.5rem;
        text-align: left;
    }

    .options-grid[b-ejjshlu6nm] {
        grid-template-columns: 1fr;
    }

    .savings-amount[b-ejjshlu6nm] {
        font-size: 2rem;
    }

    .features-grid[b-ejjshlu6nm] {
        grid-template-columns: 1fr;
    }

    .cta-buttons[b-ejjshlu6nm] {
        flex-direction: column;
    }

    .feature-cards-grid[b-ejjshlu6nm] {
        grid-template-columns: 1fr;
    }

    .yes-no-buttons[b-ejjshlu6nm] {
        grid-template-columns: 1fr;
    }

    .benefits-grid[b-ejjshlu6nm] {
        grid-template-columns: 1fr;
    }
}

/* Extra Benefits Section */
.extra-benefits-section[b-ejjshlu6nm] {
    background: #ffffff;
    border-radius: 12px;
    padding: 2rem;
    margin-bottom: 3rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.benefits-list[b-ejjshlu6nm] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1.5rem;
}

.benefit-item[b-ejjshlu6nm] {
    display: flex;
    align-items: flex-start;
    padding: 0.75rem 1rem;
    background: #f8fafc;
    border-radius: 8px;
    border-left: 3px solid #10B981;
    transition: all 0.2s ease;
}

.benefit-item:hover[b-ejjshlu6nm] {
    background: #f1f5f9;
    transform: translateX(4px);
}

.benefit-item span[b-ejjshlu6nm] {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #475569;
}

.benefit-item strong[b-ejjshlu6nm] {
    color: #1e293b;
    font-weight: 600;
}
/* /Components/Pages/Landing/BusinessTypes/BusinessTypes.razor.rz.scp.css */
/* Business Types Page - Landing ile Uyumlu */

/* Container & Layout */
.use-cases-container[b-wl1h5x2sl6] {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    line-height: 1.6;
    color: #1a1a1a;
    min-height: 100vh;
    background: #f7fafc;
    width: 100%;
    padding: 0;
    box-sizing: border-box;
}

.use-cases-content[b-wl1h5x2sl6] {
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    padding: 2rem 2rem 4rem;
}

/* Hero Section */
.hero-section[b-wl1h5x2sl6] {
    text-align: center;
    margin-bottom: 4rem;
    padding: 2rem 0;
}

.hero-title[b-wl1h5x2sl6] {
    font-size: 3rem;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 1rem;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.hero-subtitle[b-wl1h5x2sl6] {
    font-size: 1.25rem;
    color: #4a5568;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Sectors Grid */
.sectors-grid[b-wl1h5x2sl6] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-bottom: 4rem;
}

/* Sector Card */
.sector-card[b-wl1h5x2sl6] {
    background: white;
    border-radius: 20px;
    padding: 2.5rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.sector-card:hover[b-wl1h5x2sl6] {
    transform: translateY(-8px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.15);
    border-color: var(--accent-fill-rest);
}

.sector-card-featured[b-wl1h5x2sl6] {
    border: 2px solid var(--accent-fill-rest);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, white 100%);
}

.sector-badge[b-wl1h5x2sl6] {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    background: var(--accent-fill-rest);
    color: white;
    padding: 0.4rem 1rem;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
}

.sector-image[b-wl1h5x2sl6] {
    margin-bottom: 1.5rem;
    width: 100%;
    height: 200px;
    border-radius: 12px;
    overflow: hidden;
    background: #f7fafc;
}

.sector-image img[b-wl1h5x2sl6] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.sector-icon-placeholder[b-wl1h5x2sl6] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
}

.sector-card:hover .sector-image img[b-wl1h5x2sl6] {
    transform: scale(1.05);
}

.sector-title[b-wl1h5x2sl6] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 1rem;
    letter-spacing: -0.01em;
}

.sector-description[b-wl1h5x2sl6] {
    color: #4a5568;
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 1.5rem;
    flex: 1;
}

.sector-features[b-wl1h5x2sl6] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.feature-tag[b-wl1h5x2sl6] {
    background: #f7fafc;
    border: 1px solid #e2e8f0;
    color: #4a5568;
    padding: 0.35rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.sector-card:hover .feature-tag[b-wl1h5x2sl6] {
    background: rgba(102, 126, 234, 0.1);
    border-color: var(--accent-fill-rest);
    color: var(--accent-fill-rest);
}

.sector-cta[b-wl1h5x2sl6] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    color: var(--accent-fill-rest);
    font-weight: 600;
    font-size: 1.05rem;
    margin-top: auto;
    transition: gap 0.3s ease;
}

.sector-card:hover .sector-cta[b-wl1h5x2sl6] {
    gap: 0.75rem;
}

/* CTA Section */
.cta-section[b-wl1h5x2sl6] {
    text-align: center;
    padding: 4rem 2rem;
    background: var(--accent-fill-rest);
    border-radius: 20px;
    margin-top: 2rem;
}

.cta-content h2[b-wl1h5x2sl6] {
    font-size: 2.25rem;
    font-weight: 700;
    color: white;
    margin-bottom: 1rem;
    letter-spacing: -0.02em;
}

.cta-content p[b-wl1h5x2sl6] {
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 2rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.cta-buttons[b-wl1h5x2sl6] {
    display: flex;
    gap: 1rem;
    justify-content: center;
    align-items: center;
}

.btn-cta-primary[b-wl1h5x2sl6],
.btn-cta-secondary[b-wl1h5x2sl6] {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.05rem;
    border-radius: 12px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.btn-cta-primary[b-wl1h5x2sl6] {
    background: white;
    color: var(--accent-fill-rest);
}

.btn-cta-primary:hover[b-wl1h5x2sl6] {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.btn-cta-secondary[b-wl1h5x2sl6] {
    background: rgba(255, 255, 255, 0.15);
    color: white;
    border: 2px solid white;
}

.btn-cta-secondary:hover[b-wl1h5x2sl6] {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
}

/* Responsive Design */
@media (max-width: 1024px) {
    .hero-title[b-wl1h5x2sl6] {
        font-size: 2.5rem;
    }

    .sectors-grid[b-wl1h5x2sl6] {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
}

@media (max-width: 640px) {
    .sectors-grid[b-wl1h5x2sl6] {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

@media (max-width: 768px) {
    .use-cases-content[b-wl1h5x2sl6] {
        padding: 1.5rem;
    }

    .hero-title[b-wl1h5x2sl6] {
        font-size: 2rem;
    }

    .hero-subtitle[b-wl1h5x2sl6] {
        font-size: 1.05rem;
    }

    .sector-card[b-wl1h5x2sl6] {
        padding: 2rem;
    }

    .sector-title[b-wl1h5x2sl6] {
        font-size: 1.5rem;
    }

    .cta-section[b-wl1h5x2sl6] {
        padding: 3rem 1.5rem;
    }

    .cta-content h2[b-wl1h5x2sl6] {
        font-size: 1.75rem;
    }

    .cta-buttons[b-wl1h5x2sl6] {
        flex-direction: column;
        width: 100%;
    }

    .btn-cta-primary[b-wl1h5x2sl6],
    .btn-cta-secondary[b-wl1h5x2sl6] {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .use-cases-content[b-wl1h5x2sl6] {
        padding: 1rem;
    }

    .hero-section[b-wl1h5x2sl6] {
        margin-bottom: 2.5rem;
    }

    .hero-title[b-wl1h5x2sl6] {
        font-size: 1.75rem;
    }

    .sector-card[b-wl1h5x2sl6] {
        padding: 1.5rem;
    }

    .sector-icon[b-wl1h5x2sl6] {
        width: 80px;
        height: 80px;
    }

    .cta-section[b-wl1h5x2sl6] {
        padding: 2.5rem 1rem;
    }
}
/* /Components/Pages/Landing/BusinessTypes/Cafe.razor.rz.scp.css */
/* /Components/Pages/Landing/BusinessTypes/FastFood.razor.rz.scp.css */
/* /Components/Pages/Landing/BusinessTypes/KuryeSirketleri.razor.rz.scp.css */
/* /Components/Pages/Landing/BusinessTypes/Manav.razor.rz.scp.css */
/* /Components/Pages/Landing/BusinessTypes/Petshop.razor.rz.scp.css */
/* /Components/Pages/Landing/BusinessTypes/Restoran.razor.rz.scp.css */
/*
 * All styles have been moved to reusable components:
 * - UseCaseContainer.razor.css
 * - HeroSection.razor.css
 * - FeaturesSection.razor.css & FeatureCard.razor.css
 * - ProblemsSection.razor.css & ProblemCard.razor.css
 * - SolutionsSection.razor.css & SolutionCard.razor.css
 * - CTASection.razor.css
 */
/* /Components/Pages/Landing/BusinessTypes/SuBayi.razor.rz.scp.css */
/* /Components/Pages/Landing/Components/CTASection.razor.rz.scp.css */
.cta-section[b-ptugdqn37v] {
    text-align: center;
    padding: 2.5rem 2rem;
    background: var(--accent-fill-rest);
    border-radius: 16px;
    margin-top: 2.5rem;
}

.cta-content h2[b-ptugdqn37v] {
    font-size: 2.5rem;
    font-weight: 700;
    color: white;
    margin-bottom: 1rem;
    letter-spacing: -0.02em;
}

.cta-content p[b-ptugdqn37v] {
    font-size: 1.25rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 2rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

.cta-buttons[b-ptugdqn37v] {
    display: flex;
    gap: 1rem;
    justify-content: center;
    align-items: center;
}

.btn-cta-primary[b-ptugdqn37v],
.btn-cta-secondary[b-ptugdqn37v] {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem;
    border-radius: 12px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.btn-cta-primary[b-ptugdqn37v] {
    background: white;
    color: var(--accent-fill-rest);
}

.btn-cta-primary:hover[b-ptugdqn37v] {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.btn-cta-secondary[b-ptugdqn37v] {
    background: rgba(255, 255, 255, 0.15);
    color: white;
    border: 2px solid white;
}

.btn-cta-secondary:hover[b-ptugdqn37v] {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
}

@media (max-width: 768px) {
    .cta-section[b-ptugdqn37v] {
        padding: 2rem 1.5rem;
    }

    .cta-content h2[b-ptugdqn37v] {
        font-size: 1.75rem;
    }

    .cta-content p[b-ptugdqn37v] {
        font-size: 1.1rem;
    }

    .cta-buttons[b-ptugdqn37v] {
        flex-direction: column;
        width: 100%;
    }

    .btn-cta-primary[b-ptugdqn37v],
    .btn-cta-secondary[b-ptugdqn37v] {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .cta-section[b-ptugdqn37v] {
        padding: 1.5rem 1rem;
        margin-top: 2rem;
    }

    .cta-content h2[b-ptugdqn37v] {
        font-size: 1.5rem;
    }

    .cta-content p[b-ptugdqn37v] {
        font-size: 1rem;
        margin-bottom: 1.5rem;
    }

    .btn-cta-primary[b-ptugdqn37v],
    .btn-cta-secondary[b-ptugdqn37v] {
        padding: 0.875rem 1.5rem;
        font-size: 1rem;
    }
}
/* /Components/Pages/Landing/Components/DemoMenuShowcase.razor.rz.scp.css */
/* Demo Menu Showcase Section */
.demo-showcase-section[b-h4difoxqnl] {
    padding: 80px 20px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 16px;
    margin: 60px 0;
}

.demo-showcase-content[b-h4difoxqnl] {
    max-width: 1200px;
    margin: 0 auto;
}

.demo-showcase-header[b-h4difoxqnl] {
    text-align: center;
    margin-bottom: 60px;
}

.demo-showcase-title[b-h4difoxqnl] {
    font-size: 2.5rem;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 16px;
    line-height: 1.2;
}

.demo-showcase-description[b-h4difoxqnl] {
    font-size: 1.125rem;
    color: #6c757d;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Demo Menu Grid */
.demo-menu-grid[b-h4difoxqnl] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 32px;
    margin-bottom: 48px;
}

.demo-menu-card[b-h4difoxqnl] {
    background: white;
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 10px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.demo-menu-card:hover[b-h4difoxqnl] {
    transform: translateY(-8px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15), 0 24px 48px rgba(0, 0, 0, 0.1);
}

.demo-menu-icon[b-h4difoxqnl] {
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
}

/* Icon Background Colors */
.demo-menu-icon.burger-icon[b-h4difoxqnl] {
    background-color: #E63946;
}

.demo-menu-icon.pizza-icon[b-h4difoxqnl] {
    background-color: #FF8C42;
}

.demo-menu-icon.kebab-icon[b-h4difoxqnl] {
    background-color: #964B00;
}

.demo-menu-icon-img[b-h4difoxqnl] {
    width: 73px;
    height: 73px;
    object-fit: contain;
    position: relative;
    z-index: 1;
    border-radius: 12px;
    filter: brightness(0) invert(1);
}

.demo-menu-title[b-h4difoxqnl] {
    font-size: 1.5rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 12px;
}

.demo-menu-desc[b-h4difoxqnl] {
    font-size: 0.95rem;
    color: #6c757d;
    margin-bottom: 24px;
    line-height: 1.5;
}

.btn-demo-menu[b-h4difoxqnl] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
    color: white;
    text-decoration: none;
    border-radius: 12px;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(74, 144, 226, 0.3);
}

.btn-demo-menu:hover[b-h4difoxqnl] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(74, 144, 226, 0.4);
    background: linear-gradient(135deg, #357abd 0%, #2868a8 100%);
}

/* QR Code Section */
.demo-qr-section[b-h4difoxqnl] {
    background: white;
    border-radius: 12px;
    padding: 24px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.demo-qr-text[b-h4difoxqnl] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #495057;
    font-size: 0.95rem;
    flex-wrap: wrap;
}

/* Responsive Design */
@media (max-width: 768px) {
    .demo-showcase-section[b-h4difoxqnl] {
        padding: 60px 16px;
        margin: 40px 0;
    }

    .demo-showcase-title[b-h4difoxqnl] {
        font-size: 2rem;
    }

    .demo-showcase-description[b-h4difoxqnl] {
        font-size: 1rem;
    }

    .demo-menu-grid[b-h4difoxqnl] {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .demo-menu-card[b-h4difoxqnl] {
        padding: 24px;
    }

    .demo-qr-text[b-h4difoxqnl] {
        font-size: 0.875rem;
    }

    .demo-menu-icon[b-h4difoxqnl] {
        width: 85px;
        height: 85px;
    }

    .demo-menu-icon.burger-icon[b-h4difoxqnl] {
        background-color: #E63946;
    }

    .demo-menu-icon.pizza-icon[b-h4difoxqnl] {
        background-color: #FF8C42;
    }

    .demo-menu-icon.kebab-icon[b-h4difoxqnl] {
        background-color: #964B00;
    }

    .demo-menu-icon-img[b-h4difoxqnl] {
        width: 62px;
        height: 62px;
        border-radius: 10px;
        filter: brightness(0) invert(1);
    }
}
/* /Components/Pages/Landing/Components/FeatureCard.razor.rz.scp.css */
.feature-card[b-wx4j7ysgq8] {
    background: #f7fafc;
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
    text-align: center;
}

.feature-card:hover[b-wx4j7ysgq8] {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    border-color: var(--accent-fill-rest);
    z-index: 10;
    position: relative;
}

/* Highlighted variant - featured cards */
.feature-card.highlighted[b-wx4j7ysgq8] {
    border: 2px solid var(--accent-fill-rest);
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.15);
}

.feature-icon[b-wx4j7ysgq8] {
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    margin-left: auto;
    margin-right: auto;
}

.feature-icon[b-wx4j7ysgq8]  svg {
    width: 48px;
    height: 48px;
    color: var(--accent-fill-rest);
}

.feature-card h4[b-wx4j7ysgq8] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1a202c;
    margin-bottom: 1rem;
}

.feature-card p[b-wx4j7ysgq8] {
    color: #4a5568;
    line-height: 1.6;
    font-size: 0.95rem;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .feature-card[b-wx4j7ysgq8] {
        padding: 1.5rem;
    }

    .feature-icon[b-wx4j7ysgq8] {
        width: 50px;
        height: 50px;
        margin-bottom: 1rem;
    }

    .feature-icon[b-wx4j7ysgq8]  svg {
        width: 32px;
        height: 32px;
    }

    .feature-card h4[b-wx4j7ysgq8] {
        font-size: 1.1rem;
        margin-bottom: 0.75rem;
    }

    .feature-card p[b-wx4j7ysgq8] {
        font-size: 0.875rem;
    }
}
/* /Components/Pages/Landing/Components/FeaturesSection.razor.rz.scp.css */
.features-section[b-58sr21otor] {
    padding: 2.5rem 0;
    background: white;
    padding-left: 2rem;
    padding-right: 2rem;
    margin: 0 -2rem;
    position: relative;
    z-index: 1;
}

.features-section.highlighted[b-58sr21otor] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(102, 126, 234, 0.02) 100%);
    padding: 3rem 0;
}

.section-header[b-58sr21otor] {
    text-align: center;
    margin-bottom: 2rem;
}

.section-title[b-58sr21otor] {
    font-size: 2rem;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 0.75rem;
    letter-spacing: -0.02em;
}

.section-description[b-58sr21otor] {
    font-size: 1.125rem;
    color: #4a5568;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
}

.features-grid[b-58sr21otor] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    margin-top: 2rem;
}

@media (max-width: 1024px) {
    .features-grid[b-58sr21otor] {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .section-title[b-58sr21otor] {
        font-size: 1.75rem;
    }

    .features-grid[b-58sr21otor] {
        grid-template-columns: repeat(2, 1fr);
    }

    .features-section[b-58sr21otor] {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        margin: 0 -1.5rem;
    }

    .features-section.highlighted[b-58sr21otor] {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

@media (max-width: 480px) {
    .section-title[b-58sr21otor] {
        font-size: 1.5rem;
    }

    .section-description[b-58sr21otor] {
        font-size: 1rem;
    }

    .features-grid[b-58sr21otor] {
        grid-template-columns: 1fr;
    }

    .features-section[b-58sr21otor] {
        padding: 2rem 1rem;
        margin: 0 -1rem;
    }

    .features-section.highlighted[b-58sr21otor] {
        padding: 2.5rem 1rem;
    }
}
/* /Components/Pages/Landing/Components/HeroSection.razor.rz.scp.css */
.hero-section[b-i5was4purc] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
    margin-bottom: 2.5rem;
    padding: 1rem 0;
}

.hero-text[b-i5was4purc] {
    flex: 1;
}

.hero-title[b-i5was4purc] {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1.5rem;
    color: #1a202c;
    letter-spacing: -0.02em;
}

.hero-description[b-i5was4purc] {
    font-size: 1.25rem;
    color: #4a5568;
    margin-bottom: 2rem;
    line-height: 1.7;
}

.hero-actions[b-i5was4purc] {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
}

.btn-hero-primary[b-i5was4purc] {
    padding: 1rem 2rem;
    background: var(--accent-fill-rest);
    color: white;
    text-decoration: none;
    font-weight: 600;
    border-radius: 12px;
    transition: all 0.3s ease;
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
    font-size: 1.1rem;
}

.btn-hero-primary:hover[b-i5was4purc] {
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(102, 126, 234, 0.4);
}

.btn-hero-secondary[b-i5was4purc] {
    padding: 1rem 2rem;
    background: white;
    color: #4a5568;
    text-decoration: none;
    font-weight: 600;
    border-radius: 12px;
    border: 2px solid #e2e8f0;
    transition: all 0.3s ease;
    font-size: 1.1rem;
}

.btn-hero-secondary:hover[b-i5was4purc] {
    border-color: var(--accent-fill-rest);
    color: var(--accent-fill-rest);
    transform: translateY(-2px);
}

.hero-visual[b-i5was4purc] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-image[b-i5was4purc] {
    width: 100%;
    max-width: 500px;
    height: auto;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.hero-icon[b-i5was4purc] {
    font-size: 10rem;
    text-align: center;
}

/* Screenshot Slides */
.slide-screenshots[b-i5was4purc] {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    min-height: 400px;
    max-height: 500px;
}

.slide-screenshots .screenshot-main[b-i5was4purc],
.slide-screenshots .screenshot-secondary[b-i5was4purc] {
    animation: fadeSlide-b-i5was4purc 12s ease-in-out infinite;
}

.slide-screenshots .screenshot-main[b-i5was4purc] {
    animation-delay: 0s;
}

.slide-screenshots .screenshot-secondary-1[b-i5was4purc] {
    animation-delay: 4s;
}

.slide-screenshots .screenshot-secondary-2[b-i5was4purc] {
    animation-delay: 8s;
}

@keyframes fadeSlide-b-i5was4purc {
    0%, 30% {
        opacity: 1;
        transform: translateX(-50%) scale(1);
        z-index: 10;
    }
    33%, 100% {
        opacity: 0;
        transform: translateX(-50%) scale(0.95);
        z-index: 1;
    }
}

.screenshot-main[b-i5was4purc] {
    position: absolute;
    top: 5%;
    left: 50%;
    transform: translateX(-50%);
    width: 85%;
    max-width: 750px;
    background: transparent;
    border-radius: 16px;
    overflow: hidden;
    z-index: 3;
    opacity: 0;
}

.slide-screenshots .screenshot-main:first-of-type[b-i5was4purc] {
    opacity: 1;
    z-index: 10;
}

.screenshot-main img[b-i5was4purc],
.screenshot-secondary img[b-i5was4purc] {
    width: 100%;
    height: auto;
    max-height: 420px;
    display: block;
    object-fit: contain;
}

.screenshot-secondary[b-i5was4purc] {
    position: absolute;
    top: 5%;
    left: 50%;
    transform: translateX(-50%);
    width: 85%;
    max-width: 750px;
    background: transparent;
    border-radius: 12px;
    overflow: hidden;
    opacity: 0;
    z-index: 1;
}

@media (max-width: 1024px) {
    .hero-section[b-i5was4purc] {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .slide-screenshots[b-i5was4purc] {
        min-height: 300px;
    }

    .screenshot-main[b-i5was4purc],
    .screenshot-secondary[b-i5was4purc] {
        width: 90%;
    }
}

@media (max-width: 768px) {
    .hero-section[b-i5was4purc] {
        padding: 1.5rem;
        margin-bottom: 2rem;
    }

    .hero-title[b-i5was4purc] {
        font-size: 2rem;
    }

    .hero-description[b-i5was4purc] {
        font-size: 1rem;
        line-height: 1.6;
    }

    .hero-actions[b-i5was4purc] {
        flex-direction: column;
        gap: 0.75rem;
    }

    .btn-hero-primary[b-i5was4purc],
    .btn-hero-secondary[b-i5was4purc] {
        width: 100%;
        text-align: center;
        justify-content: center;
        padding: 0.875rem 1.5rem;
        font-size: 1rem;
    }

    .slide-screenshots[b-i5was4purc] {
        min-height: 250px;
        max-height: 280px;
    }

    .screenshot-main img[b-i5was4purc],
    .screenshot-secondary img[b-i5was4purc] {
        max-height: 240px;
    }
}

@media (max-width: 480px) {
    .hero-section[b-i5was4purc] {
        padding: 1rem;
        margin-bottom: 1.5rem;
    }

    .hero-title[b-i5was4purc] {
        font-size: 1.75rem;
        line-height: 1.3;
    }

    .hero-description[b-i5was4purc] {
        font-size: 0.9375rem;
        line-height: 1.5;
        margin-bottom: 1.5rem;
    }

    .hero-actions[b-i5was4purc] {
        margin-top: 1.5rem;
    }

    .btn-hero-primary[b-i5was4purc],
    .btn-hero-secondary[b-i5was4purc] {
        padding: 0.75rem 1.25rem;
        font-size: 0.9375rem;
    }

    .slide-screenshots[b-i5was4purc] {
        min-height: 200px;
        max-height: 260px;
        padding: 0.5rem;
    }

    .screenshot-main[b-i5was4purc],
    .screenshot-secondary[b-i5was4purc] {
        width: 95%;
    }

    .screenshot-main img[b-i5was4purc],
    .screenshot-secondary img[b-i5was4purc] {
        max-height: 240px;
    }
}
/* /Components/Pages/Landing/Components/ProblemCard.razor.rz.scp.css */
.problem-card[b-leu5mxv2bu] {
    background: #f7fafc;
    border-radius: 12px;
    padding: 1.25rem;
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
}

.problem-card:hover[b-leu5mxv2bu] {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    border-color: #e53e3e;
    z-index: 10;
    position: relative;
}

.problem-icon[b-leu5mxv2bu] {
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
}

.problem-card h3[b-leu5mxv2bu] {
    font-size: 1.125rem;
    font-weight: 600;
    color: #1a202c;
    margin-bottom: 0.75rem;
}

.problem-card p[b-leu5mxv2bu] {
    color: #4a5568;
    line-height: 1.6;
    font-size: 0.875rem;
}
/* /Components/Pages/Landing/Components/ProblemsSection.razor.rz.scp.css */
.problems-section[b-g35amjkt33] {
    padding: 2.5rem 0;
    background: white;
    margin: 0 -2rem;
    padding-left: 2rem;
    padding-right: 2rem;
    position: relative;
    z-index: 3;
}

.section-header[b-g35amjkt33] {
    text-align: center;
    margin-bottom: 2rem;
}

.section-title[b-g35amjkt33] {
    font-size: 2rem;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 0.75rem;
    letter-spacing: -0.02em;
}

.section-description[b-g35amjkt33] {
    font-size: 1.125rem;
    color: #4a5568;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
}

.problems-grid[b-g35amjkt33] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    margin-top: 2rem;
}

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

@media (max-width: 768px) {
    .section-title[b-g35amjkt33] {
        font-size: 1.75rem;
    }

    .section-description[b-g35amjkt33] {
        font-size: 1rem;
    }

    .problems-grid[b-g35amjkt33] {
        grid-template-columns: 1fr;
    }

    .problems-section[b-g35amjkt33] {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        margin: 0 -1.5rem;
    }
}

@media (max-width: 480px) {
    .section-title[b-g35amjkt33] {
        font-size: 1.5rem;
    }

    .problems-section[b-g35amjkt33] {
        padding: 2rem 1rem;
        margin: 0 -1rem;
    }
}
/* /Components/Pages/Landing/Components/SolutionCard.razor.rz.scp.css */
.solution-card[b-v90u80mf3f] {
    background: white;
    border-radius: 12px;
    padding: 2rem;
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
    position: relative;
    min-height: 200px;
    flex: 1 1 0;
    min-width: 0;
}

.solution-card:hover[b-v90u80mf3f] {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
    border-color: var(--accent-fill-rest);
    z-index: 10;
    position: relative;
}

.solution-number[b-v90u80mf3f] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 32px;
    height: 32px;
    background: var(--accent-fill-rest);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
}

.solution-icon[b-v90u80mf3f] {
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
}

.solution-card h3[b-v90u80mf3f] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1a202c;
    margin-bottom: 1rem;
    margin-top: 0.5rem;
}

.solution-card p[b-v90u80mf3f] {
    color: #4a5568;
    line-height: 1.7;
    margin-bottom: 1rem;
    font-size: 0.95rem;
}

.solution-features[b-v90u80mf3f] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.solution-features li[b-v90u80mf3f] {
    color: #4a5568;
    margin-bottom: 0.5rem;
    padding-left: 1.25rem;
    position: relative;
    line-height: 1.5;
    font-size: 0.8rem;
}

.solution-features li[b-v90u80mf3f]::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--accent-fill-rest);
    font-weight: 700;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .solution-card[b-v90u80mf3f] {
        padding: 1.5rem;
        min-height: auto;
    }

    .solution-number[b-v90u80mf3f] {
        width: 28px;
        height: 28px;
        font-size: 0.875rem;
    }

    .solution-icon[b-v90u80mf3f] {
        width: 50px;
        height: 50px;
        margin-bottom: 1rem;
    }

    .solution-card h3[b-v90u80mf3f] {
        font-size: 1.1rem;
        margin-bottom: 0.75rem;
    }

    .solution-card p[b-v90u80mf3f] {
        font-size: 0.875rem;
    }

    .solution-features li[b-v90u80mf3f] {
        font-size: 0.75rem;
    }
}

@media (max-width: 480px) {
    .solution-card[b-v90u80mf3f] {
        padding: 1.25rem;
    }

    .solution-number[b-v90u80mf3f] {
        width: 24px;
        height: 24px;
        font-size: 0.75rem;
        top: 0.75rem;
        right: 0.75rem;
    }
}
/* /Components/Pages/Landing/Components/SolutionsSection.razor.rz.scp.css */
.solutions-section[b-swebchfrvr] {
    padding: 3rem 0;
    background: #f7fafc;
    margin: 0;
    position: relative;
    z-index: 2;
}

.section-header[b-swebchfrvr] {
    text-align: center;
    margin-bottom: 2rem;
}

.section-title[b-swebchfrvr] {
    font-size: 2rem;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 0.75rem;
    letter-spacing: -0.02em;
}

.section-description[b-swebchfrvr] {
    font-size: 1.125rem;
    color: #4a5568;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
}

.solutions-grid[b-swebchfrvr] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 2rem;
}

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

@media (max-width: 768px) {
    .section-title[b-swebchfrvr] {
        font-size: 1.75rem;
    }

    .solutions-grid[b-swebchfrvr] {
        grid-template-columns: 1fr;
    }

    .solutions-section[b-swebchfrvr] {
        padding: 2rem 1rem;
    }
}

@media (max-width: 480px) {
    .section-title[b-swebchfrvr] {
        font-size: 1.5rem;
    }

    .section-description[b-swebchfrvr] {
        font-size: 1rem;
    }
}
/* /Components/Pages/Landing/Components/UseCaseContainer.razor.rz.scp.css */
.use-case-container[b-prrft9rlfz] {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    line-height: 1.6;
    color: #1a1a1a;
    min-height: 100vh;
    background: #f7fafc;
    width: 100%;
    padding: 0;
    box-sizing: border-box;
    overflow-x: hidden;
}

.use-case-content[b-prrft9rlfz] {
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    padding: 2rem 2rem 2rem;
}

@media (max-width: 768px) {
    .use-case-content[b-prrft9rlfz] {
        padding: 1.5rem 1rem 2.5rem;
    }
}

@media (max-width: 480px) {
    .use-case-content[b-prrft9rlfz] {
        padding: 1rem 0.75rem 2rem;
    }
}
/* /Components/Pages/Landing/Contact.razor.rz.scp.css */
/* Contact Page - Landing ile Uyumlu */

/* Container & Layout */
.contact-container[b-oij2n75vba] {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    line-height: 1.6;
    color: #1a1a1a;
    min-height: 100vh;
    background: #f7fafc;
    width: 100%;
    padding: 0;
    box-sizing: border-box;
}

.contact-content[b-oij2n75vba] {
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    padding: 2rem;
}

/* Body Section */
.contact-body[b-oij2n75vba] {
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 2rem;
}

/* Contact Grid */
.contact-grid[b-oij2n75vba] {
    display: grid;
    grid-template-columns: 0.8fr 2fr;
    gap: 2.5rem;
}

/* Contact Info Section */
.contact-info-section[b-oij2n75vba] {
    background: white;
    border-radius: 20px;
    padding: 2rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    border: 1px solid #e2e8f0;
    height: fit-content;
    transition: all 0.3s ease;
}

.contact-info-section:hover[b-oij2n75vba] {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}

.contact-info-section h2[b-oij2n75vba] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 1.5rem;
}

.info-cards[b-oij2n75vba] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.info-card[b-oij2n75vba] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem;
    background: #f7fafc;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
}

.info-card:hover[b-oij2n75vba] {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    border-color: var(--accent-fill-rest);
}

.info-content h3[b-oij2n75vba] {
    font-size: 1rem;
    font-weight: 600;
    color: #1a202c;
    margin: 0 0 0.35rem 0;
}

.info-content p[b-oij2n75vba] {
    color: #4a5568;
    margin: 0;
    line-height: 1.6;
    font-size: 0.95rem;
}

.info-content a[b-oij2n75vba] {
    color: var(--accent-fill-rest);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.info-content a:hover[b-oij2n75vba] {
    text-decoration: underline;
}

/* Contact Form Section */
.contact-form-section[b-oij2n75vba] {
    background: white;
    border-radius: 20px;
    padding: 2rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
}

.contact-form-section:hover[b-oij2n75vba] {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}

.contact-form-section h2[b-oij2n75vba] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 0.5rem;
}

.contact-form-section p[b-oij2n75vba] {
    color: #4a5568;
    margin-bottom: 1.5rem;
    line-height: 1.6;
    font-size: 0.95rem;
}

/* Alert Messages */
.alert[b-oij2n75vba] {
    padding: 1rem 1.25rem;
    border-radius: 12px;
    margin-bottom: 1.25rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.95rem;
}

.alert-success[b-oij2n75vba] {
    background: #f0fff4;
    border: 1px solid #9ae6b4;
    color: #22543d;
}

.alert-error[b-oij2n75vba] {
    background: #fff5f5;
    border: 1px solid #fc8181;
    color: #742a2a;
}

/* Contact Form */
.contact-form[b-oij2n75vba] {
    display: block;
}

/* Validation */
.contact-form[b-oij2n75vba]  .validation-message {
    color: #e53e3e;
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

.contact-form[b-oij2n75vba]  fluent-validation-summary {
    margin-bottom: 1rem;
}

/* FluentUI Overrides */
.contact-form fluent-text-field[b-oij2n75vba],
.contact-form fluent-select[b-oij2n75vba],
.contact-form fluent-text-area[b-oij2n75vba] {
    width: 100%;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .contact-grid[b-oij2n75vba] {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

@media (max-width: 768px) {
    .contact-content[b-oij2n75vba] {
        padding: 1.5rem;
    }

    .contact-grid[b-oij2n75vba] {
        gap: 1.5rem;
    }

    .contact-info-section[b-oij2n75vba],
    .contact-form-section[b-oij2n75vba] {
        padding: 1.75rem;
    }
}

@media (max-width: 480px) {
    .contact-content[b-oij2n75vba] {
        padding: 1rem;
    }

    .contact-info-section[b-oij2n75vba],
    .contact-form-section[b-oij2n75vba] {
        padding: 1.5rem;
    }

    .info-card[b-oij2n75vba] {
        padding: 1rem;
    }

    .info-content h3[b-oij2n75vba] {
        font-size: 0.95rem;
    }

    .contact-form-section h2[b-oij2n75vba] {
        font-size: 1.5rem;
    }
}
/* /Components/Pages/Landing/Cookies.razor.rz.scp.css */
/* Cookie Policy Page Styles */
.legal-container[b-598y2o2u3h] {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    line-height: 1.6;
    color: #1a1a1a;
    min-height: 100vh;
    background: #f8fafc;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 2rem 1rem;
    box-sizing: border-box;
}

.legal-content[b-598y2o2u3h] {
    max-width: 1000px;
    width: 100%;
    margin: 0 auto;
    padding: 3rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    position: relative;
}

/* Header Styles */
.legal-header[b-598y2o2u3h] {
    border-bottom: 2px solid #e2e8f0;
    padding-bottom: 2rem;
    margin-bottom: 3rem;
}

.back-link[b-598y2o2u3h] {
    display: inline-flex;
    align-items: center;
    color: var(--accent-fill-rest);
    text-decoration: none;
    font-weight: 500;
    margin-bottom: 1rem;
    transition: color 0.3s ease;
}

.back-link:hover[b-598y2o2u3h] {
    color: #5a67d8;
}

.legal-title[b-598y2o2u3h] {
    font-size: 2.5rem;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 0.5rem;
    line-height: 1.2;
}

.legal-date[b-598y2o2u3h] {
    color: #718096;
    font-size: 0.875rem;
    font-style: italic;
}

/* Body Content */
.legal-body[b-598y2o2u3h] {
    line-height: 1.7;
}

.legal-section[b-598y2o2u3h] {
    margin-bottom: 3rem;
}

.legal-section h2[b-598y2o2u3h] {
    font-size: 1.5rem;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e2e8f0;
}

.legal-section h3[b-598y2o2u3h] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #4a5568;
    margin-bottom: 0.75rem;
    margin-top: 1.5rem;
}

.legal-section p[b-598y2o2u3h] {
    margin-bottom: 1rem;
    color: #4a5568;
}

.legal-section ul[b-598y2o2u3h] {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}

.legal-section ol[b-598y2o2u3h] {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}

.legal-section li[b-598y2o2u3h] {
    margin-bottom: 0.5rem;
    color: #4a5568;
}

.legal-section li strong[b-598y2o2u3h] {
    color: #2d3748;
}

/* Cookie Types Styles */
.cookie-types[b-598y2o2u3h] {
    display: grid;
    gap: 1.5rem;
    margin: 1.5rem 0;
}

.cookie-type[b-598y2o2u3h] {
    background: #f7fafc;
    border-radius: 8px;
    padding: 1.5rem;
    border-left: 4px solid var(--accent-fill-rest);
}

.cookie-type h3[b-598y2o2u3h] {
    margin-top: 0;
    color: #2d3748;
}

.cookie-type p[b-598y2o2u3h] {
    margin-bottom: 1rem;
}

.cookie-type ul[b-598y2o2u3h] {
    margin-bottom: 0;
}

/* Cookie Table Styles */
.cookie-table[b-598y2o2u3h] {
    margin: 1.5rem 0;
    overflow-x: auto;
}

.cookie-table table[b-598y2o2u3h] {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.cookie-table th[b-598y2o2u3h] {
    background: var(--accent-fill-rest);
    color: white;
    padding: 1rem;
    text-align: left;
    font-weight: 600;
}

.cookie-table td[b-598y2o2u3h] {
    padding: 1rem;
    border-bottom: 1px solid #e2e8f0;
    color: #4a5568;
}

.cookie-table tr:last-child td[b-598y2o2u3h] {
    border-bottom: none;
}

.cookie-table tr:nth-child(even)[b-598y2o2u3h] {
    background: #f7fafc;
}

/* Third Party Services Styles */
.third-party-services[b-598y2o2u3h] {
    display: grid;
    gap: 1rem;
    margin: 1.5rem 0;
}

.service[b-598y2o2u3h] {
    background: #f7fafc;
    border-radius: 8px;
    padding: 1.5rem;
    border-left: 4px solid var(--accent-fill-rest);
}

.service h3[b-598y2o2u3h] {
    margin-top: 0;
    margin-bottom: 0.5rem;
    color: #2d3748;
}

.service p[b-598y2o2u3h] {
    margin-bottom: 0.75rem;
}

.service a[b-598y2o2u3h] {
    color: var(--accent-fill-rest);
    text-decoration: none;
    font-weight: 500;
}

.service a:hover[b-598y2o2u3h] {
    text-decoration: underline;
}

/* Cookie Management Styles */
.cookie-management[b-598y2o2u3h] {
    background: #f7fafc;
    border-radius: 8px;
    padding: 1.5rem;
    margin: 1.5rem 0;
}

.cookie-management h3[b-598y2o2u3h] {
    color: var(--accent-fill-rest);
    margin-top: 1rem;
    margin-bottom: 0.75rem;
}

.cookie-management h3:first-child[b-598y2o2u3h] {
    margin-top: 0;
}

.cookie-management ul[b-598y2o2u3h] {
    margin-bottom: 1rem;
}

.cookie-management a[b-598y2o2u3h] {
    color: var(--accent-fill-rest);
    text-decoration: none;
    font-weight: 500;
}

.cookie-management a:hover[b-598y2o2u3h] {
    text-decoration: underline;
}

/* Warning Note Styles */
.warning-note[b-598y2o2u3h] {
    background: #fff5f5;
    border: 1px solid #fed7d7;
    border-radius: 8px;
    padding: 1rem;
    margin: 1rem 0;
}

.warning-note p[b-598y2o2u3h] {
    margin-bottom: 0;
    color: #c53030;
}

/* Links */
a[b-598y2o2u3h] {
    color: var(--accent-fill-rest);
    text-decoration: none;
}

a:hover[b-598y2o2u3h] {
    text-decoration: underline;
}

/* Responsive Design */
@media (max-width: 768px) {
    .legal-container[b-598y2o2u3h] {
        padding: 1rem 0.5rem;
    }

    .legal-content[b-598y2o2u3h] {
        padding: 2rem;
        border-radius: 8px;
        max-width: 100%;
    }

    .legal-title[b-598y2o2u3h] {
        font-size: 2rem;
    }

    .legal-section h2[b-598y2o2u3h] {
        font-size: 1.25rem;
    }

    .cookie-table[b-598y2o2u3h] {
        font-size: 0.875rem;
    }

    .cookie-table th[b-598y2o2u3h],
    .cookie-table td[b-598y2o2u3h] {
        padding: 0.75rem;
    }

    .cookie-types[b-598y2o2u3h] {
        gap: 1rem;
    }

    .third-party-services[b-598y2o2u3h] {
        gap: 0.75rem;
    }
}

@media (max-width: 480px) {
    .legal-container[b-598y2o2u3h] {
        padding: 0.5rem 0.25rem;
    }

    .legal-content[b-598y2o2u3h] {
        padding: 1.5rem;
        border-radius: 6px;
    }

    .legal-title[b-598y2o2u3h] {
        font-size: 1.75rem;
    }

    .legal-section h2[b-598y2o2u3h] {
        font-size: 1.125rem;
    }

    .cookie-table[b-598y2o2u3h] {
        font-size: 0.8rem;
    }

    .cookie-table th[b-598y2o2u3h],
    .cookie-table td[b-598y2o2u3h] {
        padding: 0.5rem;
    }
} 
/* /Components/Pages/Landing/CourierRegistration.razor.rz.scp.css */
.registration-container[b-61vsjo7heh] {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    line-height: 1.6;
    color: #1a1a1a;
    min-height: 100vh;
    background: #f8fafc;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 2rem 1rem;
    box-sizing: border-box;
}

.registration-content[b-61vsjo7heh] {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 3rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    position: relative;
}

.registration-header[b-61vsjo7heh] {
    text-align: center;
    margin-bottom: 4rem;
    padding-bottom: 2rem;
    border-bottom: 2px solid #e2e8f0;
}

.back-link[b-61vsjo7heh] {
    display: inline-flex;
    align-items: center;
    color: var(--accent-fill-rest);
    text-decoration: none;
    font-weight: 500;
    margin-bottom: 2rem;
    transition: color 0.3s ease;
}

.back-link:hover[b-61vsjo7heh] {
    color: #5a67d8;
}

.registration-title[b-61vsjo7heh] {
    font-size: 3rem;
    font-weight: 800;
    color: #1a1a1a;
    margin-bottom: 1rem;
    letter-spacing: -0.02em;
}

.registration-subtitle[b-61vsjo7heh] {
    font-size: 1.25rem;
    color: #4a5568;
    margin-bottom: 0;
}

/* Benefits Section */
.benefits-section[b-61vsjo7heh] {
    margin: 2.5rem 0;
}

.benefits-grid[b-61vsjo7heh] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.benefit-item[b-61vsjo7heh] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.875rem;
    padding: 1rem;
    background: white;
    border-radius: 12px;
    transition: all 0.3s ease;
    border: 1px solid #e2e8f0;
}

.benefit-item:hover[b-61vsjo7heh] {
    transform: translateY(-4px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    border-color: var(--accent-fill-rest);
}

.benefit-icon[b-61vsjo7heh] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(102, 126, 234, 0.1);
    border-radius: 10px;
}

.benefit-content[b-61vsjo7heh] {
    flex: 1;
    min-width: 0;
}

.benefit-content h3[b-61vsjo7heh] {
    font-size: 0.95rem;
    font-weight: 600;
    color: #1a202c;
    margin: 0 0 0.35rem 0;
}

.benefit-content p[b-61vsjo7heh] {
    font-size: 0.8rem;
    color: #4a5568;
    margin: 0;
    line-height: 1.4;
}

/* License Options */
.license-options[b-61vsjo7heh] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    margin-top: 0.75rem;
}

.license-option[b-61vsjo7heh] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    min-width: fit-content;
}

.license-option:hover[b-61vsjo7heh] {
    background: #f3f4f6;
    border-color: var(--accent-fill-rest);
}

.license-option input[type="checkbox"][b-61vsjo7heh] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    margin: 0;
}

.license-option span[b-61vsjo7heh] {
    font-size: 0.875rem;
    color: #4b5563;
    white-space: nowrap;
    line-height: 1;
}

/* Radio Group */
.radio-group[b-61vsjo7heh] {
    display: flex;
    gap: 1rem;
    margin-top: 0.75rem;
}

.radio-option[b-61vsjo7heh] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.radio-option:hover[b-61vsjo7heh] {
    background: #f3f4f6;
    border-color: var(--accent-fill-rest);
}

.radio-option input[type="radio"][b-61vsjo7heh] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.radio-option span[b-61vsjo7heh] {
    font-size: 0.95rem;
    color: #4b5563;
}

.registration-body[b-61vsjo7heh] {
    padding-top: 2rem;
}

.registration-form[b-61vsjo7heh] {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.form-sections-row[b-61vsjo7heh] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    padding: 2rem 0;
    border-bottom: 1px solid #e5e7eb;
}

.form-sections-row:first-of-type[b-61vsjo7heh] {
    padding-top: 0;
}

.form-sections-row:last-of-type[b-61vsjo7heh] {
    border-bottom: none;
    padding-bottom: 0;
}

.form-section[b-61vsjo7heh] {
    /* Sections are now inside rows */
}

.section-title[b-61vsjo7heh] {
    color: #1a1a1a;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    padding-bottom: 0;
    border-bottom: none;
}

.form-row[b-61vsjo7heh] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.form-row:last-child[b-61vsjo7heh] {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .form-row[b-61vsjo7heh] {
        grid-template-columns: 1fr;
    }
}

.form-group[b-61vsjo7heh] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.form-group:last-child[b-61vsjo7heh] {
    margin-bottom: 0;
}

.form-group label[b-61vsjo7heh] {
    color: #4b5563;
    font-weight: 500;
    font-size: 0.95rem;
}

.form-control[b-61vsjo7heh] {
    padding: 0.75rem 1rem;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 1rem;
    transition: all 0.2s;
    background: white;
}

.form-control:focus[b-61vsjo7heh] {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.form-control[b-61vsjo7heh]::placeholder {
    color: #9ca3af;
}

select.form-control[b-61vsjo7heh] {
    cursor: pointer;
}

textarea.form-control[b-61vsjo7heh] {
    resize: vertical;
    min-height: 100px;
}

.checkbox-label[b-61vsjo7heh] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    user-select: none;
}

.checkbox-label input[type="checkbox"][b-61vsjo7heh],
.checkbox-label input[type="radio"][b-61vsjo7heh] {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.checkbox-label span[b-61vsjo7heh] {
    color: #4b5563;
    line-height: 1.4;
}

.terms-box[b-61vsjo7heh] {
    background: #f9fafb;
    border-radius: 12px;
    padding: 1.5rem;
}

.terms-box p[b-61vsjo7heh] {
    color: #4b5563;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.terms-link[b-61vsjo7heh] {
    color: #667eea;
    text-decoration: underline;
    font-weight: 500;
}

.terms-link:hover[b-61vsjo7heh] {
    color: #764ba2;
}

.submit-btn[b-61vsjo7heh] {
    background: var(--accent-fill-rest);
    color: white;
    padding: 1rem 3rem;
    font-size: 1.1rem;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    align-self: center;
    min-width: 250px;
    margin-top: 2rem;
}

.submit-btn:hover:not(:disabled)[b-61vsjo7heh] {
    background: #5a67d8;
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(90, 103, 216, 0.2);
}

.submit-btn:disabled[b-61vsjo7heh] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Validation Messages */
.validation-message[b-61vsjo7heh] {
    color: #dc2626 !important;
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

.input-validation-error[b-61vsjo7heh] {
    border-color: #dc2626 !important;
}

/* Loading Animation */
@keyframes pulse-b-61vsjo7heh {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.submit-btn:disabled span[b-61vsjo7heh] {
    animation: pulse-b-61vsjo7heh 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* WhatsApp Contact */
.whatsapp-contact[b-61vsjo7heh] {
    margin-top: 1.5rem;
    padding: 1rem 1.5rem;
    background: #f0fdf4;
    border: 1px solid #86efac;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.whatsapp-contact span[b-61vsjo7heh] {
    color: #166534;
    font-weight: 500;
}

.whatsapp-contact a[b-61vsjo7heh] {
    color: #15803d;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s;
}

.whatsapp-contact a:hover[b-61vsjo7heh] {
    color: #14532d;
    text-decoration: underline;
}

/* Responsive Design */
@media (max-width: 768px) {
    .registration-container[b-61vsjo7heh] {
        padding: 1rem;
    }

    .registration-content[b-61vsjo7heh] {
        padding: 2rem;
    }

    .registration-body[b-61vsjo7heh] {
        padding: 1.5rem 0;
    }

    .registration-title[b-61vsjo7heh] {
        font-size: 2rem;
    }

    .registration-subtitle[b-61vsjo7heh] {
        font-size: 1.1rem;
    }

    .benefits-section[b-61vsjo7heh] {
        margin: 2rem 0;
    }

    .benefits-grid[b-61vsjo7heh] {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    .license-options[b-61vsjo7heh] {
        flex-wrap: wrap;
    }

    .license-option[b-61vsjo7heh] {
        flex: 0 0 calc(50% - 0.3125rem);
    }

    .radio-group[b-61vsjo7heh] {
        flex-direction: column;
        gap: 0.75rem;
    }

    .radio-option[b-61vsjo7heh] {
        width: 100%;
    }

    .benefit-item[b-61vsjo7heh] {
        padding: 0.875rem;
    }

    .benefit-icon[b-61vsjo7heh] {
        width: 40px;
        height: 40px;
    }

    /* Form sections stack vertically on mobile */
    .form-sections-row[b-61vsjo7heh] {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .section-title[b-61vsjo7heh] {
        font-size: 1.25rem;
    }

    .submit-btn[b-61vsjo7heh] {
        width: 100%;
        min-width: auto;
    }

    .form-row[b-61vsjo7heh] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

@media (max-width: 480px) {
    .registration-content[b-61vsjo7heh] {
        padding: 1.5rem;
    }

    .registration-title[b-61vsjo7heh] {
        font-size: 1.75rem;
    }

    .registration-subtitle[b-61vsjo7heh] {
        font-size: 1rem;
    }

    .benefits-grid[b-61vsjo7heh] {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .benefit-item[b-61vsjo7heh] {
        padding: 0.75rem;
    }

    .benefit-icon[b-61vsjo7heh] {
        width: 36px;
        height: 36px;
    }

    .benefit-content h3[b-61vsjo7heh] {
        font-size: 0.95rem;
    }

    .benefit-content p[b-61vsjo7heh] {
        font-size: 0.75rem;
    }

    .license-option[b-61vsjo7heh] {
        flex: 0 0 100%;
    }
}
/* /Components/Pages/Landing/HelpCenter.razor.rz.scp.css */
/* Help Center Page Styles */
.help-container[b-1vskqdseif] {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    line-height: 1.6;
    color: #1a1a1a;
    min-height: 100vh;
    background: #f8fafc;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 2rem 1rem;
    box-sizing: border-box;
}

.help-content[b-1vskqdseif] {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 3rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    position: relative;
}

/* Header Styles */
.help-header[b-1vskqdseif] {
    text-align: center;
    margin-bottom: 4rem;
    padding-bottom: 2rem;
    border-bottom: 2px solid #e2e8f0;
}

.back-link[b-1vskqdseif] {
    display: inline-flex;
    align-items: center;
    color: var(--accent-fill-rest);
    text-decoration: none;
    font-weight: 500;
    margin-bottom: 2rem;
    transition: color 0.3s ease;
}

.back-link:hover[b-1vskqdseif] {
    color: #5a67d8;
}

.help-title[b-1vskqdseif] {
    font-size: 3rem;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.help-subtitle[b-1vskqdseif] {
    font-size: 1.25rem;
    color: #4a5568;
    margin-bottom: 2rem;
}

/* Search Box */
.search-box[b-1vskqdseif] {
    display: flex;
    max-width: 500px;
    margin: 0 auto;
    position: relative;
}

.search-input[b-1vskqdseif] {
    flex: 1;
    padding: 1rem 1.5rem;
    border: 2px solid #e2e8f0;
    border-radius: 12px 0 0 12px;
    font-size: 1rem;
    outline: none;
    transition: border-color 0.3s ease;
}

.search-input:focus[b-1vskqdseif] {
    border-color: var(--accent-fill-rest);
}

.search-btn[b-1vskqdseif] {
    padding: 1rem 1.5rem;
    background: var(--accent-fill-rest);
    color: white;
    border: none;
    border-radius: 0 12px 12px 0;
    cursor: pointer;
    transition: background 0.3s ease;
    font-size: 1rem;
}

.search-btn:hover[b-1vskqdseif] {
    background: #5a67d8;
}

/* Section Styles */
section[b-1vskqdseif] {
    margin-bottom: 4rem;
}

section h2[b-1vskqdseif] {
    font-size: 2rem;
    font-weight: 600;
    color: #2d3748;
    text-align: center;
    margin-bottom: 2rem;
}

/* Quick Actions */
.actions-grid[b-1vskqdseif] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.action-card[b-1vskqdseif] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem;
    background: #f7fafc;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    text-decoration: none;
    transition: all 0.3s ease;
    text-align: center;
}

.action-card:hover[b-1vskqdseif] {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    border-color: var(--accent-fill-rest);
}

.action-icon[b-1vskqdseif] {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.action-card h3[b-1vskqdseif] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 0.5rem;
}

.action-card p[b-1vskqdseif] {
    color: #4a5568;
    margin: 0;
    font-size: 0.9rem;
}

/* Help Categories */
.categories-grid[b-1vskqdseif] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
}

.category-card[b-1vskqdseif] {
    padding: 2rem;
    background: white;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.category-card[b-1vskqdseif]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--accent-fill-rest);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.category-card:hover[b-1vskqdseif]::before {
    transform: scaleX(1);
}

.category-card:hover[b-1vskqdseif] {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.category-icon[b-1vskqdseif] {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.category-card h3[b-1vskqdseif] {
    font-size: 1.5rem;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 0.5rem;
}

.category-card p[b-1vskqdseif] {
    color: #4a5568;
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
}

.category-links[b-1vskqdseif] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.category-links li[b-1vskqdseif] {
    margin-bottom: 0.5rem;
}

.category-links a[b-1vskqdseif] {
    color: var(--accent-fill-rest);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.3s ease;
}

.category-links a:hover[b-1vskqdseif] {
    color: #5a67d8;
    text-decoration: underline;
}

/* Popular Articles */
.articles-grid[b-1vskqdseif] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.article-card[b-1vskqdseif] {
    padding: 2rem;
    background: #f7fafc;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
}

.article-card:hover[b-1vskqdseif] {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.article-meta[b-1vskqdseif] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.article-category[b-1vskqdseif] {
    background: var(--accent-fill-rest);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
}

.article-time[b-1vskqdseif] {
    color: #718096;
    font-size: 0.8rem;
}

.article-card h3[b-1vskqdseif] {
    font-size: 1.1rem;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 0.75rem;
    line-height: 1.4;
}

.article-card p[b-1vskqdseif] {
    color: #4a5568;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    line-height: 1.5;
}

.article-link[b-1vskqdseif] {
    color: var(--accent-fill-rest);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    transition: color 0.3s ease;
}

.article-link:hover[b-1vskqdseif] {
    color: #5a67d8;
}

/* Video Tutorials */
.videos-grid[b-1vskqdseif] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

.video-card[b-1vskqdseif] {
    background: white;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
    transition: all 0.3s ease;
}

.video-card:hover[b-1vskqdseif] {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

.video-thumbnail[b-1vskqdseif] {
    position: relative;
    height: 180px;
    background: linear-gradient(135deg, var(--accent-fill-rest) 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.play-button[b-1vskqdseif] {
    font-size: 3rem;
    color: white;
    opacity: 0.9;
    transition: opacity 0.3s ease;
}

.video-thumbnail:hover .play-button[b-1vskqdseif] {
    opacity: 1;
}

.video-duration[b-1vskqdseif] {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.8rem;
}

.video-card h3[b-1vskqdseif] {
    font-size: 1.1rem;
    font-weight: 600;
    color: #2d3748;
    margin: 1rem 1rem 0.5rem;
}

.video-card p[b-1vskqdseif] {
    color: #4a5568;
    margin: 0 1rem 1rem;
    font-size: 0.9rem;
}

/* Contact Support */
.contact-support[b-1vskqdseif] {
    background: var(--accent-fill-rest);
    border-radius: 16px;
    padding: 3rem;
    text-align: center;
    color: white;
}

.support-content h2[b-1vskqdseif] {
    color: white;
    margin-bottom: 1rem;
}

.support-content p[b-1vskqdseif] {
    font-size: 1.1rem;
    margin-bottom: 2rem;
    opacity: 0.9;
}

.support-options[b-1vskqdseif] {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.support-btn[b-1vskqdseif] {
    padding: 1rem 2rem;
    text-decoration: none;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.support-btn.primary[b-1vskqdseif] {
    background: white;
    color: var(--accent-fill-rest);
}

.support-btn.primary:hover[b-1vskqdseif] {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 255, 255, 0.3);
}

.support-btn.secondary[b-1vskqdseif] {
    background: transparent;
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.support-btn.secondary:hover[b-1vskqdseif] {
    background: rgba(255, 255, 255, 0.1);
    border-color: white;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .actions-grid[b-1vskqdseif] {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1rem;
    }

    .categories-grid[b-1vskqdseif] {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 1.5rem;
    }

    .articles-grid[b-1vskqdseif] {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 1.5rem;
    }
}

@media (max-width: 768px) {
    .help-container[b-1vskqdseif] {
        padding: 1rem 0.5rem;
    }

    .help-content[b-1vskqdseif] {
        padding: 2rem;
        border-radius: 8px;
        max-width: 100%;
    }

    .help-title[b-1vskqdseif] {
        font-size: 2.5rem;
    }

    .search-box[b-1vskqdseif] {
        flex-direction: column;
        gap: 0;
    }

    .search-input[b-1vskqdseif] {
        border-radius: 12px 12px 0 0;
    }

    .search-btn[b-1vskqdseif] {
        border-radius: 0 0 12px 12px;
    }

    .actions-grid[b-1vskqdseif] {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }

    .categories-grid[b-1vskqdseif] {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .articles-grid[b-1vskqdseif] {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .videos-grid[b-1vskqdseif] {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 1.5rem;
    }

    .support-options[b-1vskqdseif] {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }

    .support-btn[b-1vskqdseif] {
        width: 100%;
        max-width: 300px;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .help-container[b-1vskqdseif] {
        padding: 0.5rem 0.25rem;
    }

    .help-content[b-1vskqdseif] {
        padding: 1.5rem;
        border-radius: 6px;
    }

    .help-title[b-1vskqdseif] {
        font-size: 2rem;
    }

    .action-card[b-1vskqdseif] {
        padding: 1.5rem;
    }

    .category-card[b-1vskqdseif] {
        padding: 1.5rem;
    }

    .article-card[b-1vskqdseif] {
        padding: 1.5rem;
    }

    .contact-support[b-1vskqdseif] {
        padding: 2rem;
    }
} 
/* /Components/Pages/Landing/Kvkk.razor.rz.scp.css */
/* KVKK Page Styles */
.legal-container[b-qfk52ihd9n] {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    line-height: 1.6;
    color: #1a1a1a;
    min-height: 100vh;
    background: #f8fafc;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 2rem 1rem;
    box-sizing: border-box;
}

.legal-content[b-qfk52ihd9n] {
    max-width: 1000px;
    width: 100%;
    margin: 0 auto;
    padding: 3rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    position: relative;
}

/* Header Styles */
.legal-header[b-qfk52ihd9n] {
    border-bottom: 2px solid #e2e8f0;
    padding-bottom: 2rem;
    margin-bottom: 3rem;
}

.back-link[b-qfk52ihd9n] {
    display: inline-flex;
    align-items: center;
    color: var(--accent-fill-rest);
    text-decoration: none;
    font-weight: 500;
    margin-bottom: 1rem;
    transition: color 0.3s ease;
}

.back-link:hover[b-qfk52ihd9n] {
    color: #5a67d8;
}

.legal-title[b-qfk52ihd9n] {
    font-size: 2.5rem;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 0.5rem;
    line-height: 1.2;
}

.legal-date[b-qfk52ihd9n] {
    color: #718096;
    font-size: 0.875rem;
    font-style: italic;
}

/* Body Content */
.legal-body[b-qfk52ihd9n] {
    line-height: 1.7;
}

.legal-section[b-qfk52ihd9n] {
    margin-bottom: 3rem;
}

.legal-section h2[b-qfk52ihd9n] {
    font-size: 1.5rem;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e2e8f0;
}

.legal-section h3[b-qfk52ihd9n] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #4a5568;
    margin-bottom: 0.75rem;
    margin-top: 1.5rem;
}

.legal-section h4[b-qfk52ihd9n] {
    font-size: 1.1rem;
    font-weight: 600;
    color: #4a5568;
    margin-bottom: 0.5rem;
    margin-top: 1rem;
}

.legal-section p[b-qfk52ihd9n] {
    margin-bottom: 1rem;
    color: #4a5568;
}

.legal-section ul[b-qfk52ihd9n] {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}

.legal-section li[b-qfk52ihd9n] {
    margin-bottom: 0.5rem;
    color: #4a5568;
}

.legal-section li strong[b-qfk52ihd9n] {
    color: #2d3748;
}

/* Contact Info Styles */
.contact-info[b-qfk52ihd9n] {
    background: #f7fafc;
    border-radius: 8px;
    padding: 1.5rem;
    margin: 1.5rem 0;
    border-left: 4px solid var(--accent-fill-rest);
}

.contact-info h3[b-qfk52ihd9n] {
    margin-top: 0;
    color: #2d3748;
}

.contact-info ul[b-qfk52ihd9n] {
    margin-bottom: 0;
}

/* Data Categories Styles */
.data-categories[b-qfk52ihd9n] {
    background: #f7fafc;
    border-radius: 8px;
    padding: 1.5rem;
    margin: 1.5rem 0;
}

.data-categories h3[b-qfk52ihd9n] {
    color: var(--accent-fill-rest);
    margin-top: 1rem;
    margin-bottom: 0.75rem;
}

.data-categories h3:first-child[b-qfk52ihd9n] {
    margin-top: 0;
}

/* Rights List Styles */
.rights-list[b-qfk52ihd9n] {
    display: grid;
    gap: 1rem;
    margin: 1.5rem 0;
}

.right-item[b-qfk52ihd9n] {
    background: #f7fafc;
    border-radius: 8px;
    padding: 1rem;
    border-left: 4px solid var(--accent-fill-rest);
}

.right-item h4[b-qfk52ihd9n] {
    margin-top: 0;
    margin-bottom: 0.5rem;
    color: #2d3748;
}

.right-item p[b-qfk52ihd9n] {
    margin-bottom: 0;
    font-size: 0.9rem;
}

/* Application Methods Styles */
.application-methods[b-qfk52ihd9n] {
    background: #f7fafc;
    border-radius: 8px;
    padding: 1.5rem;
    margin: 1.5rem 0;
}

.application-methods h3[b-qfk52ihd9n] {
    color: var(--accent-fill-rest);
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

.application-methods h3:first-child[b-qfk52ihd9n] {
    margin-top: 0;
}

.application-note[b-qfk52ihd9n] {
    background: #fff5f5;
    border: 1px solid #fed7d7;
    border-radius: 8px;
    padding: 1rem;
    margin-top: 1rem;
}

.application-note p[b-qfk52ihd9n] {
    margin-bottom: 0;
    color: #c53030;
}

/* Links */
a[b-qfk52ihd9n] {
    color: var(--accent-fill-rest);
    text-decoration: none;
}

a:hover[b-qfk52ihd9n] {
    text-decoration: underline;
}

/* Responsive Design */
@media (max-width: 768px) {
    .legal-container[b-qfk52ihd9n] {
        padding: 1rem 0.5rem;
    }

    .legal-content[b-qfk52ihd9n] {
        padding: 2rem;
        border-radius: 8px;
        max-width: 100%;
    }

    .legal-title[b-qfk52ihd9n] {
        font-size: 2rem;
    }

    .legal-section h2[b-qfk52ihd9n] {
        font-size: 1.25rem;
    }

    .rights-list[b-qfk52ihd9n] {
        gap: 0.75rem;
    }
}

@media (max-width: 480px) {
    .legal-container[b-qfk52ihd9n] {
        padding: 0.5rem 0.25rem;
    }

    .legal-content[b-qfk52ihd9n] {
        padding: 1.5rem;
        border-radius: 6px;
    }

    .legal-title[b-qfk52ihd9n] {
        font-size: 1.75rem;
    }

    .legal-section h2[b-qfk52ihd9n] {
        font-size: 1.125rem;
    }
} 
/* /Components/Pages/Landing/Landing.razor.rz.scp.css */
/* Reset and Base Styles */
*[b-hvzdu3ntw3] {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html[b-hvzdu3ntw3] {
    scroll-behavior: smooth;
}

html[b-hvzdu3ntw3], body[b-hvzdu3ntw3] {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100vh;
    overflow-x: hidden;
}

.landing-container[b-hvzdu3ntw3] {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    line-height: 1.6;
    color: #1a1a1a;
    overflow-x: hidden;
    width: 100%;
    min-height: 100vh;
    position: relative;
    display: flex;
    flex-direction: column;
}

/* Hero Section */
.hero-section[b-hvzdu3ntw3] {
    padding: 2rem 2rem 4rem;
    background: #f7fafc;
    position: relative;
    overflow: hidden;
    min-height: 750px;
}

.hero-content[b-hvzdu3ntw3] {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: flex-start;
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 0 1rem;
}

.hero-title[b-hvzdu3ntw3] {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1.1;
    margin-top: 0;
    margin-bottom: 1.5rem;
    color: #1a202c;
    outline: none;
}

.hero-title:focus[b-hvzdu3ntw3] {
    outline: none;
}

.highlight[b-hvzdu3ntw3] {
    color: var(--accent-fill-rest);
}

.business-type-text[b-hvzdu3ntw3] {
    display: inline-block;
    color: var(--accent-fill-rest);
    position: relative;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.business-type-text.fade-out[b-hvzdu3ntw3] {
    opacity: 0;
    transform: translateY(-10px);
}

.business-type-text.fade-in[b-hvzdu3ntw3] {
    opacity: 1;
    transform: translateY(0);
}

.hero-description[b-hvzdu3ntw3] {
    font-size: 1.25rem;
    color: #4a5568;
    margin-bottom: 2rem;
    line-height: 1.7;
}

.hero-actions[b-hvzdu3ntw3] {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.btn-hero-primary[b-hvzdu3ntw3] {
    padding: 1rem 2rem;
    background: var(--accent-fill-rest);
    color: white;
    text-decoration: none;
    font-weight: 600;
    border-radius: 12px;
    transition: all 0.3s ease;
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
    font-size: 1.1rem;
}

    .btn-hero-primary:hover[b-hvzdu3ntw3] {
        transform: translateY(-3px);
        box-shadow: 0 12px 35px rgba(102, 126, 234, 0.4);
    }

.btn-hero-secondary[b-hvzdu3ntw3] {
    padding: 1rem 2rem;
    background: white;
    color: #4a5568;
    text-decoration: none;
    font-weight: 600;
    border-radius: 12px;
    border: 2px solid #e2e8f0;
    transition: all 0.3s ease;
    font-size: 1.1rem;
}

    .btn-hero-secondary:hover[b-hvzdu3ntw3] {
        border-color: var(--accent-fill-rest);
        color: var(--accent-fill-rest);
        transform: translateY(-2px);
    }


.hero-visual[b-hvzdu3ntw3] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.hero-carousel[b-hvzdu3ntw3] {
    width: 100%;
    position: relative;
}

.carousel-container[b-hvzdu3ntw3] {
    position: relative;
    width: 100%;
    height: 600px;
    overflow: visible;
    border-radius: 24px;
}

.carousel-slide[b-hvzdu3ntw3] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 1s ease-in-out, transform 1s ease-in-out;
    pointer-events: none;
}

    .carousel-slide.active[b-hvzdu3ntw3] {
        opacity: 1;
        transform: scale(1);
        pointer-events: auto;
        animation: slideIn-b-hvzdu3ntw3 1s ease-out;
    }

@keyframes slideIn-b-hvzdu3ntw3 {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.slide-content[b-hvzdu3ntw3] {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    border-radius: 24px;
    overflow: visible;
}

.slide-screenshots[b-hvzdu3ntw3] {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

/* Ana Screenshot - Merkez */
.screenshot-main[b-hvzdu3ntw3] {
    position: absolute;
    top: 5%;
    left: 50%;
    transform: translateX(-50%);
    width: 85%;
    max-width: 750px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    z-index: 3;
    animation: floatMain-b-hvzdu3ntw3 6s ease-in-out infinite;
}

/* Mobile App Screenshots - Container width için */
.screenshot-main:has(img[src*="app-screenshot"])[b-hvzdu3ntw3] {
    width: 35%;
    max-width: 350px;
    border-radius: 24px;
}

/* Mobile App Screenshots */
.screenshot-main img[src*="app-screenshot"][b-hvzdu3ntw3] {
    width: 100%;
    height: auto;
    margin: 0 auto;
    display: block;
}

@keyframes floatMain-b-hvzdu3ntw3 {
    0%, 100% {
        transform: translateX(-50%) translateY(0px) scale(1);
    }
    50% {
        transform: translateX(-50%) translateY(-10px) scale(1.02);
    }
}

/* Secondary Screenshots */
.screenshot-secondary[b-hvzdu3ntw3] {
    position: absolute;
    background: white;
    border-radius: 12px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    transition: all 0.3s ease;
}

    .screenshot-secondary:hover[b-hvzdu3ntw3] {
        transform: scale(1.05) !important;
        z-index: 10 !important;
    }

/* Mobile App Secondary Screenshots */
.screenshot-secondary img[src*="app-screenshot"][b-hvzdu3ntw3] {
    width: 100%;
    height: auto;
    margin: 0 auto;
    display: block;
}

/* Secondary Position 1 - Sağ tarafta (2'li için) veya Sağ Alt (3'lü için) */
.screenshot-secondary-1[b-hvzdu3ntw3] {
    width: 48%;
    max-width: 420px;
    bottom: 30%;
    right: 6%;
    z-index: 4;
    animation: floatSecondary1-b-hvzdu3ntw3 7s ease-in-out infinite;
}

/* Mobile App Secondary Position 1 */
.screenshot-secondary-1:has(img[src*="app-screenshot"])[b-hvzdu3ntw3] {
    width: 23%;
    max-width: 240px;
    right: 8%;
    border-radius: 20px;
}

@keyframes floatSecondary1-b-hvzdu3ntw3 {
    0%, 100% {
        transform: translateY(0px) translateX(0px) rotate(3deg);
    }
    50% {
        transform: translateY(-12px) translateX(-5px) rotate(2deg);
    }
}

/* Secondary Position 2 - Sol Alt (3'lü için) */
.screenshot-secondary-2[b-hvzdu3ntw3] {
    width: 46%;
    max-width: 400px;
    bottom: 30%;
    left: 6%;
    z-index: 4;
    animation: floatSecondary2-b-hvzdu3ntw3 8s ease-in-out infinite;
}

/* Mobile App Secondary Position 2 */
.screenshot-secondary-2:has(img[src*="app-screenshot"])[b-hvzdu3ntw3] {
    width: 23%;
    max-width: 240px;
    left: 8%;
    border-radius: 20px;
}

@keyframes floatSecondary2-b-hvzdu3ntw3 {
    0%, 100% {
        transform: translateY(0px) translateX(0px) rotate(-3deg);
    }
    50% {
        transform: translateY(-10px) translateX(5px) rotate(-2deg);
    }
}

/* Secondary Position 3 - Mobil uygulama için göster */
.screenshot-secondary-3[b-hvzdu3ntw3] {
    width: 24%;
    max-width: 200px;
    bottom: 25%;
    left: 50%;
    transform: translateX(-50%) rotate(-1deg);
    z-index: 2;
    animation: floatSecondary3-b-hvzdu3ntw3 9s ease-in-out infinite;
    display: none;
}

/* Mobile App için Secondary Position 3'ü göster */
.screenshot-secondary-3:has(img[src*="app-screenshot"])[b-hvzdu3ntw3] {
    display: block;
    width: 22%;
    max-width: 230px;
    bottom: 22%;
    border-radius: 20px;
}

@keyframes floatSecondary3-b-hvzdu3ntw3 {
    0%, 100% {
        transform: translateX(-50%) translateY(0px) rotate(-1deg);
    }
    50% {
        transform: translateX(-50%) translateY(-8px) rotate(1deg);
    }
}

.screenshot-image[b-hvzdu3ntw3] {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.slide-content-link[b-hvzdu3ntw3] {
    text-decoration: none;
    color: inherit;
    display: block;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.slide-content-link:hover .slide-info[b-hvzdu3ntw3] {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}

.slide-content-link:hover .slide-title[b-hvzdu3ntw3] {
    color: var(--accent-fill-rest);
}

.slide-info[b-hvzdu3ntw3] {
    position: absolute;
    bottom: 2rem;
    left: 2rem;
    right: 2rem;
    background: rgba(255, 255, 255, 0.95);
    padding: 1.5rem 2rem;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(20px);
    z-index: 10;
    pointer-events: none;
    border: 1px solid rgba(255, 255, 255, 0.8);
    transition: all 0.3s ease;
}

.slide-title[b-hvzdu3ntw3] {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: #1a202c;
    animation: fadeInUp-b-hvzdu3ntw3 0.8s ease-out 0.3s both;
    transition: color 0.3s ease;
}

.slide-description[b-hvzdu3ntw3] {
    font-size: 1rem;
    line-height: 1.6;
    color: #4a5568;
    animation: fadeInUp-b-hvzdu3ntw3 0.8s ease-out 0.5s both;
}

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

.carousel-dots[b-hvzdu3ntw3] {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.carousel-dot[b-hvzdu3ntw3] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #cbd5e0;
    border: none;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0;
    position: relative;
    overflow: hidden;
}

    .carousel-dot[b-hvzdu3ntw3]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        height: 100%;
        background: var(--accent-fill-rest);
        transition: width 0.4s ease;
    }

    .carousel-dot:hover[b-hvzdu3ntw3] {
        background: #a0aec0;
        transform: scale(1.2);
    }

    .carousel-dot.active[b-hvzdu3ntw3] {
        background: var(--accent-fill-rest);
        width: 36px;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);
    }

        .carousel-dot.active[b-hvzdu3ntw3]::before {
            width: 100%;
        }

/* Section Common Styles */
.section-content[b-hvzdu3ntw3] {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    padding: 0 1rem;
}

.section-header[b-hvzdu3ntw3] {
    text-align: center;
    margin-bottom: 2rem;
}

.section-title[b-hvzdu3ntw3] {
    font-size: 2.5rem;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 1rem;
}

.section-description[b-hvzdu3ntw3] {
    font-size: 1.125rem;
    color: #4a5568;
    max-width: 600px;
    margin: 0 auto;
}

/* Features Section */
.features-section[b-hvzdu3ntw3] {
    padding: 3rem 2rem;
    background: white;
    width: 100%;
}

.features-grid[b-hvzdu3ntw3] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.feature-card[b-hvzdu3ntw3] {
    background: white;
    border-radius: 20px;
    padding: 1.5rem 1.25rem;
    border: 1px solid #e2e8f0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

    .feature-card:hover[b-hvzdu3ntw3] {
        transform: translateY(-8px);
        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.12);
        border-color: var(--accent-fill-rest);
    }

        .feature-card:hover .feature-icon-wrapper[b-hvzdu3ntw3] {
            transform: scale(1.1);
        }

.feature-icon-wrapper[b-hvzdu3ntw3] {
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    margin-bottom: 0.75rem;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.feature-title[b-hvzdu3ntw3] {
    font-size: 1.15rem;
    font-weight: 600;
    color: #1a202c;
    margin-bottom: 0.5rem;
}

.feature-description[b-hvzdu3ntw3] {
    color: #4a5568;
    margin-bottom: 1rem;
    line-height: 1.6;
    font-size: 0.95rem;
    flex: 1;
}

.feature-content-wrapper[b-hvzdu3ntw3] {
    display: flex;
    gap: 1rem;
    width: 100%;
    align-items: center;
    margin-top: auto;
}

.feature-screenshots[b-hvzdu3ntw3] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.screenshot-thumbnail[b-hvzdu3ntw3] {
    width: 50px;
    height: 50px;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid #e2e8f0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

    .screenshot-thumbnail:hover[b-hvzdu3ntw3] {
        transform: scale(1.15);
        border-color: var(--accent-fill-rest);
        box-shadow: 0 6px 20px rgba(102, 126, 234, 0.3);
    }

    .screenshot-thumbnail img[b-hvzdu3ntw3] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.feature-details-btn[b-hvzdu3ntw3] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    color: var(--accent-fill-rest);
    text-decoration: none;
    font-weight: 600;
    font-size: 1.05rem;
    margin-top: auto;
    margin-left: auto;
    transition: gap 0.3s ease;
}

    .feature-details-btn:hover[b-hvzdu3ntw3] {
        gap: 0.75rem;
    }

/* Screenshot Modal */
.screenshot-modal[b-hvzdu3ntw3] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 2rem;
    animation: fadeIn-b-hvzdu3ntw3 0.3s ease-out;
}

@keyframes fadeIn-b-hvzdu3ntw3 {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.screenshot-modal-content[b-hvzdu3ntw3] {
    position: relative;
    max-width: 90%;
    max-height: 90%;
    animation: scaleIn-b-hvzdu3ntw3 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes scaleIn-b-hvzdu3ntw3 {
    from {
        transform: scale(0.9);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

.screenshot-modal-content img[b-hvzdu3ntw3] {
    max-width: 100%;
    max-height: 85vh;
    border-radius: 12px;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5);
    display: block;
}

.screenshot-modal-close[b-hvzdu3ntw3] {
    position: absolute;
    top: -3rem;
    right: 0;
    background: white;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

    .screenshot-modal-close:hover[b-hvzdu3ntw3] {
        transform: scale(1.1);
        background: var(--accent-fill-rest);
        color: white;
    }

/* Solutions Section */
.solutions-section[b-hvzdu3ntw3] {
    padding: 3rem 2rem;
    background: #f7fafc;
    width: 100%;
}

.solutions-grid[b-hvzdu3ntw3] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.solution-card[b-hvzdu3ntw3] {
    background: white;
    border-radius: 20px;
    padding: 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid #e2e8f0;
    overflow: hidden;
    cursor: pointer;
    display: flex;
    flex-direction: column;
}

    .solution-card:hover[b-hvzdu3ntw3] {
        transform: translateY(-8px);
        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.12);
        border-color: var(--accent-fill-rest);
    }

        .solution-card:hover .solution-image[b-hvzdu3ntw3] {
            transform: scale(1.05);
        }

.solution-image-wrapper[b-hvzdu3ntw3] {
    width: 100%;
    height: 200px;
    overflow: hidden;
    background: #f7fafc;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.solution-image[b-hvzdu3ntw3] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.solution-title[b-hvzdu3ntw3] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1a202c;
    margin: 1.25rem 1.5rem 0.75rem;
}

.solution-description[b-hvzdu3ntw3] {
    color: #4a5568;
    margin: 0 1.5rem 1.25rem;
    line-height: 1.6;
}

.solution-features[b-hvzdu3ntw3] {
    list-style: none;
    padding: 0;
    margin: 0 1.5rem 1.25rem;
    flex: 1;
}

    .solution-features li[b-hvzdu3ntw3] {
        color: #4a5568;
        margin-bottom: 0.5rem;
        padding-left: 1.5rem;
        position: relative;
    }

        .solution-features li[b-hvzdu3ntw3]::before {
            content: '•';
            position: absolute;
            left: 0;
            color: var(--accent-fill-rest);
            font-weight: 700;
        }

.solution-details-btn[b-hvzdu3ntw3] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    color: var(--accent-fill-rest);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0 1.5rem 1.5rem;
    margin-top: auto;
    transition: gap 0.3s ease;
}

    .solution-details-btn:hover[b-hvzdu3ntw3] {
        gap: 0.75rem;
    }

/* CTA Section */
.cta-section[b-hvzdu3ntw3] {
    padding: 3rem 2rem;
    background: var(--accent-fill-rest);
    color: white;
    text-align: center;
    width: 100%;
}

.cta-content[b-hvzdu3ntw3] {
    max-width: 800px;
    margin: 0 auto;
    width: 100%;
    padding: 0 1rem;
}

.cta-title[b-hvzdu3ntw3] {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.cta-description[b-hvzdu3ntw3] {
    font-size: 1.125rem;
    margin-bottom: 2rem;
    opacity: 0.9;
    line-height: 1.6;
}

.cta-actions[b-hvzdu3ntw3] {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.btn-cta-primary[b-hvzdu3ntw3] {
    padding: 1rem 2rem;
    background: white;
    color: var(--accent-fill-rest);
    text-decoration: none;
    font-weight: 600;
    border-radius: 12px;
    transition: all 0.3s ease;
    font-size: 1.1rem;
}

    .btn-cta-primary:hover[b-hvzdu3ntw3] {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(255, 255, 255, 0.3);
    }

.btn-cta-secondary[b-hvzdu3ntw3] {
    padding: 1rem 2rem;
    background: transparent;
    color: white;
    text-decoration: none;
    font-weight: 600;
    border-radius: 12px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
    font-size: 1.1rem;
}

    .btn-cta-secondary:hover[b-hvzdu3ntw3] {
        background: rgba(255, 255, 255, 0.1);
        border-color: white;
    }

/* Footer */
.footer[b-hvzdu3ntw3] {
    background: #1a202c;
    color: white;
    padding: 3rem 2rem 2rem;
    width: 100%;
    margin-top: auto;
}

.footer-content[b-hvzdu3ntw3] {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    padding: 0 1rem;
}

.footer-main[b-hvzdu3ntw3] {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 4rem;
    margin-bottom: 2rem;
}

.footer-brand[b-hvzdu3ntw3] {
    max-width: 400px;
}

.footer-logo[b-hvzdu3ntw3] {
    margin-bottom: 1rem;
}

.footer-description[b-hvzdu3ntw3] {
    color: #a0aec0;
    line-height: 1.6;
}

.footer-links[b-hvzdu3ntw3] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

.footer-column-title[b-hvzdu3ntw3] {
    font-weight: 600;
    margin-bottom: 1rem;
    color: white;
}

.footer-link[b-hvzdu3ntw3] {
    display: block;
    color: #a0aec0;
    text-decoration: none;
    margin-bottom: 0.5rem;
    transition: color 0.3s ease;
}

    .footer-link:hover[b-hvzdu3ntw3] {
        color: var(--accent-fill-rest);
    }

.footer-bottom[b-hvzdu3ntw3] {
    border-top: 1px solid #2d3748;
    padding-top: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-copyright[b-hvzdu3ntw3] {
    color: #a0aec0;
}

.footer-bottom-links[b-hvzdu3ntw3] {
    display: flex;
    gap: 2rem;
    color: #a0aec0;
    font-size: 0.875rem;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .hero-section[b-hvzdu3ntw3] {
        min-height: 700px;
        padding: 5rem 2rem 3rem;
    }

    .hero-content[b-hvzdu3ntw3] {
        grid-template-columns: 1fr;
        gap: 3rem;
        text-align: center;
        min-height: auto;
    }

    .hero-title[b-hvzdu3ntw3] {
        font-size: 3rem;
    }

    .hero-actions[b-hvzdu3ntw3] {
        justify-content: center;
    }

    .carousel-container[b-hvzdu3ntw3] {
        height: 500px;
    }

    .screenshot-main[b-hvzdu3ntw3] {
        width: 85%;
        top: 5%;
    }

    .screenshot-secondary-1[b-hvzdu3ntw3] {
        width: 50%;
        bottom: 32%;
        right: 5%;
    }

    .screenshot-secondary-2[b-hvzdu3ntw3] {
        width: 48%;
        bottom: 32%;
        left: 5%;
    }

    .screenshot-secondary-3[b-hvzdu3ntw3] {
        display: none;
    }

    .slide-info[b-hvzdu3ntw3] {
        bottom: 1.5rem;
        left: 1.5rem;
        right: 1.5rem;
        padding: 1.25rem 1.5rem;
    }

    .slide-title[b-hvzdu3ntw3] {
        font-size: 1.5rem;
    }

    .slide-description[b-hvzdu3ntw3] {
        font-size: 0.95rem;
    }

    .features-grid[b-hvzdu3ntw3],
    .solutions-grid[b-hvzdu3ntw3] {
        grid-template-columns: repeat(2, 1fr);
    }

    .feature-icon-wrapper[b-hvzdu3ntw3] {
        width: 100px;
        height: 100px;
    }

    .feature-icon-wrapper fluent-icon[b-hvzdu3ntw3] {
        width: 56px !important;
        height: 56px !important;
    }

    .screenshot-thumbnail[b-hvzdu3ntw3] {
        width: 70px;
        height: 70px;
    }

    .footer-main[b-hvzdu3ntw3] {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .footer-links[b-hvzdu3ntw3] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .header[b-hvzdu3ntw3] {
        position: relative;
    }

    .header-content[b-hvzdu3ntw3] {
        padding: 1rem;
        flex-wrap: wrap;
    }

    .header-actions[b-hvzdu3ntw3] {
        width: 100%;
        justify-content: flex-end;
    }

    .nav-menu[b-hvzdu3ntw3] {
        display: none;
    }

    .hero-section[b-hvzdu3ntw3] {
        padding: 5rem 1rem 3rem;
        min-height: 700px;
    }

    .hero-title[b-hvzdu3ntw3] {
        font-size: 2.5rem;
        text-align: left;
    }

    .hero-description[b-hvzdu3ntw3]{
        font-size: 0.95rem;
    }

    .hero-actions[b-hvzdu3ntw3] {
        flex-direction: column;
        align-items: stretch;
    }

    .carousel-container[b-hvzdu3ntw3] {
        height: 450px;
    }

    .slide-screenshots[b-hvzdu3ntw3] {
        padding: 0.75rem;
    }

    .screenshot-main[b-hvzdu3ntw3] {
        width: 82%;
        top: 5%;
    }

    .screenshot-secondary-1[b-hvzdu3ntw3] {
        width: 52%;
        bottom: 32%;
        right: 4%;
    }

    .screenshot-secondary-2[b-hvzdu3ntw3] {
        width: 50%;
        bottom: 32%;
        left: 4%;
    }

    .screenshot-secondary-3[b-hvzdu3ntw3] {
        display: none;
    }

    .slide-info[b-hvzdu3ntw3] {
        bottom: 1rem;
        left: 1rem;
        right: 1rem;
        padding: 1rem 1.25rem;
    }

    .slide-title[b-hvzdu3ntw3] {
        font-size: 1.25rem;
        margin-bottom: 0.35rem;
    }

    .slide-description[b-hvzdu3ntw3] {
        font-size: 0.875rem;
    }

    .carousel-dots[b-hvzdu3ntw3] {
        gap: 0.5rem;
        margin-top: 1rem;
    }

    .carousel-dot[b-hvzdu3ntw3] {
        width: 10px;
        height: 10px;
    }

        .carousel-dot.active[b-hvzdu3ntw3] {
            width: 24px;
        }

    .section-title[b-hvzdu3ntw3] {
        font-size: 2rem;
    }

    .features-grid[b-hvzdu3ntw3],
    .solutions-grid[b-hvzdu3ntw3] {
        grid-template-columns: 1fr;
    }

    .feature-icon-wrapper[b-hvzdu3ntw3] {
        width: 90px;
        height: 90px;
    }

    .feature-icon-wrapper fluent-icon[b-hvzdu3ntw3] {
        width: 48px !important;
        height: 48px !important;
    }

    .screenshot-thumbnail[b-hvzdu3ntw3] {
        width: 60px;
        height: 60px;
        border-width: 2px;
    }

    .feature-card[b-hvzdu3ntw3] {
        padding: 1.5rem 1rem;
    }

    .cta-actions[b-hvzdu3ntw3] {
        flex-direction: column;
        align-items: center;
    }

    .footer-links[b-hvzdu3ntw3] {
        grid-template-columns: 1fr;
    }

    .footer-bottom[b-hvzdu3ntw3] {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .hero-title[b-hvzdu3ntw3] {
        font-size: 2rem;
    }

    .section-title[b-hvzdu3ntw3] {
        font-size: 1.75rem;
    }

    .cta-title[b-hvzdu3ntw3] {
        font-size: 2rem;
    }
}

/* Demo Button in Slide */
.btn-slide-demo[b-hvzdu3ntw3] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
    color: white;
    text-decoration: none;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.95rem;
    margin-top: 16px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(74, 144, 226, 0.4);
    z-index: 10;
    position: relative;
}

.btn-slide-demo:hover[b-hvzdu3ntw3] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(74, 144, 226, 0.5);
    background: linear-gradient(135deg, #357abd 0%, #2868a8 100%);
}

@media (max-width: 768px) {
    .btn-slide-demo[b-hvzdu3ntw3] {
        padding: 10px 20px;
        font-size: 0.875rem;
        margin-top: 12px;
    }
}
/* /Components/Pages/Landing/PlatformFeatures/AiRapor.razor.rz.scp.css */
/* AiRapor Page Specific Styles */

/* Section Common */
.section-header[b-epgky2rkwt] {
    text-align: center;
    margin-bottom: 2rem;
}

.section-title[b-epgky2rkwt] {
    font-size: 2rem;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 0.75rem;
    letter-spacing: -0.02em;
}

.section-description[b-epgky2rkwt] {
    font-size: 1.125rem;
    color: #4a5568;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Solutions Section - Used for AI Questions */
.solutions-section[b-epgky2rkwt] {
    padding: 3rem 0;
    background: #f7fafc;
    margin: 0;
    position: relative;
    z-index: 2;
}

/* Features Grid - Used for AI Questions cards */
.features-grid[b-epgky2rkwt] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 2rem;
}

/* AI Questions Grid - 2 columns */
.ai-questions-grid[b-epgky2rkwt] {
    grid-template-columns: repeat(2, 1fr);
}

/* Feature Card - Used for AI Questions */
.feature-card[b-epgky2rkwt] {
    background: #f7fafc;
    border-radius: 12px;
    padding: 2rem;
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
    text-align: center;
    min-height: 240px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.feature-card:hover[b-epgky2rkwt] {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    border-color: var(--accent-fill-rest);
    z-index: 10;
    position: relative;
}

.feature-card h4[b-epgky2rkwt] {
    font-size: 1.15rem;
    font-weight: 600;
    color: #1a202c;
    margin-bottom: 0.75rem;
    width: 100%;
}

.feature-card p[b-epgky2rkwt] {
    color: #4a5568;
    line-height: 1.7;
    font-size: 0.9rem;
    width: 100%;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .features-grid[b-epgky2rkwt] {
        grid-template-columns: repeat(3, 1fr);
    }

    .ai-questions-grid[b-epgky2rkwt] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .section-title[b-epgky2rkwt] {
        font-size: 1.75rem;
    }

    .features-grid[b-epgky2rkwt] {
        grid-template-columns: 1fr;
    }

    .ai-questions-grid[b-epgky2rkwt] {
        grid-template-columns: 1fr;
    }

    .solutions-section[b-epgky2rkwt] {
        padding: 2rem 1rem;
    }
}

@media (max-width: 480px) {
    .section-title[b-epgky2rkwt] {
        font-size: 1.5rem;
    }

    .section-description[b-epgky2rkwt] {
        font-size: 1rem;
    }

    .feature-card[b-epgky2rkwt] {
        padding: 1.5rem;
        min-height: auto;
    }

    .feature-card h4[b-epgky2rkwt] {
        font-size: 1rem;
    }

    .feature-card p[b-epgky2rkwt] {
        font-size: 0.85rem;
    }
}
/* /Components/Pages/Landing/PlatformFeatures/Entegrasyonlar.razor.rz.scp.css */
/* Entegrasyonlar Page - Manual Sections Styles */

/* Section Common */
.section-header[b-0xt8rgwcl1] {
    text-align: center;
    margin-bottom: 2rem;
}

.section-title[b-0xt8rgwcl1] {
    font-size: 2rem;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 0.75rem;
    letter-spacing: -0.02em;
}

.section-description[b-0xt8rgwcl1] {
    font-size: 1.125rem;
    color: #4a5568;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Solutions Section - For manual HTML sections */
.solutions-section[b-0xt8rgwcl1] {
    padding: 3rem 0;
    background: #f7fafc;
    margin: 0;
    position: relative;
    z-index: 2;
}

/* Features Section - For manual HTML sections */
.features-section[b-0xt8rgwcl1] {
    padding: 2rem 1rem 3rem 1rem;
    background: white;
    margin-top: -20px;
    position: relative;
    z-index: 1;
}

/* Features Grid - For manual HTML sections */
.features-grid[b-0xt8rgwcl1] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 2rem;
}

/* Feature Card - For manual HTML sections */
.feature-card[b-0xt8rgwcl1] {
    background: #f7fafc;
    border-radius: 12px;
    padding: 2rem;
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
    text-align: center;
    min-height: 240px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.feature-card:hover[b-0xt8rgwcl1] {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    border-color: var(--accent-fill-rest);
    z-index: 10;
    position: relative;
}

.feature-icon[b-0xt8rgwcl1] {
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    margin-left: auto;
    margin-right: auto;
}

.feature-card h4[b-0xt8rgwcl1] {
    font-size: 1.15rem;
    font-weight: 600;
    color: #1a202c;
    margin-bottom: 0.75rem;
    width: 100%;
}

.feature-card p[b-0xt8rgwcl1] {
    color: #4a5568;
    line-height: 1.7;
    font-size: 0.9rem;
    width: 100%;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .features-grid[b-0xt8rgwcl1] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .section-title[b-0xt8rgwcl1] {
        font-size: 1.75rem;
    }

    .section-description[b-0xt8rgwcl1] {
        font-size: 1rem;
    }

    .features-grid[b-0xt8rgwcl1] {
        grid-template-columns: 1fr;
    }

    .feature-card[b-0xt8rgwcl1] {
        min-height: auto;
        padding: 1.5rem;
    }

    .feature-icon[b-0xt8rgwcl1] {
        margin-bottom: 1rem;
    }

    .feature-card h4[b-0xt8rgwcl1] {
        font-size: 1rem;
    }

    .feature-card p[b-0xt8rgwcl1] {
        font-size: 0.875rem;
    }
}

@media (max-width: 480px) {
    .section-title[b-0xt8rgwcl1] {
        font-size: 1.5rem;
    }

    .solutions-section[b-0xt8rgwcl1],
    .features-section[b-0xt8rgwcl1] {
        padding: 2rem 0;
    }
}
/* /Components/Pages/Landing/PlatformFeatures/EsnafKurye.razor.rz.scp.css */
/* /Components/Pages/Landing/PlatformFeatures/MasaYonetimi.razor.rz.scp.css */
/* /Components/Pages/Landing/PlatformFeatures/OnlineSiparis.razor.rz.scp.css */
/* /Components/Pages/Landing/PlatformFeatures/PlatformFeatures.razor.rz.scp.css */
/* Use Cases Page - Landing ile Uyumlu */

/* Container & Layout */
.use-cases-container[b-uplkgfqj9t] {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    line-height: 1.6;
    color: #1a1a1a;
    min-height: 100vh;
    background: #f7fafc;
    width: 100%;
    padding: 0;
    box-sizing: border-box;
}

.use-cases-content[b-uplkgfqj9t] {
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    padding: 2rem 2rem 4rem;
}

/* Hero Section */
.hero-section[b-uplkgfqj9t] {
    text-align: center;
    margin-bottom: 4rem;
    padding: 2rem 0;
}

.hero-title[b-uplkgfqj9t] {
    font-size: 3rem;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 1rem;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.hero-subtitle[b-uplkgfqj9t] {
    font-size: 1.25rem;
    color: #4a5568;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Sectors Grid */
.sectors-grid[b-uplkgfqj9t] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: 3rem;
}

/* Sector Card */
.sector-card[b-uplkgfqj9t] {
    background: white;
    border-radius: 20px;
    padding: 1.5rem 1.5rem 2rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: visible;
}

.sector-card:hover[b-uplkgfqj9t] {
    transform: translateY(-8px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.15);
    border-color: var(--accent-fill-rest);
}

.sector-card-featured[b-uplkgfqj9t] {
    border: 2px solid var(--accent-fill-rest);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, white 100%);
}

.sector-badge[b-uplkgfqj9t] {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    background: var(--accent-fill-rest);
    color: white;
    padding: 0.4rem 1rem;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
}

.sector-image[b-uplkgfqj9t] {
    margin-bottom: 0.5rem;
    width: 100%;
    height: 200px;
    border-radius: 12px;
    overflow: visible;
    background: transparent;
    position: relative;
}

/* Mobile App Card - Taller height for vertical screenshots */
.sector-image-mobile[b-uplkgfqj9t] {
    height: 320px;
}

/* Slide Screenshots Container */
.slide-screenshots[b-uplkgfqj9t] {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Ana Screenshot - Merkez */
.screenshot-main[b-uplkgfqj9t] {
    position: absolute;
    top: 0%;
    left: 50%;
    transform: translateX(-50%);
    width: 84%;
    max-width: 480px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    z-index: 3;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.sector-card:hover .screenshot-main[b-uplkgfqj9t] {
    transform: translateX(-50%) translateY(-5px) scale(1.02);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25);
    z-index: 10;
}

/* Mobile App Screenshots - Container için */
.screenshot-main:has(img[src*="app-screenshot"])[b-uplkgfqj9t] {
    width: 28%;
    max-width: 240px;
    border-radius: 20px;
    top: 5%;
    transform: translateX(-50%) scale(0.95);
}

.sector-card:hover .screenshot-main:has(img[src*="app-screenshot"])[b-uplkgfqj9t] {
    transform: translateX(-50%) scale(0.98) translateY(-5px);
}

.screenshot-main img[b-uplkgfqj9t] {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* Secondary Screenshots */
.screenshot-secondary[b-uplkgfqj9t] {
    position: absolute;
    background: white;
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.sector-card:hover .screenshot-secondary[b-uplkgfqj9t] {
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.18);
}

.screenshot-secondary img[b-uplkgfqj9t] {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* Secondary Position 1 - Sağ, Primary ile Overlap */
.screenshot-secondary-1[b-uplkgfqj9t] {
    width: 45%;
    max-width: 340px;
    top: 35%;
    right: 1%;
    z-index: 2;
    transform: rotate(2deg);
}

.sector-card:hover .screenshot-secondary-1[b-uplkgfqj9t] {
    transform: rotate(3deg) translateY(-5px);
    z-index: 11;
}

/* Mobile App Secondary Position 1 */
.screenshot-secondary-1:has(img[src*="app-screenshot"])[b-uplkgfqj9t] {
    width: 22%;
    max-width: 200px;
    right: 3%;
    top: 48%;
    border-radius: 18px;
    transform: rotate(2deg) scale(0.9);
}

.sector-card:hover .screenshot-secondary-1:has(img[src*="app-screenshot"])[b-uplkgfqj9t] {
    transform: rotate(3deg) translateY(-5px) scale(0.92);
}

/* Secondary Position 2 - Sol, Primary ile Overlap */
.screenshot-secondary-2[b-uplkgfqj9t] {
    width: 45%;
    max-width: 340px;
    top: 35%;
    left: 1%;
    z-index: 1;
    transform: rotate(-2deg);
}

.sector-card:hover .screenshot-secondary-2[b-uplkgfqj9t] {
    transform: rotate(-3deg) translateY(-5px);
    z-index: 11;
}

/* Mobile App Secondary Position 2 */
.screenshot-secondary-2:has(img[src*="app-screenshot"])[b-uplkgfqj9t] {
    width: 22%;
    max-width: 200px;
    left: 3%;
    top: 48%;
    border-radius: 18px;
    transform: rotate(-2deg) scale(0.9);
}

.sector-card:hover .screenshot-secondary-2:has(img[src*="app-screenshot"])[b-uplkgfqj9t] {
    transform: rotate(-3deg) translateY(-5px) scale(0.92);
}

.sector-title[b-uplkgfqj9t] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 0.5rem;
    margin-top: 0;
    letter-spacing: -0.01em;
    position: relative;
    z-index: 15;
}

.sector-description[b-uplkgfqj9t] {
    color: #4a5568;
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 1rem;
    flex: 1;
    position: relative;
    z-index: 15;
}

.sector-features[b-uplkgfqj9t] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
    position: relative;
    z-index: 15;
}

.feature-tag[b-uplkgfqj9t] {
    background: #f7fafc;
    border: 1px solid #e2e8f0;
    color: #4a5568;
    padding: 0.35rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
    transition: all 0.2s ease;
    white-space: nowrap;
    position: relative;
    z-index: 15;
}

.sector-card:hover .feature-tag[b-uplkgfqj9t] {
    background: rgba(102, 126, 234, 0.1);
    border-color: var(--accent-fill-rest);
    color: var(--accent-fill-rest);
}

.sector-cta[b-uplkgfqj9t] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    color: var(--accent-fill-rest);
    font-weight: 600;
    font-size: 1.05rem;
    margin-top: auto;
    transition: gap 0.3s ease;
    position: relative;
    z-index: 15;
}

.sector-card:hover .sector-cta[b-uplkgfqj9t] {
    gap: 0.75rem;
}

/* CTA Section */
.cta-section[b-uplkgfqj9t] {
    text-align: center;
    padding: 4rem 2rem;
    background: var(--accent-fill-rest);
    border-radius: 20px;
    margin-top: 2rem;
}

.cta-content h2[b-uplkgfqj9t] {
    font-size: 2.25rem;
    font-weight: 700;
    color: white;
    margin-bottom: 1rem;
    letter-spacing: -0.02em;
}

.cta-content p[b-uplkgfqj9t] {
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 2rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.cta-buttons[b-uplkgfqj9t] {
    display: flex;
    gap: 1rem;
    justify-content: center;
    align-items: center;
}

.btn-cta-primary[b-uplkgfqj9t],
.btn-cta-secondary[b-uplkgfqj9t] {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.05rem;
    border-radius: 12px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.btn-cta-primary[b-uplkgfqj9t] {
    background: white;
    color: var(--accent-fill-rest);
}

.btn-cta-primary:hover[b-uplkgfqj9t] {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.btn-cta-secondary[b-uplkgfqj9t] {
    background: rgba(255, 255, 255, 0.15);
    color: white;
    border: 2px solid white;
}

.btn-cta-secondary:hover[b-uplkgfqj9t] {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
}

/* Responsive Design */
@media (max-width: 1024px) {
    .hero-title[b-uplkgfqj9t] {
        font-size: 2.5rem;
    }

    .sectors-grid[b-uplkgfqj9t] {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }

    .sector-image[b-uplkgfqj9t] {
        height: 220px;
    }

    .screenshot-main[b-uplkgfqj9t] {
        width: 80%;
        top: 0%;
    }

    .screenshot-secondary-1[b-uplkgfqj9t],
    .screenshot-secondary-2[b-uplkgfqj9t] {
        width: 48%;
        top: 35%;
    }
}

@media (max-width: 640px) {
    .sectors-grid[b-uplkgfqj9t] {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

@media (max-width: 768px) {
    .use-cases-content[b-uplkgfqj9t] {
        padding: 1.5rem;
    }

    .hero-title[b-uplkgfqj9t] {
        font-size: 2rem;
    }

    .hero-subtitle[b-uplkgfqj9t] {
        font-size: 1.05rem;
    }

    .sector-card[b-uplkgfqj9t] {
        padding: 1.5rem;
    }

    .sector-image[b-uplkgfqj9t] {
        height: 200px;
    }

    .screenshot-main[b-uplkgfqj9t] {
        width: 78%;
        top: 0%;
    }

    .screenshot-secondary-1[b-uplkgfqj9t] {
        width: 50%;
        top: 35%;
        right: 2%;
    }

    .screenshot-secondary-2[b-uplkgfqj9t] {
        width: 50%;
        top: 35%;
        left: 2%;
    }

    .sector-title[b-uplkgfqj9t] {
        font-size: 1.5rem;
    }

    .cta-section[b-uplkgfqj9t] {
        padding: 3rem 1.5rem;
    }

    .cta-content h2[b-uplkgfqj9t] {
        font-size: 1.75rem;
    }

    .cta-buttons[b-uplkgfqj9t] {
        flex-direction: column;
        width: 100%;
    }

    .btn-cta-primary[b-uplkgfqj9t],
    .btn-cta-secondary[b-uplkgfqj9t] {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .use-cases-content[b-uplkgfqj9t] {
        padding: 1rem;
    }

    .hero-section[b-uplkgfqj9t] {
        margin-bottom: 2.5rem;
    }

    .hero-title[b-uplkgfqj9t] {
        font-size: 1.75rem;
    }

    .sector-card[b-uplkgfqj9t] {
        padding: 1.25rem;
    }

    .sector-image[b-uplkgfqj9t] {
        height: 180px;
    }

    .screenshot-main[b-uplkgfqj9t] {
        width: 80%;
        top: 0%;
    }

    .screenshot-secondary-1[b-uplkgfqj9t],
    .screenshot-secondary-2[b-uplkgfqj9t] {
        width: 52%;
        top: 38%;
    }

    .screenshot-secondary-1[b-uplkgfqj9t] {
        right: 1%;
    }

    .screenshot-secondary-2[b-uplkgfqj9t] {
        left: 1%;
    }

    .cta-section[b-uplkgfqj9t] {
        padding: 2.5rem 1rem;
    }
}

/* Demo Badge and Overlay */
.sector-card-with-demo[b-uplkgfqj9t] {
    position: relative;
    overflow: visible;
}

.demo-badge[b-uplkgfqj9t] {
    position: absolute;
    top: -12px;
    right: -12px;
    background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 4px 12px rgba(74, 144, 226, 0.4);
    z-index: 10;
    animation: pulse-b-uplkgfqj9t 2s infinite;
}

@keyframes pulse-b-uplkgfqj9t {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 4px 12px rgba(74, 144, 226, 0.4);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 6px 16px rgba(74, 144, 226, 0.6);
    }
}

.demo-link-overlay[b-uplkgfqj9t] {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
    color: white;
    text-decoration: none;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(74, 144, 226, 0.4);
    z-index: 5;
    opacity: 0;
    pointer-events: none;
}

.sector-card-with-demo:hover .demo-link-overlay[b-uplkgfqj9t] {
    opacity: 1;
    pointer-events: auto;
    bottom: 24px;
}

.demo-link-overlay:hover[b-uplkgfqj9t] {
    transform: translateX(-50%) translateY(-2px);
    box-shadow: 0 6px 20px rgba(74, 144, 226, 0.5);
    background: linear-gradient(135deg, #357abd 0%, #2868a8 100%);
}

@media (max-width: 768px) {
    .demo-badge[b-uplkgfqj9t] {
        top: -8px;
        right: -8px;
        padding: 6px 12px;
        font-size: 0.75rem;
    }

    .demo-link-overlay[b-uplkgfqj9t] {
        padding: 10px 20px;
        font-size: 0.875rem;
    }
}

@media (max-width: 480px) {
    /* On mobile, always show demo link */
    .demo-link-overlay[b-uplkgfqj9t] {
        opacity: 1;
        pointer-events: auto;
        position: relative;
        bottom: auto;
        left: auto;
        transform: none;
        margin-top: 16px;
        width: 100%;
        justify-content: center;
    }

    .demo-link-overlay:hover[b-uplkgfqj9t] {
        transform: translateY(-2px);
    }
}
/* /Components/Pages/Landing/PlatformFeatures/QrMenu.razor.rz.scp.css */
/* QR Demo Section */
.qr-demo-section[b-qtmz0rmwaa] {
    padding: 80px 20px;
    background: transparent;
    position: relative;
    overflow: hidden;
}

.qr-demo-container[b-qtmz0rmwaa] {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.qr-demo-content[b-qtmz0rmwaa] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.qr-demo-text[b-qtmz0rmwaa] {
    color: #2c3e50;
}

.qr-demo-title[b-qtmz0rmwaa] {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 24px;
    line-height: 1.2;
    color: #2c3e50;
}

.qr-demo-description[b-qtmz0rmwaa] {
    font-size: 1.125rem;
    line-height: 1.8;
    margin-bottom: 32px;
    color: #495057;
}

.qr-demo-features[b-qtmz0rmwaa] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.qr-feature-item[b-qtmz0rmwaa] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1rem;
    padding: 12px 16px;
    background: transparent;
    border-radius: 8px;
}

.qr-feature-item span[b-qtmz0rmwaa] {
    color: #2c3e50;
    font-weight: 500;
}

.qr-demo-code[b-qtmz0rmwaa] {
    display: flex;
    justify-content: center;
    align-items: center;
}

.qr-code-wrapper[b-qtmz0rmwaa] {
    background: white;
    padding: 32px;
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    text-align: center;
    transition: transform 0.3s ease;
}

.qr-code-wrapper:hover[b-qtmz0rmwaa] {
    transform: scale(1.05);
}

.qr-code-image[b-qtmz0rmwaa] {
    width: 280px;
    height: 280px;
    display: block;
    margin: 0 auto;
    border-radius: 12px;
}

.qr-code-label[b-qtmz0rmwaa] {
    margin-top: 20px;
    font-size: 1.125rem;
    font-weight: 600;
    color: #2c3e50;
}

/* Responsive Design */
@media (max-width: 768px) {
    .qr-demo-section[b-qtmz0rmwaa] {
        padding: 60px 16px;
    }

    .qr-demo-content[b-qtmz0rmwaa] {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .qr-demo-title[b-qtmz0rmwaa] {
        font-size: 2rem;
        text-align: center;
    }

    .qr-demo-description[b-qtmz0rmwaa] {
        font-size: 1rem;
        text-align: center;
    }

    .qr-code-wrapper[b-qtmz0rmwaa] {
        padding: 24px;
    }

    .qr-code-image[b-qtmz0rmwaa] {
        width: 220px;
        height: 220px;
    }

    .qr-code-label[b-qtmz0rmwaa] {
        font-size: 1rem;
    }
}
/* /Components/Pages/Landing/PlatformFeatures/StokYonetimi.razor.rz.scp.css */
/* /Components/Pages/Landing/PlatformFeatures/TeslimatYonetimi.razor.rz.scp.css */
/* /Components/Pages/Landing/PlatformFeatures/VardiyaYonetimi.razor.rz.scp.css */
/* /Components/Pages/Landing/PlatformFeatures/WhatsAppSiparis.razor.rz.scp.css */
/* /Components/Pages/Landing/Pricing.razor.rz.scp.css */
/* Pricing Page - Landing ile Uyumlu */

/* Container & Layout */
.pricing-container[b-vakva1bb92] {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    line-height: 1.6;
    color: #1a1a1a;
    min-height: 100vh;
    background: #f7fafc;
    width: 100%;
    padding: 0;
    box-sizing: border-box;
}

.pricing-content[b-vakva1bb92] {
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    padding: 1rem 2rem 2rem;
}

/* Pricing & Usage Section */
.pricing-usage-section[b-vakva1bb92] {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 2rem;
    margin-bottom: 3rem;
    align-items: flex-start;
}

/* Pricing Card - Sticky */
.pricing-card[b-vakva1bb92] {
    background: white;
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
    position: sticky;
    top: 100px;
    align-self: flex-start;
}

.pricing-card:hover[b-vakva1bb92] {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}

.pricing-card-header[b-vakva1bb92] {
    text-align: center;
    margin-bottom: 1.25rem;
}

.pricing-card-header h2[b-vakva1bb92] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1a202c;
    margin-top: 0.5rem;
    letter-spacing: -0.01em;
}

.price-box[b-vakva1bb92] {
    text-align: center;
    padding: 0.75rem 1rem;
    background: #f7fafc;
    border-radius: 12px;
    margin-bottom: 1rem;
    border: 2px solid var(--accent-fill-rest);
}

.price-main[b-vakva1bb92] {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.25rem;
    margin-bottom: 0;
}

.price-value[b-vakva1bb92] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--accent-fill-rest);
    letter-spacing: -0.02em;
}

.price-unit[b-vakva1bb92] {
    font-size: 0.8rem;
    color: #4a5568;
    font-weight: 500;
}

.price-vat[b-vakva1bb92] {
    font-size: 0.75rem;
    color: #4a5568;
    font-weight: 400;
    margin-left: 0.25rem;
}

/* Pricing Note */
.pricing-note[b-vakva1bb92] {
    padding: 0.875rem 1rem;
    background: #f0f7ff;
    border-radius: 10px;
    text-align: center;
    margin-bottom: 1rem;
    border: 1px solid #e0efff;
}

.pricing-note p[b-vakva1bb92] {
    color: #4a5568;
    font-size: 0.8rem;
    line-height: 1.5;
    margin: 0;
    font-weight: 400;
}

.pricing-features[b-vakva1bb92] {
    list-style: none;
    padding: 0;
    margin: 0 0 1.25rem 0;
}

.pricing-features li[b-vakva1bb92] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid #f7fafc;
}

.pricing-features li:last-child[b-vakva1bb92] {
    border-bottom: none;
}

.pricing-features li span[b-vakva1bb92] {
    color: #4a5568;
    font-size: 0.85rem;
}

.btn-purchase[b-vakva1bb92] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: center;
    width: 100%;
    padding: 0.75rem 1.25rem;
    background: var(--accent-fill-rest);
    color: white;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    border-radius: 10px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 16px rgba(102, 126, 234, 0.3);
}

.btn-purchase-icon[b-vakva1bb92] {
    flex-shrink: 0;
    filter: brightness(0) invert(1);
}

.btn-purchase:hover[b-vakva1bb92] {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.4);
}

/* Section Headers */
.section-header[b-vakva1bb92] {
    text-align: left;
    margin-bottom: 2rem;
}

.section-header h2[b-vakva1bb92] {
    font-size: 2rem;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 0.5rem;
    letter-spacing: -0.02em;
}

.section-header h3[b-vakva1bb92] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 0.5rem;
    letter-spacing: -0.01em;
}

.section-header p[b-vakva1bb92] {
    font-size: 1rem;
    color: #4a5568;
    margin: 0;
    font-weight: 400;
    line-height: 1.6;
}

/* Usage Section */
.usage-section[b-vakva1bb92] {
    flex: 1;
}

.usage-grid[b-vakva1bb92] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    margin-bottom: 2rem;
}

.usage-card[b-vakva1bb92] {
    background: white;
    border-radius: 16px;
    padding: 1.75rem;
    text-align: center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.usage-card:hover[b-vakva1bb92] {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    border-color: var(--accent-fill-rest);
}

.usage-card.highlight[b-vakva1bb92] {
    background: var(--accent-fill-rest);
    color: white;
    border-color: var(--accent-fill-rest);
}

.usage-icon[b-vakva1bb92] {
    margin-bottom: 0.25rem;
}

.usage-card h4[b-vakva1bb92] {
    font-size: 1.05rem;
    font-weight: 600;
    color: #1a202c;
    margin: 0;
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.usage-card.highlight h4[b-vakva1bb92] {
    color: white;
}

.usage-card p[b-vakva1bb92] {
    color: #718096;
    font-size: 0.8rem;
    margin: 0;
    line-height: 1.5;
    font-weight: 400;
}

.usage-card.highlight p[b-vakva1bb92] {
    color: rgba(255, 255, 255, 0.9);
}

.usage-cost[b-vakva1bb92] {
    background: #f7fafc;
    color: var(--accent-fill-rest);
    padding: 0.4rem 1rem;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 700;
    margin-top: auto;
    letter-spacing: -0.02em;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    justify-content: center;
    border: 2px solid var(--accent-fill-rest);
}

.coin-icon[b-vakva1bb92] {
    flex-shrink: 0;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

.usage-card.highlight .usage-cost[b-vakva1bb92] {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

/* Calculator Section - Inline (Sağ Alt) */
.calculator-section-inline[b-vakva1bb92] {
    margin-top: 2rem;
}

.calculator-section-inline .section-header[b-vakva1bb92] {
    margin-bottom: 1.5rem;
}

.calculator-container[b-vakva1bb92] {
    background: white;
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    border: 1px solid #e2e8f0;
}

.calculator-inputs[b-vakva1bb92] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.input-group[b-vakva1bb92] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.input-group label[b-vakva1bb92] {
    font-weight: 600;
    color: #1a202c;
    font-size: 0.875rem;
    letter-spacing: -0.01em;
}

.calculator-results[b-vakva1bb92] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.result-card[b-vakva1bb92] {
    background: #f7fafc;
    border-radius: 12px;
    padding: 1.25rem;
    border: 1px solid #e2e8f0;
}

.result-card.daily[b-vakva1bb92] {
    border-left: 3px solid #48bb78;
}

.result-card.monthly[b-vakva1bb92] {
    border-left: 3px solid var(--accent-fill-rest);
}

.result-header h4[b-vakva1bb92] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1a202c;
    margin: 0 0 0.75rem 0;
    letter-spacing: -0.01em;
}

.result-breakdown[b-vakva1bb92] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.breakdown-item[b-vakva1bb92] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.35rem 0;
    color: #4a5568;
    font-size: 0.85rem;
}

.breakdown-total[b-vakva1bb92] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0 0.25rem 0;
    border-top: 2px solid #cbd5e0;
    margin-top: 0.35rem;
    font-weight: 700;
    color: #1a202c;
    font-size: 1rem;
}

.breakdown-total span:last-child[b-vakva1bb92] {
    color: var(--accent-fill-rest);
    font-size: 1.1rem;
    letter-spacing: -0.01em;
}

/* Additional Features Info */
.additional-features-info[b-vakva1bb92] {
    background: #f0f7ff;
    border: 1px solid #e0efff;
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.info-icon[b-vakva1bb92] {
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.info-content strong[b-vakva1bb92] {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    color: #1a202c;
    margin-bottom: 0.5rem;
    letter-spacing: -0.01em;
}

.info-content p[b-vakva1bb92] {
    color: #4a5568;
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0;
    font-weight: 400;
}

/* FAQ Section - Compact */
.faq-section-compact[b-vakva1bb92] {
    margin-top: 2rem;
    margin-bottom: 0;
}

.faq-list[b-vakva1bb92] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.faq-item[b-vakva1bb92] {
    background: white;
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    border: 1px solid #e2e8f0;
    transition: all 0.2s ease;
}

.faq-item:hover[b-vakva1bb92] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-color: var(--accent-fill-rest);
}

.faq-question[b-vakva1bb92] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.faq-question strong[b-vakva1bb92] {
    font-size: 1rem;
    font-weight: 600;
    color: #1a202c;
    letter-spacing: -0.01em;
}

.faq-item p[b-vakva1bb92] {
    color: #4a5568;
    line-height: 1.6;
    margin: 0;
    font-size: 0.9rem;
    font-weight: 400;
    padding-left: 2rem;
}

/* CTA Section */
.cta-section[b-vakva1bb92] {
    text-align: center;
    padding: 3rem 2rem;
    background: var(--accent-fill-rest);
    border-radius: 20px;
    margin-bottom: 2rem;
}

.cta-content h2[b-vakva1bb92] {
    font-size: 2rem;
    font-weight: 700;
    color: white;
    margin-bottom: 0.75rem;
    letter-spacing: -0.02em;
}

.cta-content p[b-vakva1bb92] {
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 1.5rem;
    font-weight: 400;
    line-height: 1.6;
}

.btn-cta[b-vakva1bb92] {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    background: white;
    color: var(--accent-fill-rest);
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem;
    border-radius: 12px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.btn-cta:hover[b-vakva1bb92] {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* Responsive Design */
@media (max-width: 1400px) {
    .usage-grid[b-vakva1bb92] {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 1024px) {
    .page-title[b-vakva1bb92] {
        font-size: 2.25rem;
    }

    .pricing-usage-section[b-vakva1bb92] {
        grid-template-columns: 1fr;
    }

    .pricing-card[b-vakva1bb92] {
        max-width: 600px;
        margin: 0 auto;
        position: relative;
        top: 0;
    }

    .usage-grid[b-vakva1bb92] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .pricing-content[b-vakva1bb92] {
        padding: 1.5rem;
    }

    .page-title[b-vakva1bb92] {
        font-size: 2rem;
    }

    .pricing-usage-section[b-vakva1bb92] {
        gap: 2rem;
    }

    .pricing-card[b-vakva1bb92] {
        padding: 1.75rem;
    }

    .price-value[b-vakva1bb92] {
        font-size: 2.25rem;
    }

    .section-header[b-vakva1bb92] {
        text-align: center;
    }

    .section-header h2[b-vakva1bb92] {
        font-size: 1.5rem;
    }

    .usage-grid[b-vakva1bb92] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .usage-card[b-vakva1bb92] {
        padding: 1.5rem;
    }

    .calculator-inputs[b-vakva1bb92],
    .calculator-results[b-vakva1bb92] {
        grid-template-columns: 1fr;
    }

    .faq-grid[b-vakva1bb92] {
        grid-template-columns: 1fr;
    }

    .cta-section[b-vakva1bb92] {
        padding: 2.5rem 1.5rem;
    }
}

@media (max-width: 480px) {
    .pricing-content[b-vakva1bb92] {
        padding: 1rem;
    }

    .page-title[b-vakva1bb92] {
        font-size: 1.75rem;
    }

    .pricing-card[b-vakva1bb92] {
        padding: 1.5rem;
    }

    .price-value[b-vakva1bb92] {
        font-size: 2rem;
    }

    .usage-card[b-vakva1bb92] {
        padding: 1.25rem;
    }

    .calculator-container[b-vakva1bb92] {
        padding: 1.5rem;
    }

    .cta-section[b-vakva1bb92] {
        padding: 2rem 1rem;
    }
}
/* /Components/Pages/Landing/Privacy.razor.rz.scp.css */
/* Privacy Policy Page Styles */
.legal-container[b-k0k4wttysu] {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    line-height: 1.6;
    color: #1a1a1a;
    min-height: 100vh;
    background: #f8fafc;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 2rem 1rem;
    box-sizing: border-box;
}

.legal-content[b-k0k4wttysu] {
    max-width: 1000px;
    width: 100%;
    margin: 0 auto;
    padding: 3rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    position: relative;
}

/* Header Styles */
.legal-header[b-k0k4wttysu] {
    border-bottom: 2px solid #e2e8f0;
    padding-bottom: 2rem;
    margin-bottom: 3rem;
}

.back-link[b-k0k4wttysu] {
    display: inline-flex;
    align-items: center;
    color: var(--accent-fill-rest);
    text-decoration: none;
    font-weight: 500;
    margin-bottom: 1rem;
    transition: color 0.3s ease;
}

.back-link:hover[b-k0k4wttysu] {
    color: #5a67d8;
}

.legal-title[b-k0k4wttysu] {
    font-size: 2.5rem;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 0.5rem;
    line-height: 1.2;
}

.legal-date[b-k0k4wttysu] {
    color: #718096;
    font-size: 0.875rem;
    font-style: italic;
}

/* Body Content */
.legal-body[b-k0k4wttysu] {
    line-height: 1.7;
}

.legal-section[b-k0k4wttysu] {
    margin-bottom: 3rem;
}

.legal-section h2[b-k0k4wttysu] {
    font-size: 1.5rem;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e2e8f0;
}

.legal-section h3[b-k0k4wttysu] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #4a5568;
    margin-bottom: 0.75rem;
    margin-top: 1.5rem;
}

.legal-section p[b-k0k4wttysu] {
    margin-bottom: 1rem;
    color: #4a5568;
}

.legal-section ul[b-k0k4wttysu] {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}

.legal-section li[b-k0k4wttysu] {
    margin-bottom: 0.5rem;
    color: #4a5568;
}

.legal-section li strong[b-k0k4wttysu] {
    color: #2d3748;
}

/* Links */
a[b-k0k4wttysu] {
    color: var(--accent-fill-rest);
    text-decoration: none;
}

a:hover[b-k0k4wttysu] {
    text-decoration: underline;
}

/* Responsive Design */
@media (max-width: 768px) {
    .legal-container[b-k0k4wttysu] {
        padding: 1rem 0.5rem;
    }

    .legal-content[b-k0k4wttysu] {
        padding: 2rem;
        border-radius: 8px;
        max-width: 100%;
    }

    .legal-title[b-k0k4wttysu] {
        font-size: 2rem;
    }

    .legal-section h2[b-k0k4wttysu] {
        font-size: 1.25rem;
    }
}

@media (max-width: 480px) {
    .legal-container[b-k0k4wttysu] {
        padding: 0.5rem 0.25rem;
    }

    .legal-content[b-k0k4wttysu] {
        padding: 1.5rem;
        border-radius: 6px;
    }

    .legal-title[b-k0k4wttysu] {
        font-size: 1.75rem;
    }

    .legal-section h2[b-k0k4wttysu] {
        font-size: 1.125rem;
    }
} 
/* /Components/Pages/Landing/Terms.razor.rz.scp.css */
/* Terms of Service Page Styles */
.legal-container[b-f6a9dmxgyd] {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    line-height: 1.6;
    color: #1a1a1a;
    min-height: 100vh;
    background: #f8fafc;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 2rem 1rem;
    box-sizing: border-box;
}

.legal-content[b-f6a9dmxgyd] {
    max-width: 1000px;
    width: 100%;
    margin: 0 auto;
    padding: 3rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    position: relative;
}

/* Header Styles */
.legal-header[b-f6a9dmxgyd] {
    border-bottom: 2px solid #e2e8f0;
    padding-bottom: 2rem;
    margin-bottom: 3rem;
}

.back-link[b-f6a9dmxgyd] {
    display: inline-flex;
    align-items: center;
    color: var(--accent-fill-rest);
    text-decoration: none;
    font-weight: 500;
    margin-bottom: 1rem;
    transition: color 0.3s ease;
}

.back-link:hover[b-f6a9dmxgyd] {
    color: #5a67d8;
}

.legal-title[b-f6a9dmxgyd] {
    font-size: 2.5rem;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 0.5rem;
    line-height: 1.2;
}

.legal-date[b-f6a9dmxgyd] {
    color: #718096;
    font-size: 0.875rem;
    font-style: italic;
}

/* Body Content */
.legal-body[b-f6a9dmxgyd] {
    line-height: 1.7;
}

.legal-section[b-f6a9dmxgyd] {
    margin-bottom: 3rem;
}

.legal-section h2[b-f6a9dmxgyd] {
    font-size: 1.5rem;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e2e8f0;
}

.legal-section h3[b-f6a9dmxgyd] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #4a5568;
    margin-bottom: 0.75rem;
    margin-top: 1.5rem;
}

.legal-section p[b-f6a9dmxgyd] {
    margin-bottom: 1rem;
    color: #4a5568;
}

.legal-section ul[b-f6a9dmxgyd] {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}

.legal-section ol[b-f6a9dmxgyd] {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}

.legal-section li[b-f6a9dmxgyd] {
    margin-bottom: 0.5rem;
    color: #4a5568;
}

.legal-section li strong[b-f6a9dmxgyd] {
    color: #2d3748;
}

/* Links */
a[b-f6a9dmxgyd] {
    color: var(--accent-fill-rest);
    text-decoration: none;
}

a:hover[b-f6a9dmxgyd] {
    text-decoration: underline;
}

/* Responsive Design */
@media (max-width: 768px) {
    .legal-container[b-f6a9dmxgyd] {
        padding: 1rem 0.5rem;
    }

    .legal-content[b-f6a9dmxgyd] {
        padding: 2rem;
        border-radius: 8px;
        max-width: 100%;
    }

    .legal-title[b-f6a9dmxgyd] {
        font-size: 2rem;
    }

    .legal-section h2[b-f6a9dmxgyd] {
        font-size: 1.25rem;
    }
}

@media (max-width: 480px) {
    .legal-container[b-f6a9dmxgyd] {
        padding: 0.5rem 0.25rem;
    }

    .legal-content[b-f6a9dmxgyd] {
        padding: 1.5rem;
        border-radius: 6px;
    }

    .legal-title[b-f6a9dmxgyd] {
        font-size: 1.75rem;
    }

    .legal-section h2[b-f6a9dmxgyd] {
        font-size: 1.125rem;
    }
} 
/* /Components/Pages/Locations/LocationManagement.razor.rz.scp.css */
.location-management-card[b-vct7tt1zy7] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

[b-vct7tt1zy7] .fluent-tabs {
    height: 100%;
    display: flex;
    flex-direction: column;
}

[b-vct7tt1zy7] .fluent-tabs-content {
    flex: 1;
    overflow: auto;
}

#osm-map[b-vct7tt1zy7] {
    background: var(--neutral-layer-2);
    border: 1px solid var(--neutral-stroke-rest);
}
/* /Components/Pages/Materials/Materials.razor.rz.scp.css */
.materials-container[b-q01zp1oi54] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background: var(--neutral-layer-1);
}

.materials-toolbar[b-q01zp1oi54] {
    background: white;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--neutral-stroke-layer-rest);
    flex-shrink: 0;
}

.materials-content[b-q01zp1oi54] {
    flex: 1;
    display: flex;
    gap: 1px;
    overflow: hidden;
    background: var(--neutral-stroke-layer-rest);
}

.materials-grid-container[b-q01zp1oi54] {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: white;
    overflow: hidden;
}

.materials-grid[b-q01zp1oi54] {
    flex: 1;
    overflow: auto;
}

    .materials-grid[b-q01zp1oi54]::part(grid) {
        border: none;
    }

    .materials-grid[b-q01zp1oi54]::part(header-cell) {
        background: var(--neutral-layer-2);
        font-weight: 600;
        border-bottom: 2px solid var(--neutral-stroke-layer-rest);
        padding: 0.75rem 1rem;
    }

    .materials-grid[b-q01zp1oi54]::part(row) {
        border-bottom: 1px solid var(--neutral-stroke-layer-rest);
    }

        .materials-grid[b-q01zp1oi54]::part(row):hover {
            background: var(--neutral-layer-2);
        }

    .materials-grid[b-q01zp1oi54]::part(cell) {
        padding: 0.75rem 1rem;
    }

.pagination-container[b-q01zp1oi54] {
    padding: 1rem;
    border-top: 1px solid var(--neutral-stroke-layer-rest);
    background: white;
}

/* Detail Panel */
.material-detail-panel[b-q01zp1oi54] {
    width: 450px;
    background: white;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-left: 1px solid var(--neutral-stroke-layer-rest);
    transition: transform 0.3s ease;
}

    .material-detail-panel.hidden[b-q01zp1oi54] {
        transform: translateX(100%);
        width: 0;
    }

.detail-header[b-q01zp1oi54] {
    padding: 1.5rem;
    border-bottom: 1px solid var(--neutral-stroke-layer-rest);
    background: var(--neutral-layer-2);
}

.detail-content[b-q01zp1oi54] {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
}

.detail-footer[b-q01zp1oi54] {
    padding: 1.25rem 1.5rem;
    border-top: 1px solid var(--neutral-stroke-layer-rest);
    background: var(--neutral-layer-2);
}

.detail-section[b-q01zp1oi54] {
    padding: 1.25rem;
    background: var(--neutral-layer-1);
    border-radius: 8px;
    border: 1px solid var(--neutral-stroke-layer-rest);
}

/* Scrollbar Styling */
.detail-content[b-q01zp1oi54]::-webkit-scrollbar,
.materials-grid[b-q01zp1oi54]::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.detail-content[b-q01zp1oi54]::-webkit-scrollbar-thumb,
.materials-grid[b-q01zp1oi54]::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

    .detail-content[b-q01zp1oi54]::-webkit-scrollbar-thumb:hover,
    .materials-grid[b-q01zp1oi54]::-webkit-scrollbar-thumb:hover {
        background: rgba(0, 0, 0, 0.3);
    }

.detail-content[b-q01zp1oi54]::-webkit-scrollbar-track,
.materials-grid[b-q01zp1oi54]::-webkit-scrollbar-track {
    background: transparent;
}

/* Responsive Design */
@media (max-width: 1400px) {
    .material-detail-panel[b-q01zp1oi54] {
        width: 400px;
    }
}

@media (max-width: 1200px) {
    .materials-content[b-q01zp1oi54] {
        flex-direction: column;
    }

    .material-detail-panel[b-q01zp1oi54] {
        width: 100%;
        border-left: none;
        border-top: 1px solid var(--neutral-stroke-layer-rest);
    }

        .material-detail-panel.hidden[b-q01zp1oi54] {
            transform: translateY(100%);
            height: 0;
        }
}

@media (max-width: 768px) {
    .materials-toolbar[b-q01zp1oi54] {
        padding: 1rem;
    }

    .materials-grid[b-q01zp1oi54] {
        font-size: 0.9rem;
    }
}
/* /Components/Pages/Menus/CreateMenu.razor.rz.scp.css */
/* Menu Card */
.menu-card[b-c1b9umnuj4] {
    background: #FAFAFA;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border: 1px solid #e5e7eb;
    overflow: hidden;
    transition: transform 0.2s ease;
    align-self: center;
}

.menu-card:hover[b-c1b9umnuj4] {
    transform: translateY(-1px);
}

/* Header Styles */
.menu-card-header[b-c1b9umnuj4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 16px 16px 0 0;
    padding: 1rem 2rem;
    background-color: var(--theme-primary, #C20004);
    color: var(--theme-secondary, #fff);
}

.logo[b-c1b9umnuj4] {
    display: flex;
    align-items: center;
}

.logo-input[b-c1b9umnuj4] {
    margin: 0;
    font-size: 2rem;
    background: transparent;
    border: none;
    border-bottom: 1px solid white !important;
    color: white;
    text-decoration: #ffffff;
    font-weight: bold;
    width: 400px;
}

.logo input[b-c1b9umnuj4]::placeholder {
    color: white;
}

/* Product Card Styles */
.product-card[b-c1b9umnuj4] {
    transition: transform 0.2s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    overflow: hidden;
    background: #fff;
    min-height: 170px;
    width: 100%;
    max-width: 100%;
    display: flex;
    align-items: stretch;
    position: relative;
}

.product-card:not(.inactive-product):hover[b-c1b9umnuj4] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.product-card input[b-c1b9umnuj4],
.product-card textarea[b-c1b9umnuj4] {
    font-family: inherit;
    outline: none;
}

.product-card input:focus[b-c1b9umnuj4],
.product-card textarea:focus[b-c1b9umnuj4] {
    border-color: #C20004;
    box-shadow: 0 0 0 1px #C2000433;
}

.product-card input[b-c1b9umnuj4]::placeholder,
.product-card textarea[b-c1b9umnuj4]::placeholder {
    color: #ccc !important;
    opacity: 0.7;
}

.product-card .product-desc[b-c1b9umnuj4]::placeholder {
    color: #ddd !important;
    opacity: 0.6;
}

/* Inactive Product Styles */
.inactive-product[b-c1b9umnuj4] {
    pointer-events: none;
    border: 1px dashed #ddd;
}

.inactive-image[b-c1b9umnuj4] {
    opacity: 0.5;
}

.inactive-text[b-c1b9umnuj4] {
    opacity: 0.7;
}

.inactive-price[b-c1b9umnuj4] {
    opacity: 0.4;
}

/* Input Styles */
input[b-c1b9umnuj4],
textarea[b-c1b9umnuj4] {
    word-break: break-word;
    white-space: normal;
}

/* Button Styles */
.fluent-button[appearance="outline"][b-c1b9umnuj4] {
    font-weight: bold;
}

.fluent-button[appearance="accent"][b-c1b9umnuj4] {
    background-color: #C20004;
    color: #fff;
    border: none;
    font-weight: bold;
}

.fluent-button[appearance="accent"]:hover[b-c1b9umnuj4] {
    background: #a80003;
}

/* Icon Styles */
.fas.fa-trash[b-c1b9umnuj4],
.fas.fa-pen[b-c1b9umnuj4],
.fas.fa-plus[b-c1b9umnuj4] {
    font-size: 1.2rem;
    vertical-align: middle;
}

/* Form Container */
.form-container[b-c1b9umnuj4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 32px;
    margin-bottom: 24px;
    width: 100%;
}

.form-inner[b-c1b9umnuj4] {
    max-width: 1280px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    padding: 0 24px;
}

.form-box[b-c1b9umnuj4] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    padding: 24px 32px;
    width: 700px;
    max-width: 100vw;
    flex-wrap: wrap;
    border: 1px solid #f1f3f4;
}

.form-description[b-c1b9umnuj4] {
    width: 100%;
    margin-top: 10px;
    text-align: center;
    color: #888;
    font-size: 0.8rem;
    border-top: 1px solid #eee;
    padding-top: 8px;
}

.url-input[b-c1b9umnuj4] {
    width: 400px;
    font-size: 0.9rem;
}

/* Loading Container */
.loading-container[b-c1b9umnuj4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 32px;
    margin-bottom: 24px;
    width: 100%;
}

/* Categories Container */
.categories-container[b-c1b9umnuj4] {
    width: 100%;
    max-width: 100%;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Category Container */
.category-container[b-c1b9umnuj4] {
    margin-top: 1rem;
    margin-bottom: 1.3rem;
    position: relative;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.067);
    padding: 24px 24px 16px 24px;
    border: 1px solid #f1f3f4;
    max-width: 100%;
    overflow: hidden;
    width: 100%;
}

.category-header[b-c1b9umnuj4] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.category-inputs[b-c1b9umnuj4] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.category-name-input[b-c1b9umnuj4] {
    color: black;
    font-size: 1.6rem;
    font-weight: bold;
    border-bottom: 1px lightgrey solid !important;
    border: none;
    background: transparent;
    width: 420px;
    word-break: break-word;
    white-space: normal;
}

.category-desc-input[b-c1b9umnuj4] {
    font-size: 0.8rem;
    color: #666;
    border-bottom: 1px lightgrey solid !important;
    border: none;
    padding: 4px 8px;
    background: #ffffff;
    width: 420px;
}

.category-delete-btn[b-c1b9umnuj4] {
    min-width: 32px;
    min-height: 32px;
    color: #C20004;
    background: #fff;
    align-self: flex-start;
}

/* Products Grid - 2 Column Layout */
.products-grid[b-c1b9umnuj4] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-top: 20px;
    padding: 0 8px;
}

/* Drop Zone Placeholder */
.drop-zone-placeholder[b-c1b9umnuj4] {
    border: 2px dashed #ddd;
    border-radius: 12px;
    min-height: 140px;
    display: none; /* Hidden by default - JavaScript controls visibility */
    align-items: center;
    justify-content: center;
    background: #fafafa;
    transition: all 0.2s ease;
    cursor: pointer;
}

/* Change cursor to grabbing when dragging */
body.dragging-active[b-c1b9umnuj4] {
    cursor: grabbing !important;
}

body.dragging-active *[b-c1b9umnuj4] {
    cursor: grabbing !important;
}

.drop-zone-placeholder[data-is-empty="true"][b-c1b9umnuj4] {
    min-height: 200px;
    grid-column: 1 / -1; /* Span both columns when empty */
}

.drop-zone-placeholder:hover[b-c1b9umnuj4] {
    border-color: #bbb;
    background: #f5f5f5;
}

.drop-zone-content[b-c1b9umnuj4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: #999;
    font-size: 0.9rem;
}

.drop-zone-content span[b-c1b9umnuj4] {
    font-weight: 500;
}

/* Active drop state */
.drop-zone-placeholder.drop-target[b-c1b9umnuj4] {
    border-color: var(--theme-primary, #C20004);
    border-width: 3px;
    background: linear-gradient(135deg, rgba(194, 0, 4, 0.05), rgba(194, 0, 4, 0.1));
}

.drop-zone-placeholder.drop-target .drop-zone-content[b-c1b9umnuj4] {
    color: var(--theme-primary, #C20004);
}

.drop-zone-placeholder.drop-target .drop-zone-content span[b-c1b9umnuj4] {
    font-weight: 600;
}

/* Product Card */
.product-card[b-c1b9umnuj4] {
    display: flex;
    align-items: stretch;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 20px;
    gap: 20px;
    transition: box-shadow 0.15s ease;
    position: relative;
    min-height: 140px;
}

.product-card:hover[b-c1b9umnuj4] {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* Drag & Drop States */
.product-card.dragging[b-c1b9umnuj4] {
    opacity: 0.5;
    cursor: grabbing !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
    z-index: 1000;
    transition: none;
}

/* Drop zone indicator - shows ONLY when dragging over target */
.product-card.drop-target[b-c1b9umnuj4] {
    position: relative;
}

.product-card.drop-target[b-c1b9umnuj4]::after {
    content: '';
    position: absolute;
    inset: -3px;
    border: 3px dashed var(--theme-primary, #C20004);
    border-radius: 14px;
    background: rgba(194, 0, 4, 0.08);
    pointer-events: none;
    z-index: 1;
}

.product-card.drop-target[b-c1b9umnuj4]::before {
    content: "⇄ Değiştir";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--theme-primary, #C20004);
    color: white;
    padding: 8px 18px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    z-index: 2;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(194, 0, 4, 0.4);
}

/* Drag Handle */
.product-drag-handle[b-c1b9umnuj4] {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.15s ease, background 0.15s ease;
    background: linear-gradient(135deg, #666, #888);
    border-radius: 6px;
    z-index: 5;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.product-card:hover .product-drag-handle[b-c1b9umnuj4] {
    opacity: 1;
}

.product-drag-handle:hover[b-c1b9umnuj4] {
    background: linear-gradient(135deg, var(--theme-primary, #C20004), #a80003);
    transform: scale(1.1);
}

.product-drag-handle:active[b-c1b9umnuj4] {
    cursor: grabbing !important;
    transform: scale(0.98);
}

.product-drag-handle[b-c1b9umnuj4]::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 14px;
    height: 2px;
    background: white;
    box-shadow: 0 -4px 0 white, 0 4px 0 white;
    border-radius: 1px;
}

/* Product Info (Left Side) */
.product-info[b-c1b9umnuj4] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    justify-content: space-between;
}

.product-name[b-c1b9umnuj4] {
    font-size: 1.15rem;
    font-weight: 600;
    color: #333;
    border: none;
    border-bottom: 1px solid #eee;
    background: transparent;
    padding: 0 0 2px 0;
    width: 100%;
    margin-bottom: 4px;
}

.product-name:focus[b-c1b9umnuj4] {
    outline: none;
    border-bottom: 2px solid var(--theme-primary, #C20004);
}

.product-desc[b-c1b9umnuj4] {
    font-size: 0.9rem;
    color: #666;
    border: none;
    border-bottom: 1px solid #eee;
    background: transparent;
    resize: none;
    padding: 0 0 2px 0;
    line-height: 1.5;
    width: 100%;
    flex: 1;
    min-height: 40px;
}

.product-desc:focus[b-c1b9umnuj4] {
    outline: none;
    border-bottom: 2px solid var(--theme-primary, #C20004);
}

.product-price[b-c1b9umnuj4] {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 1.3rem;
    color: #333;
    font-weight: 600;
    margin-top: auto;
}

.price-input[b-c1b9umnuj4] {
    border: none;
    border-bottom: 1px solid #eee;
    background: transparent;
    width: 100px;
    font-size: 1.3rem;
    font-weight: 600;
    color: #333;
    padding: 0 0 2px 0;
}

.price-input:focus[b-c1b9umnuj4] {
    outline: none;
    border-bottom: 2px solid var(--theme-primary, #C20004);
}

.price-currency[b-c1b9umnuj4] {
    color: #666;
    font-size: 1.1rem;
    font-weight: 500;
}

/* Struck Price Styles */
.product-struck-price[b-c1b9umnuj4] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    padding: 4px 0;
    border-top: 1px dashed #ddd;
}

.struck-price-input[b-c1b9umnuj4] {
    border: none;
    border-bottom: 1px solid #eee;
    background: transparent;
    width: 80px;
    font-size: 1rem;
    font-weight: 500;
    color: #999;
    padding: 0 0 2px 0;
    text-decoration: line-through;
}

.struck-price-input:focus[b-c1b9umnuj4] {
    outline: none;
    border-bottom: 2px solid var(--theme-primary, #C20004);
}

.add-struck-price-btn[b-c1b9umnuj4] {
    display: flex;
    align-items: center;
    gap: 4px;
    background: transparent;
    border: 1px dashed #ddd;
    color: #666;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8rem;
    margin-top: 4px;
    transition: all 0.2s ease;
}

.add-struck-price-btn:hover[b-c1b9umnuj4] {
    border-color: var(--theme-primary, #C20004);
    color: var(--theme-primary, #C20004);
}

.remove-struck-price-btn[b-c1b9umnuj4] {
    background: transparent;
    border: none;
    color: #999;
    cursor: pointer;
    padding: 2px;
    border-radius: 2px;
    transition: color 0.2s ease;
}

.remove-struck-price-btn:hover[b-c1b9umnuj4] {
    color: var(--theme-primary, #C20004);
}

/* Product Image Container (Right Side) */
.product-image-container[b-c1b9umnuj4] {
    position: relative;
    width: 120px;
    height: 120px;
}

.product-image-box[b-c1b9umnuj4],
.product-image-placeholder[b-c1b9umnuj4] {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
}

.product-img[b-c1b9umnuj4] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-image-placeholder[b-c1b9umnuj4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
    border: 2px dashed #ddd;
    gap: 4px;
    transition: all 0.2s;
}

.product-image-placeholder:hover[b-c1b9umnuj4] {
    border-color: #C20004;
    background: #fef5f5;
}

.product-image-placeholder span[b-c1b9umnuj4] {
    font-size: 0.75rem;
    color: #999;
}

.image-overlay[b-c1b9umnuj4] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
    color: white;
}

.product-image-box:hover .image-overlay[b-c1b9umnuj4] {
    opacity: 1;
}

/* Product Action Buttons */
.product-action-buttons[b-c1b9umnuj4] {
    position: absolute;
    bottom: 8px;
    right: 8px;
    display: flex;
    gap: 4px;
    z-index: 10;
}

/* Ensure buttons are visible even when image container is hidden */
.product-image-container[style*="display: none"] ~ .product-action-buttons[b-c1b9umnuj4],
.product-action-buttons[b-c1b9umnuj4] {
    display: flex !important;
}

.product-add-btn[b-c1b9umnuj4],
.product-delete-btn[b-c1b9umnuj4],
.product-status-btn[b-c1b9umnuj4] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    background: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.product-add-btn[b-c1b9umnuj4] {
    background: #28a745 !important;
    color: white !important;
    border: 2px solid #fff !important;
}

.product-add-btn *[b-c1b9umnuj4],
.product-add-btn svg[b-c1b9umnuj4],
.product-add-btn fluent-icon[b-c1b9umnuj4],
.product-add-btn .fluent-icon[b-c1b9umnuj4],
.product-add-btn fluent-icon svg[b-c1b9umnuj4],
.product-add-btn .fluent-icon svg[b-c1b9umnuj4] {
    color: white !important;
    fill: white !important;
    stroke: white !important;
}

[b-c1b9umnuj4] .product-add-btn,
[b-c1b9umnuj4] .product-add-btn *,
[b-c1b9umnuj4] .product-add-btn svg,
[b-c1b9umnuj4] .product-add-btn fluent-icon,
[b-c1b9umnuj4] .product-add-btn .fluent-icon {
    color: white !important;
    fill: white !important;
    stroke: white !important;
}

.product-add-btn:hover[b-c1b9umnuj4] {
    background: #218838 !important;
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.product-delete-btn[b-c1b9umnuj4] {
    background: #dc3545 !important;
    color: white !important;
    border: 2px solid #fff !important;
}

.product-delete-btn *[b-c1b9umnuj4],
.product-delete-btn svg[b-c1b9umnuj4],
.product-delete-btn fluent-icon[b-c1b9umnuj4],
.product-delete-btn .fluent-icon[b-c1b9umnuj4],
.product-delete-btn fluent-icon svg[b-c1b9umnuj4],
.product-delete-btn .fluent-icon svg[b-c1b9umnuj4] {
    color: white !important;
    fill: white !important;
    stroke: white !important;
}

[b-c1b9umnuj4] .product-delete-btn,
[b-c1b9umnuj4] .product-delete-btn *,
[b-c1b9umnuj4] .product-delete-btn svg,
[b-c1b9umnuj4] .product-delete-btn fluent-icon,
[b-c1b9umnuj4] .product-delete-btn .fluent-icon {
    color: white !important;
    fill: white !important;
    stroke: white !important;
}

.product-delete-btn:hover[b-c1b9umnuj4] {
    background: #c82333 !important;
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.product-status-btn.active[b-c1b9umnuj4] {
    background: #28a745 !important;
}

.product-status-btn.daily-inactive[b-c1b9umnuj4] {
    background: #ffc107 !important;
}

.product-status-btn.inactive[b-c1b9umnuj4] {
    background: #6c757d !important;
}

.product-status-btn:hover[b-c1b9umnuj4] {
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* Product Name Input with Suggestions */
.product-name-container[b-c1b9umnuj4] {
    position: relative;
    width: 100%;
}

.product-name[b-c1b9umnuj4] {
    width: 100%;
    font-size: 1.1rem;
    font-weight: 600;
    color: #333;
    border: none;
    outline: none;
    background: transparent;
    padding: 8px 0;
    border-bottom: 1px solid transparent;
    transition: all 0.2s ease;
}

.product-name:hover[b-c1b9umnuj4],
.product-name:focus[b-c1b9umnuj4] {
    border-bottom-color: rgba(var(--theme-primary-rgb, 194, 0, 4), 0.3);
}

/* Product Suggestions Dropdown */
.product-suggestions[b-c1b9umnuj4] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 1000;
    max-height: 300px;
    overflow-y: auto;
}

.suggestion-item[b-c1b9umnuj4] {
    padding: 12px 16px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.suggestion-item:last-child[b-c1b9umnuj4] {
    border-bottom: none;
}

.suggestion-item:hover[b-c1b9umnuj4] {
    background-color: rgba(var(--theme-primary-rgb, 194, 0, 4), 0.05);
}

.suggestion-name[b-c1b9umnuj4] {
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
}

.suggestion-desc[b-c1b9umnuj4] {
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 4px;
    line-height: 1.3;
}

.suggestion-price[b-c1b9umnuj4] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--theme-primary, #C20004);
}

/* Category Navigation Tabs */
.category-nav-tabs[b-c1b9umnuj4] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 16px 24px;
    align-items: center;
}

.category-tab[b-c1b9umnuj4] {
    border: 2px solid var(--theme-primary, #C20004);
    border-radius: 20px;
    padding: 8px 16px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--theme-primary, #C20004);
    cursor: pointer;
    transition: transform 0.3s ease, opacity 0.3s ease, background 0.2s ease, color 0.2s ease;
    white-space: nowrap;
    position: relative;
    overflow: visible;
    background: rgba(var(--theme-primary-rgb, 194, 0, 4), 0.1);
    display: flex;
    align-items: center;
    gap: 8px;
    user-select: none;
}

.category-tab-name[b-c1b9umnuj4] {
    cursor: pointer;
    user-select: none;
}

.category-tab:hover[b-c1b9umnuj4] {
    background: var(--theme-primary, #C20004);
    color: white;
    opacity: 0.9;
}

.category-tab.active[b-c1b9umnuj4] {
    background: var(--theme-primary, #C20004);
    color: var(--theme-secondary, white);
    border-color: var(--theme-primary, #C20004);
    opacity: 1;
}

/* Category Drag Handle */
.category-drag-handle[b-c1b9umnuj4] {
    position: relative;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    opacity: 1;
    transition: opacity 0.2s ease, transform 0.15s ease;
    border-radius: 4px;
    margin-left: -4px;
    margin-right: 4px;
}

.category-drag-handle[b-c1b9umnuj4]::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 2px;
    background: currentColor;
    box-shadow: 0 -3px 0 currentColor, 0 3px 0 currentColor;
    border-radius: 1px;
}

.category-drag-handle:hover[b-c1b9umnuj4] {
    transform: scale(1.1);
}

.category-drag-handle:active[b-c1b9umnuj4] {
    cursor: grabbing;
    transform: scale(0.98);
}

/* Category dragging state */
.category-tab.dragging[b-c1b9umnuj4] {
    opacity: 0.3;
    cursor: grabbing !important;
    /* Note: visibility: hidden is set via JavaScript to keep placeholder positions */
}

/* Category Drop Placeholder */
.category-drop-placeholder[b-c1b9umnuj4] {
    display: none;
    align-items: center;
    justify-content: center;
    border: 2px dashed #ddd;
    border-radius: 20px;
    padding: 8px 16px;
    min-width: 120px;
    background: rgba(240, 240, 240, 0.8);
    /* No transition - instant display to prevent flicker */
}

.category-drop-content[b-c1b9umnuj4] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.category-drop-content span[b-c1b9umnuj4] {
    color: #999;
    font-size: 0.85rem;
    font-weight: 500;
    white-space: nowrap;
}

/* Highlighted drop target - where item will be dropped */
.category-drop-placeholder.drop-target[b-c1b9umnuj4] {
    border-color: var(--theme-primary, #C20004);
    border-width: 2px;
    border-style: solid;
    background: linear-gradient(135deg, rgba(194, 0, 4, 0.1), rgba(194, 0, 4, 0.15));
    box-shadow: 0 2px 8px rgba(194, 0, 4, 0.3);
}

.category-drop-placeholder.drop-target .category-drop-content span[b-c1b9umnuj4] {
    color: var(--theme-primary, #C20004);
    font-weight: 700;
}

/* Old product styles - can be removed later */
.product-container[b-c1b9umnuj4] {
    display: none;
    color: #a80003;
    background-color: #f0f8ff;
}

.product-image-section[b-c1b9umnuj4]  .upload-placeholder i {
    font-size: 20px;
}

.product-image-section[b-c1b9umnuj4]  .upload-placeholder span {
    font-size: 11px;
    font-weight: 500;
}



.product-details[b-c1b9umnuj4] {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
}

[b-c1b9umnuj4] .product-name-input {
    font-weight: bold;
    color: black !important;
    border-bottom: 1px lightgrey solid !important;
    border: none;
    background: transparent;
    font-size: 1.1rem;
    width: 100%;
    word-break: break-word;
    white-space: normal;
}

[b-c1b9umnuj4] .product-desc-input {
    border-bottom: 1px lightgrey solid !important;
    border: none;
    min-height: 32px;
    word-break: break-word;
    white-space: normal;
    font-size: 0.8rem;
}

.product-actions[b-c1b9umnuj4] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    min-width: 110px;
    height: 100%;
    position: relative;
}

.price-section[b-c1b9umnuj4] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

[b-c1b9umnuj4] .price-input {
    font-weight: bold;
    color: black !important;
    font-size: 1.2rem;
    width: 90px;
    border-bottom: 1px lightgrey solid !important;
    border: none;
    text-align: right;
    background: #ffffff;
}

.price-currency[b-c1b9umnuj4] {
    color: black;
    font-size: 1.2rem;
}

.product-buttons[b-c1b9umnuj4] {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

/* Deep override for product settings button */
[b-c1b9umnuj4] .product-settings-btn {
    background: #C20004 !important;
    min-width: 28px !important;
    min-height: 28px !important;
}

.product-delete-btn[b-c1b9umnuj4] {
    background: #C20004 !important;
    min-width: 28px;
    min-height: 28px;
}

/* Deep override for product delete button */
[b-c1b9umnuj4] .product-delete-btn {
    background: #C20004 !important;
    min-width: 28px !important;
    min-height: 28px !important;
}

.add-product-btn[b-c1b9umnuj4] {
    margin-top: 8px;
    font-weight: bold;
    color: var(--theme-secondary, #fff);
    background: var(--theme-primary, #C20004) !important;
    border-radius: 8px;
    min-width: 120px;
}

/* Deep override for add product button */
[b-c1b9umnuj4] .add-product-btn {
    margin-top: 8px !important;
    font-weight: bold !important;
    color: var(--theme-secondary, #fff) !important;
    background: var(--theme-primary, #C20004) !important;
    border-radius: 8px !important;
    min-width: 120px !important;
}

.add-category-btn[b-c1b9umnuj4] {
    margin-top: 16px;
    font-weight: bold;
    background: var(--theme-primary, #C20004);
    color: var(--theme-secondary, #fff);
    border-radius: 8px;
    min-width: 140px;
    margin-bottom: 15px;
}

/* Deep override for add category button */
[b-c1b9umnuj4] .add-category-btn {
    margin-top: 16px !important;
    font-weight: bold !important;
    background: var(--theme-primary, #C20004) !important;
    color: var(--theme-secondary, #fff) !important;
    border-radius: 8px !important;
    min-width: 140px !important;
    margin-bottom: 15px !important;
}

.add-category-btn *[b-c1b9umnuj4] {
    color: white !important;
    fill: white !important;
}

.add-category-btn svg[b-c1b9umnuj4],
.add-category-btn fluent-icon[b-c1b9umnuj4],
.add-category-btn .fluent-icon[b-c1b9umnuj4] {
    color: white !important;
    fill: white !important;
}

[b-c1b9umnuj4] .add-category-btn * {
    color: white !important;
    fill: white !important;
}

.save-btn[b-c1b9umnuj4] {
    background: #C20004;
    color: #fff;
    font-weight: bold;
    border-radius: 8px;
    min-width: 100px;
}

/* Deep override for save button */
[b-c1b9umnuj4] .save-btn {
    background: #C20004 !important;
    color: #fff !important;
    font-weight: bold !important;
    border-radius: 8px !important;
    min-width: 100px !important;
}

.category-delete-btn[b-c1b9umnuj4] {
    min-width: 32px;
    min-height: 32px;
    color: #C20004;
    background: #fff;
    align-self: flex-start;
}

/* Deep override for category delete button */
[b-c1b9umnuj4] .category-delete-btn {
    min-width: 32px !important;
    min-height: 32px !important;
    color: #C20004 !important;
    background: #fff !important;
    align-self: flex-start !important;
}

.grid-padding[b-c1b9umnuj4] {
    padding: 0 1rem 1rem 1rem;
}

/* Product Grid Styles */
.product-grid[b-c1b9umnuj4] {
    display: grid;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px;
    width: 100%;
    max-width: 100%;
    margin-bottom: 16px;
}

@media (max-width: 768px) {
    .product-grid[b-c1b9umnuj4] {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 769px) and (max-width: 1200px) {
    .product-grid[b-c1b9umnuj4] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1201px) {
    .product-grid[b-c1b9umnuj4] {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Deep override for FluentGrid to prevent width expansion */
[b-c1b9umnuj4] .category-container fluent-grid {
    max-width: 100% !important;
    width: 100% !important;
}

[b-c1b9umnuj4] .category-container fluent-grid-item {
    max-width: 100% !important;
}

/* Restaurant Header Styles */
.restaurant-header[b-c1b9umnuj4] {
    background: #fff;
    margin-bottom: 2rem;
}

.hero-section[b-c1b9umnuj4] {
    position: relative;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #C20004, #8B0000);
    color: white;
    overflow: hidden;
}

.hero-overlay[b-c1b9umnuj4] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.1);
}

.hero-content[b-c1b9umnuj4] {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1200px;
    padding: 2rem;
}

.header-top-bar[b-c1b9umnuj4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem;
}

.logo-section[b-c1b9umnuj4] {
    display: flex;
    align-items: center;
}

.logo-container[b-c1b9umnuj4] {
    position: relative;
    display: flex;
    align-items: center;
}

.restaurant-logo[b-c1b9umnuj4] {
    height: 80px;
    width: auto;
    max-width: 200px;
    border-radius: 8px;
    object-fit: contain;
    background: rgba(255, 255, 255, 0.1);
    padding: 0.5rem;
}

.logo-upload-area[b-c1b9umnuj4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    border: 2px dashed rgba(255, 255, 255, 0.5);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.logo-upload-area:hover[b-c1b9umnuj4] {
    border-color: rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.1);
}

.upload-text[b-c1b9umnuj4] {
    font-size: 0.9rem;
    margin-top: 0.5rem;
}

.upload-hint[b-c1b9umnuj4] {
    font-size: 0.8rem;
    opacity: 0.8;
}

.title-section[b-c1b9umnuj4] {
    text-align: center;
}

.restaurant-title-container[b-c1b9umnuj4] {
    display: inline-block;
    position: relative;
}

.restaurant-title[b-c1b9umnuj4] {
    font-size: 3rem;
    font-weight: bold;
    color: white;
    background: transparent;
    border: none;
    outline: none;
    text-align: center;
    min-width: 300px;
    padding: 0.5rem 0;
}

.restaurant-title[b-c1b9umnuj4]::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

.title-underline[b-c1b9umnuj4] {
    height: 3px;
    background: linear-gradient(90deg, transparent, white, transparent);
    margin-top: 0.5rem;
}

/* Menu Navigation */
.menu-navigation[b-c1b9umnuj4] {
    background: #fff;
    padding: 1rem 0;
    border-bottom: 1px solid #eee;
    margin-bottom: 2rem;
}

.nav-content[b-c1b9umnuj4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 auto;
    padding: 0 2rem;
}

.search-container[b-c1b9umnuj4] {
    position: relative;
    flex: 1;
    max-width: 400px;
}

.modern-search[b-c1b9umnuj4] {
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 3rem;
    border: 1px solid #ddd;
    border-radius: 25px;
    font-size: 1rem;
    outline: none;
    transition: all 0.2s ease;
}

.modern-search:focus[b-c1b9umnuj4] {
    border-color: #C20004;
    box-shadow: 0 0 0 3px rgba(194, 0, 4, 0.1);
}

.search-icon[b-c1b9umnuj4] {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
}

/* Categories Container */
.categories-container[b-c1b9umnuj4] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* Modern Category Cards */
.modern-category-card[b-c1b9umnuj4] {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07);
    margin-bottom: 2rem;
    padding: 2rem;
    border: 1px solid #f0f0f0;
}

.category-header-modern[b-c1b9umnuj4] {
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #f5f5f5;
}

/* Category Image Container */
.category-image-container[b-c1b9umnuj4] {
    position: relative;
    width: 80px;
    height: 80px;
    flex-shrink: 0;
}

.category-image-box[b-c1b9umnuj4],
.category-image-placeholder[b-c1b9umnuj4] {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
}

.category-img[b-c1b9umnuj4] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.category-image-container .category-image-placeholder[b-c1b9umnuj4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
    border: 2px dashed #ddd;
    gap: 4px;
    transition: all 0.2s;
}

.category-image-container .category-image-placeholder span[b-c1b9umnuj4] {
    font-size: 0.65rem;
    color: #999;
}

.category-image-container .category-image-placeholder:hover[b-c1b9umnuj4] {
    border-color: var(--theme-primary, #C20004);
    background: #fafafa;
}

.category-image-box:hover .image-overlay[b-c1b9umnuj4] {
    opacity: 1;
}

/* Category Image Actions */
.category-image-actions[b-c1b9umnuj4] {
    position: absolute;
    top: 4px;
    right: 4px;
    display: flex;
    gap: 4px;
    z-index: 10;
}

.product-image-actions[b-c1b9umnuj4] {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    gap: 4px;
    z-index: 10;
}

.category-image-remove-btn[b-c1b9umnuj4],
.product-image-remove-btn[b-c1b9umnuj4] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    background: #dc3545 !important;
    color: white !important;
    border: 2px solid #fff !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.category-image-remove-btn *[b-c1b9umnuj4],
.category-image-remove-btn svg[b-c1b9umnuj4],
.category-image-remove-btn fluent-icon[b-c1b9umnuj4],
.category-image-remove-btn .fluent-icon[b-c1b9umnuj4],
.category-image-remove-btn fluent-icon svg[b-c1b9umnuj4],
.category-image-remove-btn .fluent-icon svg[b-c1b9umnuj4],
.product-image-remove-btn *[b-c1b9umnuj4],
.product-image-remove-btn svg[b-c1b9umnuj4],
.product-image-remove-btn fluent-icon[b-c1b9umnuj4],
.product-image-remove-btn .fluent-icon[b-c1b9umnuj4],
.product-image-remove-btn fluent-icon svg[b-c1b9umnuj4],
.product-image-remove-btn .fluent-icon svg[b-c1b9umnuj4] {
    color: white !important;
    fill: white !important;
    stroke: white !important;
}

[b-c1b9umnuj4] .category-image-remove-btn,
[b-c1b9umnuj4] .category-image-remove-btn *,
[b-c1b9umnuj4] .category-image-remove-btn svg,
[b-c1b9umnuj4] .category-image-remove-btn fluent-icon,
[b-c1b9umnuj4] .category-image-remove-btn .fluent-icon,
[b-c1b9umnuj4] .product-image-remove-btn,
[b-c1b9umnuj4] .product-image-remove-btn *,
[b-c1b9umnuj4] .product-image-remove-btn svg,
[b-c1b9umnuj4] .product-image-remove-btn fluent-icon,
[b-c1b9umnuj4] .product-image-remove-btn .fluent-icon {
    color: white !important;
    fill: white !important;
    stroke: white !important;
}

.category-image-remove-btn:hover[b-c1b9umnuj4],
.product-image-remove-btn:hover[b-c1b9umnuj4] {
    background: #c82333 !important;
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.category-title-section[b-c1b9umnuj4] {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 1rem;
    flex: 1;
}

.category-icon[b-c1b9umnuj4] {
    background: #C20004;
    color: white;
    padding: 0.75rem;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.category-info[b-c1b9umnuj4] {
    flex: 1;
}

.category-title[b-c1b9umnuj4] {
    font-size: 1.5rem;
    font-weight: 600;
    color: #333;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 0.25rem 0;
    outline: none;
    transition: border-color 0.2s ease;
    width: 100%;
    min-width: 250px;
}

.category-title:focus[b-c1b9umnuj4] {
    border-bottom-color: #C20004;
}

.category-subtitle[b-c1b9umnuj4] {
    font-size: 1rem;
    color: #666;
    background: transparent;
    border: none;
    border-bottom: 1px solid transparent;
    padding: 0.25rem 0;
    outline: none;
    transition: border-color 0.2s ease;
    width: 100%;
    margin-top: 0.5rem;
}

.category-subtitle:focus[b-c1b9umnuj4] {
    border-bottom-color: #C20004;
}

.category-remove-btn[b-c1b9umnuj4] {
    background: white;
    color: var(--theme-primary, #C20004);
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.category-remove-btn:hover[b-c1b9umnuj4] {
    background: var(--theme-primary, #C20004);
    filter: brightness(0.9);
}

/* Product Details */
.product-details[b-c1b9umnuj4] {
    flex: 1;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.product-title[b-c1b9umnuj4] {
    font-size: 1.1rem;
    font-weight: 600;
    color: #333;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 0.25rem 0;
    outline: none;
    transition: border-color 0.2s ease;
    margin-bottom: 0.5rem;
}

.product-title:focus[b-c1b9umnuj4] {
    border-bottom-color: #C20004;
}

.product-description[b-c1b9umnuj4] {
    font-size: 0.9rem;
    color: #666;
    background: transparent;
    border: none;
    border-bottom: 1px solid transparent;
    padding: 0.25rem 0;
    outline: none;
    resize: none;
    min-height: 40px;
    transition: border-color 0.2s ease;
    margin-bottom: 1rem;
}

.product-description:focus[b-c1b9umnuj4] {
    border-bottom-color: #C20004;
}

.product-footer[b-c1b9umnuj4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
}

.price-box[b-c1b9umnuj4] {
    display: flex;
    align-items: center;
    background: #f8f9fa;
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    border: 1px solid #dee2e6;
}

.currency-symbol[b-c1b9umnuj4] {
    font-weight: bold;
    color: #C20004;
    margin-right: 0.25rem;
}

.price-value[b-c1b9umnuj4] {
    background: transparent;
    border: none;
    outline: none;
    font-weight: 600;
    color: #333;
    width: 60px;
    text-align: right;
}

.product-actions[b-c1b9umnuj4] {
    display: flex;
    gap: 0.25rem;
}

.action-btn[b-c1b9umnuj4] {
    background: #6c757d;
    color: white;
    border: none;
    border-radius: 6px;
    padding: 0.375rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.action-btn:hover[b-c1b9umnuj4] {
    background: #5a6268;
}

.action-btn.delete[b-c1b9umnuj4] {
    background: #dc3545;
}

.action-btn.delete:hover[b-c1b9umnuj4] {
    background: #c82333;
}

/* Product Image Section */
.product-image-section[b-c1b9umnuj4] {
    width: 160px;
    height: 140px;
    position: relative;
    background: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.product-image-wrapper[b-c1b9umnuj4] {
    width: 100%;
    height: 100%;
    position: relative;
}

.product-image-wrapper img[b-c1b9umnuj4] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
}

.image-overlay[b-c1b9umnuj4] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
    cursor: pointer;
}

.product-image-wrapper:hover .image-overlay[b-c1b9umnuj4] {
    opacity: 1;
}

.image-change-btn[b-c1b9umnuj4] {
    background: #C20004;
    color: white;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.image-upload-area[b-c1b9umnuj4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border: 2px dashed #ccc;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #666;
}

.image-upload-area:hover[b-c1b9umnuj4] {
    border-color: #C20004;
    color: #C20004;
}

/* Image Shape Classes */
.square[b-c1b9umnuj4] {
    border-radius: 0;
}

.rounded[b-c1b9umnuj4] {
    border-radius: 8px;
}

.circle[b-c1b9umnuj4] {
    border-radius: 50%;
    width: 120px;
    height: 120px;
    margin: 10px auto;
}

/* Button Styles */
.banner-upload-btn[b-c1b9umnuj4],
.action-btn.secondary[b-c1b9umnuj4] {
    background: #6c757d;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 0.5rem 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: background-color 0.2s ease;
}

.banner-upload-btn:hover[b-c1b9umnuj4],
.action-btn.secondary:hover[b-c1b9umnuj4] {
    background: #5a6268;
}

/* Banner Upload Placeholder */
.banner-upload-placeholder[b-c1b9umnuj4] {
    background: rgba(108, 117, 125, 0.9);
    color: white;
    border: 2px dashed rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    padding: 0.5rem 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
}

.banner-upload-placeholder:hover[b-c1b9umnuj4] {
    background: rgba(90, 98, 104, 0.95);
    border-color: rgba(255, 255, 255, 0.6);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.action-btn.danger[b-c1b9umnuj4] {
    background: #dc3545;
}

.action-btn.danger:hover[b-c1b9umnuj4] {
    background: #c82333;
}

/* Editor Layout */
.menu-editor-container[b-c1b9umnuj4] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background: #f8f9fa;
    overflow: hidden;
}

/* Content area below toolbar */
.editor-content[b-c1b9umnuj4] {
    display: flex;
    flex: 1;
    overflow: hidden;
}

.editor-toolbar[b-c1b9umnuj4] {
    flex-shrink: 0;
    background: white;
    padding: 1rem 2rem;
    border-bottom: 1px solid #e9ecef;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    z-index: 5;
    min-height: 80px;
    display: flex;
    align-items: center;
}

.editor-sidebar[b-c1b9umnuj4] {
    flex-shrink: 0;
    width: 320px;
    background: white;
    overflow-y: auto;
    padding: 12px;
    transition: all 0.3s ease;
    border-right: 1px solid #e9ecef;
}

.editor-sidebar.collapsed[b-c1b9umnuj4] {
    width: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    border-right: none;
}

.editor-main[b-c1b9umnuj4] {
    flex: 1;
    background: #f8f9fa;
    overflow-y: auto;
    position: relative;
}

.loading-container[b-c1b9umnuj4] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.menu-builder[b-c1b9umnuj4] {
    min-height: 100%;
    background: white;
    margin: 1rem;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    overflow: hidden;
}

/* Form Groups */
.form-group[b-c1b9umnuj4] {
    margin-bottom: 1.5rem;
}

.color-group[b-c1b9umnuj4] {
    margin-bottom: 1rem;
}

.color-input-group[b-c1b9umnuj4] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-top: 0.5rem;
}

.color-picker[b-c1b9umnuj4] {
    width: 40px;
    height: 32px;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
}

/* Background controls */
.background-image-controls[b-c1b9umnuj4] {
    text-align: center;
    padding: 1rem;
    margin-bottom: 1rem;
}

/* Filter and nav buttons */
.filter-btn[b-c1b9umnuj4], .nav-actions button[b-c1b9umnuj4] {
    background: #6c757d;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 0.5rem 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: background-color 0.2s ease;
}

.filter-btn:hover[b-c1b9umnuj4], .nav-actions button:hover[b-c1b9umnuj4] {
    background: #5a6268;
}

/* Header actions */
.header-actions[b-c1b9umnuj4] {
    display: flex;
    gap: 0.5rem;
}

.banner-actions[b-c1b9umnuj4] {
    display: flex;
    gap: 0.25rem;
}

.logo-actions[b-c1b9umnuj4] {
    position: absolute;
    top: 5px;
    right: 5px;
    opacity: 0;
    transition: opacity 0.2s ease;
    display: flex;
    gap: 0.25rem;
}

.logo-container:hover .logo-actions[b-c1b9umnuj4] {
    opacity: 1;
}

.logo-upload-placeholder[b-c1b9umnuj4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(108, 117, 125, 0.9);
    border: 2px dashed rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.7);
    min-height: 100px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.logo-upload-placeholder:hover[b-c1b9umnuj4] {
    border-color: rgba(255, 255, 255, 0.6);
    color: rgba(255, 255, 255, 0.9);
    background-color: rgba(255, 255, 255, 0.05);
    transform: translateY(-2px);
}

.logo-upload-placeholder span[b-c1b9umnuj4] {
    margin-top: 0.5rem;
    font-size: 0.9rem;
}

.logo-upload-section[b-c1b9umnuj4] {
    margin-top: 0.5rem;
}

.logo-upload-section.has-logo[b-c1b9umnuj4] {
    opacity: 0.8;
}


.edit-btn[b-c1b9umnuj4] {
    background: rgba(0,0,0,0.7);
    color: white;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* Add category/product buttons */
.add-category-btn[b-c1b9umnuj4] {
    background: #28a745;
    color: white;
    border: none;
    border-radius: 12px;
    padding: 1rem 2rem;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin: 2rem auto;
    transition: background-color 0.2s ease;
}

.add-category-btn:hover[b-c1b9umnuj4] {
    background: #218838;
}

/* Responsive */
@media (max-width: 1200px) {
    .editor-sidebar[b-c1b9umnuj4] {
        width: 280px;
    }
}

@media (max-width: 1024px) {
    .editor-content[b-c1b9umnuj4] {
        flex-direction: column;
    }
    
    .editor-sidebar[b-c1b9umnuj4] {
        width: 100%;
        max-height: 300px;
        border-right: none;
        border-bottom: 1px solid #e9ecef;
    }
    
    .editor-sidebar.collapsed[b-c1b9umnuj4] {
        max-height: 0;
        padding: 0;
        overflow: hidden;
    }
    
    .editor-main[b-c1b9umnuj4] {
        flex: 1;
        min-height: 0;
    }
}

/* Sidebar Header Styles */
.sidebar-header[b-c1b9umnuj4] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: 1px solid #e0e0e0;
}

.sidebar-header fluent-label[b-c1b9umnuj4] {
    margin: 0;
    font-weight: 600;
    color: #333;
}

/* Legacy accordion styles - can be removed */
.accordion-header[b-c1b9umnuj4] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    color: #333;
    font-size: 1rem;
}

.accordion-content[b-c1b9umnuj4] {
    padding: 20px 16px 16px 16px;
    border-top: 1px solid #e0e0e0;
}

/* Loading Container */
.loading-container[b-c1b9umnuj4] {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: #FAFAFA;
}

/* Custom accordion styling */
[b-c1b9umnuj4] fluent-accordion-item {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 8px;
    background: white;
}

[b-c1b9umnuj4] fluent-accordion-item[expanded] {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

[b-c1b9umnuj4] fluent-accordion-item::part(heading) {
    background-color: #f8f9fa;
    padding: 16px;
    transition: background-color 0.2s ease;
}

[b-c1b9umnuj4] fluent-accordion-item[expanded]::part(heading) {
    background-color: #e7f3ff;
    border-bottom: 1px solid #007acc;
}

[b-c1b9umnuj4] fluent-accordion-item::part(content) {
    padding: 0;
    background-color: white;
    border-top: 1px solid #e0e0e0;
}

[b-c1b9umnuj4] fluent-accordion-item::part(button) {
    width: 100%;
    text-align: left;
}

 
/* /Components/Pages/Menus/CustomerKiosk.razor.rz.scp.css */
/* ========================================
   Kiosk Container - Vertical Layout
   ======================================== */

.kiosk-container[b-i60t4vnl3h] {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: #f8f9fa;
    font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    position: relative;
}

.kiosk-screen[b-i60t4vnl3h] {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    animation: fadeIn-b-i60t4vnl3h 0.3s ease-in-out;
}

@keyframes fadeIn-b-i60t4vnl3h {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* ========================================
   Language Selection Screen
   ======================================== */

.language-screen[b-i60t4vnl3h] {
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.language-background-wrapper[b-i60t4vnl3h] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.language-background-image[b-i60t4vnl3h] {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    object-fit: cover;
}

.language-background-blur[b-i60t4vnl3h] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    background: rgba(102, 126, 234, 0.25);
}

.language-content[b-i60t4vnl3h] {
    text-align: center;
    color: white;
    max-width: 700px;
    padding: 60px;
    position: relative;
    z-index: 1;
}

.kiosk-logo-lg[b-i60t4vnl3h] {
    max-width: 180px;
    max-height: 180px;
    margin-bottom: 48px;
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.2));
}

.kiosk-brand-lg[b-i60t4vnl3h] {
    font-size: 56px;
    font-weight: 800;
    margin-bottom: 48px;
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.language-title[b-i60t4vnl3h] {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 48px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.language-options[b-i60t4vnl3h] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 48px;
}

.language-option[b-i60t4vnl3h] {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    color: white;
    font-size: 20px;
    font-weight: 600;
}

.language-option:hover[b-i60t4vnl3h] {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-2px);
}

.language-option.selected[b-i60t4vnl3h] {
    background: rgba(255, 255, 255, 0.95);
    color: var(--theme-primary, #667eea);
    border-color: white;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.language-flag[b-i60t4vnl3h] {
    font-size: 32px;
}

.language-name[b-i60t4vnl3h] {
    flex: 1;
    text-align: left;
}

.continue-button[b-i60t4vnl3h] {
    background: white;
    color: var(--theme-primary, #667eea);
    border: none;
    border-radius: 50px;
    padding: 20px 60px;
    font-size: 24px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.continue-button-text[b-i60t4vnl3h] {
    line-height: 1;
    display: inline-flex;
    align-items: center;
}

.continue-button:hover:not(:disabled)[b-i60t4vnl3h] {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
}

.continue-button:disabled[b-i60t4vnl3h] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ========================================
   Fixed Header
   ======================================== */

.kiosk-fixed-header[b-i60t4vnl3h] {
    background: var(--theme-primary, #667eea);
    padding: 20px 32px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}

.header-content[b-i60t4vnl3h] {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    align-items: center;
    gap: 24px;
}

.header-left[b-i60t4vnl3h] {
    justify-self: start;
}

.header-center[b-i60t4vnl3h] {
    text-align: center;
}

.header-right[b-i60t4vnl3h] {
    justify-self: end;
}

.header-logo[b-i60t4vnl3h] {
    height: 60px;
}

.header-brand[b-i60t4vnl3h] {
    font-size: 28px;
    font-weight: 800;
    color: white;
}

.header-title[b-i60t4vnl3h] {
    font-size: 32px;
    font-weight: 700;
    color: white;
    margin: 0;
}

.header-btn[b-i60t4vnl3h] {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 16px;
    padding: 12px 24px;
    color: white;
    font-size: 18px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.header-btn:hover[b-i60t4vnl3h] {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

/* Language Switcher */
.header-right[b-i60t4vnl3h] {
    position: relative;
}

.language-switcher-wrapper[b-i60t4vnl3h] {
    position: relative;
}

.language-switcher-btn[b-i60t4vnl3h] {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    padding: 10px 16px;
    color: white;
    font-size: 18px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.language-switcher-btn:hover[b-i60t4vnl3h] {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

.language-flag-small[b-i60t4vnl3h] {
    font-size: 24px;
    line-height: 1;
}

.language-dropdown[b-i60t4vnl3h] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    min-width: 200px;
    z-index: 1000;
    animation: dropdownSlide-b-i60t4vnl3h 0.2s ease-out;
}

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

.language-dropdown-item[b-i60t4vnl3h] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    width: 100%;
    border: none;
    background: white;
    color: #333;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: left;
}

.language-dropdown-item:hover[b-i60t4vnl3h] {
    background: #f5f5f5;
}

.language-dropdown-item.selected[b-i60t4vnl3h] {
    background: rgba(var(--theme-primary-rgb, 102, 126, 234), 0.1);
    color: var(--theme-primary, #667eea);
}

/* ========================================
   Category Selection Grid
   ======================================== */

.category-grid-container[b-i60t4vnl3h] {
    flex: 1;
    overflow-y: auto;
    padding: 40px;
}

.category-grid[b-i60t4vnl3h] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
    max-width: 1400px;
    margin: 0 auto;
}

.category-card[b-i60t4vnl3h] {
    background: white;
    border: none;
    border-radius: 24px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
}

.category-card:hover[b-i60t4vnl3h] {
    transform: translateY(-8px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
}

.category-image-wrapper[b-i60t4vnl3h] {
    width: 100%;
    height: 200px;
    overflow: hidden;
    background: #f5f5f5;
}

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

.category-image-placeholder[b-i60t4vnl3h] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f5f5f5 0%, #e0e0e0 100%);
}

.category-info[b-i60t4vnl3h] {
    padding: 20px;
    text-align: center;
}

.category-name[b-i60t4vnl3h] {
    font-size: 22px;
    font-weight: 700;
    color: #333;
    margin: 0 0 8px 0;
}

.category-count[b-i60t4vnl3h] {
    font-size: 14px;
    color: #666;
}

/* ========================================
   Horizontal Category Slider (KFC Style)
   ======================================== */

.category-slider-container[b-i60t4vnl3h] {
    background: white;
    border-bottom: 2px solid #e0e0e0;
    padding: 16px 24px;
    overflow-x: auto;
    overflow-y: hidden;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.category-slider[b-i60t4vnl3h] {
    display: flex;
    gap: 12px;
    min-width: min-content;
}

.category-pill[b-i60t4vnl3h] {
    background: #f5f5f5;
    border: 2px solid transparent;
    border-radius: 16px;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.category-pill:hover[b-i60t4vnl3h] {
    background: #e8e8e8;
    transform: translateY(-2px);
}

.category-pill.active[b-i60t4vnl3h] {
    background: var(--theme-primary, #667eea);
    border-color: var(--theme-primary, #667eea);
    box-shadow: 0 4px 12px rgba(var(--theme-primary-rgb, 102, 126, 234), 0.3);
}

.category-pill.active .category-pill-name[b-i60t4vnl3h] {
    color: white;
}

.category-pill-image[b-i60t4vnl3h] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    overflow: hidden;
    background: white;
    flex-shrink: 0;
}

.category-pill-image img[b-i60t4vnl3h] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.category-pill-placeholder[b-i60t4vnl3h] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f8f8;
}

.category-pill-name[b-i60t4vnl3h] {
    font-size: 16px;
    font-weight: 700;
    color: #333;
    transition: color 0.3s ease;
}

/* ========================================
   Product List Grid
   ======================================== */

.products-grid-container[b-i60t4vnl3h] {
    flex: 1;
    overflow-y: auto;
    padding: 24px 32px;
    padding-bottom: 140px; /* Space for floating bottom bar */
}

/* When sidebar cart is active - default on right side */
.products-grid-with-sidebar-cart[b-i60t4vnl3h] {
    padding-right: 420px !important; /* 380px sidebar width + 40px margin */
    padding-bottom: 40px !important; /* No floating bar when sidebar cart is active */
}

/* When sidebar cart is on the left (category sidebar is on left, cart goes right) */
.sidebar-left ~ .products-grid-with-sidebar-cart[b-i60t4vnl3h] {
    padding-left: 420px !important;
    padding-right: 32px !important;
}

.products-grid-kiosk[b-i60t4vnl3h] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
    max-width: 1400px;
    margin: 0 auto;
}

.product-card-kiosk[b-i60t4vnl3h] {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
    cursor: pointer;
}

.product-card-kiosk:hover[b-i60t4vnl3h] {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    transform: translateY(-4px);
}

.product-card-kiosk:active[b-i60t4vnl3h] {
    transform: translateY(-2px);
}

.product-image-section[b-i60t4vnl3h] {
    width: 100%;
    height: 180px;
    overflow: hidden;
    background: #f8f8f8;
}

.product-image-kiosk[b-i60t4vnl3h] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.product-card-kiosk:hover .product-image-kiosk[b-i60t4vnl3h] {
    transform: scale(1.05);
}

.product-image-placeholder-kiosk[b-i60t4vnl3h] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
}

.product-details-section[b-i60t4vnl3h] {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.product-info-kiosk[b-i60t4vnl3h] {
    flex: 1;
}

.product-name-kiosk[b-i60t4vnl3h] {
    font-size: 18px;
    font-weight: 700;
    color: #333;
    margin: 0 0 8px 0;
}

.product-desc-kiosk[b-i60t4vnl3h] {
    font-size: 14px;
    color: #666;
    margin: 0 0 8px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-price-kiosk[b-i60t4vnl3h] {
    font-size: 20px;
    font-weight: 800;
    color: var(--theme-primary, #667eea);
}

.product-add-indicator[b-i60t4vnl3h] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    background: #f0f4ff;
    border-radius: 12px;
    color: #667eea;
    font-size: 16px;
    font-weight: 700;
    transition: all 0.3s ease;
}

.product-quantity-controls[b-i60t4vnl3h] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    background: #f8f8f8;
    border-radius: 12px;
    padding: 8px 16px;
}

.qty-ctrl-btn[b-i60t4vnl3h] {
    background: var(--theme-primary, #667eea);
    border: none;
    border-radius: 10px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.qty-ctrl-btn:hover[b-i60t4vnl3h] {
    background: rgba(var(--theme-primary-rgb, 102, 126, 234), 0.85);
    transform: scale(1.1);
}

.qty-display[b-i60t4vnl3h] {
    font-size: 24px;
    font-weight: 700;
    color: #333;
    min-width: 40px;
    text-align: center;
}

.product-add-button[b-i60t4vnl3h] {
    background: #667eea;
    border: none;
    border-radius: 12px;
    padding: 12px 24px;
    color: white;
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.product-add-button:hover[b-i60t4vnl3h] {
    background: #5568d3;
    transform: translateY(-2px);
}

/* ========================================
   Floating Cart Summary (Category Screen)
   ======================================== */

.floating-cart-summary[b-i60t4vnl3h] {
    position: fixed;
    bottom: 24px;
    right: 24px;
    left: 24px;
    max-width: 500px;
    margin: 0 auto;
    background: var(--theme-primary, #667eea);
    border-radius: 20px;
    padding: 20px 24px;
    box-shadow: 0 8px 32px rgba(var(--theme-primary-rgb, 102, 126, 234), 0.4);
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 100;
}

.floating-cart-summary:hover[b-i60t4vnl3h] {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(var(--theme-primary-rgb, 102, 126, 234), 0.5);
}

.cart-summary-content[b-i60t4vnl3h] {
    display: flex;
    align-items: center;
    gap: 16px;
    color: white;
}

.cart-summary-icon[b-i60t4vnl3h] {
    position: relative;
}

.cart-badge[b-i60t4vnl3h] {
    position: absolute;
    top: -8px;
    right: -8px;
    background: #ff4757;
    color: white;
    border-radius: 12px;
    padding: 4px 8px;
    font-size: 12px;
    font-weight: 700;
    min-width: 24px;
    text-align: center;
}

.cart-summary-details[b-i60t4vnl3h] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cart-summary-label[b-i60t4vnl3h] {
    font-size: 14px;
    opacity: 0.9;
}

.cart-summary-price[b-i60t4vnl3h] {
    font-size: 20px;
    font-weight: 800;
}

/* ========================================
   Floating Bottom Bar (Product Screen)
   ======================================== */

.floating-bottom-bar[b-i60t4vnl3h] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    padding: 20px 32px;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.12);
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 20px;
    align-items: stretch;
    z-index: 100;
}

.cancel-btn-bottom[b-i60t4vnl3h] {
    background: white;
    border: 3px solid #dc2626;
    border-radius: 20px;
    padding: 20px;
    color: #dc2626;
    font-size: 18px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.15);
}

.cancel-btn-bottom:hover[b-i60t4vnl3h] {
    background: #dc2626;
    color: white;
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(220, 38, 38, 0.35);
}

.cancel-btn-bottom:active[b-i60t4vnl3h] {
    transform: translateY(-1px);
}

.cart-summary-bottom[b-i60t4vnl3h] {
    background: var(--theme-primary, #667eea);
    border: none;
    border-radius: 20px;
    padding: 20px 28px;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
    box-shadow: 0 4px 16px rgba(var(--theme-primary-rgb, 102, 126, 234), 0.3);
}

.cart-summary-bottom:hover[b-i60t4vnl3h] {
    background: rgba(var(--theme-primary-rgb, 102, 126, 234), 0.85);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(var(--theme-primary-rgb, 102, 126, 234), 0.45);
}

.cart-summary-bottom:active[b-i60t4vnl3h] {
    transform: translateY(-1px);
}

.cart-summary-bottom .cart-summary-content[b-i60t4vnl3h] {
    justify-content: space-between;
}

.cart-summary-bottom .cart-summary-label[b-i60t4vnl3h] {
    font-size: 16px;
}

.cart-summary-bottom .cart-summary-price[b-i60t4vnl3h] {
    font-size: 22px;
    font-weight: 800;
}

.cart-placeholder-bottom[b-i60t4vnl3h] {
    background: #f5f5f5;
    border: 3px dashed #d0d0d0;
    border-radius: 20px;
    padding: 20px 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #999;
    font-size: 18px;
    font-weight: 600;
}

/* ========================================
   Cart Screen
   ======================================== */

.cart-content-area[b-i60t4vnl3h] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.cart-items-section[b-i60t4vnl3h] {
    flex: 1;
    overflow-y: auto;
    padding: 24px 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cart-item-card[b-i60t4vnl3h] {
    background: white;
    border-radius: 16px;
    padding: 16px;
    display: grid;
    grid-template-columns: 80px 1fr auto;
    gap: 16px;
    align-items: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.cart-item-image[b-i60t4vnl3h] {
    width: 80px;
    height: 80px;
    border-radius: 12px;
    overflow: hidden;
    background: #f5f5f5;
}

.cart-item-image img[b-i60t4vnl3h] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cart-item-placeholder[b-i60t4vnl3h] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e8e8e8;
}

.cart-item-details[b-i60t4vnl3h] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cart-item-name[b-i60t4vnl3h] {
    font-size: 18px;
    font-weight: 700;
    color: #333;
    margin: 0;
}

.cart-item-price[b-i60t4vnl3h] {
    font-size: 14px;
    color: #666;
}

.cart-item-controls[b-i60t4vnl3h] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
}

.cart-item-quantity[b-i60t4vnl3h] {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #f8f8f8;
    border-radius: 10px;
    padding: 8px 12px;
}

.qty-btn-cart[b-i60t4vnl3h] {
    background: var(--theme-primary, #667eea);
    border: none;
    border-radius: 8px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.qty-btn-cart:hover[b-i60t4vnl3h] {
    background: rgba(var(--theme-primary-rgb, 102, 126, 234), 0.85);
    transform: scale(1.1);
}

.qty-text[b-i60t4vnl3h] {
    font-size: 18px;
    font-weight: 700;
    color: #333;
    min-width: 32px;
    text-align: center;
}

.cart-item-total[b-i60t4vnl3h] {
    font-size: 22px;
    font-weight: 800;
    color: var(--theme-primary, #667eea);
}

.cart-summary-section[b-i60t4vnl3h] {
    background: white;
    padding: 24px 32px;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08);
    flex-shrink: 0;
}

.summary-row[b-i60t4vnl3h] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 18px;
    color: #666;
    margin-bottom: 12px;
}

.summary-row.summary-total[b-i60t4vnl3h] {
    font-size: 28px;
    font-weight: 800;
    color: #333;
    padding-top: 16px;
    margin-top: 16px;
    border-top: 2px solid #e0e0e0;
}

.summary-value[b-i60t4vnl3h] {
    font-weight: 600;
    color: #333;
}

.summary-value-total[b-i60t4vnl3h] {
    font-weight: 800;
    color: var(--theme-primary, #667eea);
}

.checkout-button[b-i60t4vnl3h] {
    background: var(--theme-primary, #667eea);
    border: none;
    border-radius: 16px;
    padding: 20px 40px;
    color: white;
    font-size: 22px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
    margin-top: 16px;
}

.checkout-button:hover[b-i60t4vnl3h] {
    background: rgba(var(--theme-primary-rgb, 102, 126, 234), 0.85);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(var(--theme-primary-rgb, 102, 126, 234), 0.4);
}

/* ========================================
   Payment Screen
   ======================================== */

.payment-content-area[b-i60t4vnl3h] {
    flex: 1;
    overflow-y: auto;
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.payment-methods-grid[b-i60t4vnl3h] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto;
}

.payment-method-card[b-i60t4vnl3h] {
    background: white;
    border: 3px solid #e0e0e0;
    border-radius: 24px;
    padding: 48px 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.payment-method-card:hover[b-i60t4vnl3h] {
    border-color: var(--theme-primary, #667eea);
    transform: translateY(-8px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
}

.payment-method-title[b-i60t4vnl3h] {
    font-size: 24px;
    font-weight: 700;
    color: #333;
}

.payment-method-subtitle[b-i60t4vnl3h] {
    font-size: 14px;
    color: #666;
}

.payment-total-display[b-i60t4vnl3h] {
    background: white;
    border-radius: 20px;
    padding: 32px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    max-width: 400px;
    margin: 0 auto;
}

.payment-total-label[b-i60t4vnl3h] {
    font-size: 18px;
    color: #666;
    display: block;
    margin-bottom: 12px;
}

.payment-total-amount[b-i60t4vnl3h] {
    font-size: 48px;
    font-weight: 800;
    color: var(--theme-primary, #667eea);
}

/* ========================================
   Payment Processing Screen
   ======================================== */

.payment-processing-screen[b-i60t4vnl3h] {
    justify-content: center;
    align-items: center;
    padding: 40px;
}

.processing-content-with-summary[b-i60t4vnl3h] {
    display: flex;
    gap: 40px;
    max-width: 1200px;
    align-items: center;
    justify-content: center;
}

.order-summary-card[b-i60t4vnl3h] {
    background: white;
    border-radius: 24px;
    padding: 24px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    min-width: 350px;
    max-width: 400px;
    max-height: 600px;
    display: flex;
    flex-direction: column;
}

.order-summary-header[b-i60t4vnl3h] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 2px solid #e0e0e0;
    flex-shrink: 0;
}

.order-summary-header h3[b-i60t4vnl3h] {
    font-size: 20px;
    font-weight: 700;
    color: #333;
    margin: 0;
}

.order-item-count[b-i60t4vnl3h] {
    font-size: 14px;
    color: #666;
    background: #f0f0f0;
    padding: 6px 12px;
    border-radius: 12px;
    font-weight: 600;
}

.order-summary-items[b-i60t4vnl3h] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
    flex: 1;
    overflow-y: auto;
    padding-right: 8px;
    min-height: 0;
}

.order-summary-item[b-i60t4vnl3h] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: #f8f8f8;
    border-radius: 12px;
}

.order-summary-item-image[b-i60t4vnl3h] {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    overflow: hidden;
    background: white;
    flex-shrink: 0;
}

.order-summary-item-image img[b-i60t4vnl3h] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.order-summary-item-placeholder[b-i60t4vnl3h] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e8e8e8;
}

.order-summary-item-details[b-i60t4vnl3h] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.order-summary-item-name[b-i60t4vnl3h] {
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

.order-summary-item-qty[b-i60t4vnl3h] {
    font-size: 12px;
    color: #666;
}

.order-summary-item-price[b-i60t4vnl3h] {
    font-size: 14px;
    font-weight: 700;
    color: var(--theme-primary, #667eea);
}

.order-summary-total[b-i60t4vnl3h] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 16px;
    border-top: 2px solid #e0e0e0;
    font-size: 18px;
    font-weight: 700;
    flex-shrink: 0;
}

.order-summary-total-price[b-i60t4vnl3h] {
    color: var(--theme-primary, #667eea);
    font-size: 24px;
}

.processing-content[b-i60t4vnl3h] {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    flex: 1;
}

.processing-content h2[b-i60t4vnl3h] {
    font-size: 36px;
    font-weight: 700;
    color: #333;
}

.processing-instruction[b-i60t4vnl3h] {
    font-size: 20px;
    color: #666;
}

.processing-animation[b-i60t4vnl3h] {
    margin: 24px 0;
}

.amount-display-box[b-i60t4vnl3h] {
    background: #f8f8f8;
    border-radius: 20px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.amount-label[b-i60t4vnl3h] {
    font-size: 18px;
    color: #666;
}

.amount-value[b-i60t4vnl3h] {
    font-size: 48px;
    font-weight: 800;
    color: var(--theme-primary, #667eea);
}

.qr-display-box[b-i60t4vnl3h] {
    width: 280px;
    height: 280px;
    background: white;
    border: 4px solid #e0e0e0;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.qr-pattern[b-i60t4vnl3h] {
    width: 240px;
    height: 240px;
    background:
        linear-gradient(90deg, #333 10%, transparent 10%),
        linear-gradient(#333 10%, transparent 10%);
    background-size: 24px 24px;
}

.code-input-container[b-i60t4vnl3h] {
    width: 100%;
    max-width: 400px;
}

.code-input-field[b-i60t4vnl3h] {
    width: 100%;
    padding: 24px;
    font-size: 36px;
    font-weight: 700;
    text-align: center;
    border: 3px solid #e0e0e0;
    border-radius: 16px;
    letter-spacing: 16px;
    font-family: 'Courier New', monospace;
}

.code-input-field:focus[b-i60t4vnl3h] {
    outline: none;
    border-color: var(--theme-primary, #667eea);
}

/* ========================================
   Order Complete Screen - Redesigned
   ======================================== */

.order-complete-screen[b-i60t4vnl3h] {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
}

/* Success Celebration Background */
.success-celebration[b-i60t4vnl3h] {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    overflow: hidden;
}

.celebration-circle[b-i60t4vnl3h] {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    animation: expandCircle-b-i60t4vnl3h 3s ease-out infinite;
}

.circle-1[b-i60t4vnl3h] {
    width: 300px;
    height: 300px;
    top: -150px;
    left: -150px;
    animation-delay: 0s;
}

.circle-2[b-i60t4vnl3h] {
    width: 400px;
    height: 400px;
    bottom: -200px;
    right: -200px;
    animation-delay: 1s;
}

.circle-3[b-i60t4vnl3h] {
    width: 250px;
    height: 250px;
    top: 50%;
    left: -125px;
    animation-delay: 2s;
}

@keyframes expandCircle-b-i60t4vnl3h {
    0% {
        transform: scale(0);
        opacity: 0.5;
    }
    50% {
        opacity: 0.2;
    }
    100% {
        transform: scale(2);
        opacity: 0;
    }
}

/* Confetti Animation */
.confetti[b-i60t4vnl3h] {
    position: absolute;
    font-size: 48px;
    animation: confettiFall-b-i60t4vnl3h 4s ease-out infinite;
    opacity: 0;
}

.confetti-1[b-i60t4vnl3h] { top: -10%; left: 10%; animation-delay: 0.1s; }
.confetti-2[b-i60t4vnl3h] { top: -10%; left: 30%; animation-delay: 0.3s; }
.confetti-3[b-i60t4vnl3h] { top: -10%; left: 50%; animation-delay: 0.5s; }
.confetti-4[b-i60t4vnl3h] { top: -10%; left: 70%; animation-delay: 0.7s; }
.confetti-5[b-i60t4vnl3h] { top: -10%; left: 90%; animation-delay: 0.9s; }
.confetti-6[b-i60t4vnl3h] { top: -10%; left: 60%; animation-delay: 1.1s; }

@keyframes confettiFall-b-i60t4vnl3h {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(120vh) rotate(360deg);
        opacity: 0;
    }
}

/* Main Content Container */
.complete-content[b-i60t4vnl3h] {
    text-align: center;
    color: white;
    max-width: 700px;
    padding: 60px 40px;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 36px;
}

/* Success Icon Wrapper */
.success-icon-wrapper[b-i60t4vnl3h] {
    position: relative;
    margin-bottom: 20px;
}

.success-icon-bg[b-i60t4vnl3h] {
    position: absolute;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: successPulse-b-i60t4vnl3h 2s ease-in-out infinite;
}

@keyframes successPulse-b-i60t4vnl3h {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.3;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 0.1;
    }
}

.success-icon-lg[b-i60t4vnl3h] {
    position: relative;
    animation: iconBounce-b-i60t4vnl3h 0.8s ease-out;
}

@keyframes iconBounce-b-i60t4vnl3h {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Success Message */
.success-message[b-i60t4vnl3h] {
    animation: fadeInUp-b-i60t4vnl3h 0.8s ease-out 0.3s both;
}

.complete-title[b-i60t4vnl3h] {
    font-size: 56px;
    font-weight: 900;
    margin: 0 0 12px 0;
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    letter-spacing: -1px;
}

.complete-subtitle[b-i60t4vnl3h] {
    font-size: 28px;
    font-weight: 600;
    margin: 0;
    opacity: 0.95;
}

/* Order Number Container */
.order-number-container[b-i60t4vnl3h] {
    width: 100%;
    animation: fadeInUp-b-i60t4vnl3h 0.8s ease-out 0.5s both;
}

.order-number-card[b-i60t4vnl3h] {
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 32px;
    padding: 40px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

.order-number-header[b-i60t4vnl3h] {
    margin-bottom: 16px;
}

.order-label[b-i60t4vnl3h] {
    font-size: 18px;
    font-weight: 600;
    opacity: 0.9;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.order-number-main[b-i60t4vnl3h] {
    margin: 24px 0;
}

.order-number-display[b-i60t4vnl3h] {
    font-size: 120px;
    font-weight: 900;
    font-family: 'Courier New', monospace;
    line-height: 1;
    text-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    display: inline-block;
    animation: numberPop-b-i60t4vnl3h 0.6s ease-out 0.7s both;
}

@keyframes numberPop-b-i60t4vnl3h {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.order-number-subtext[b-i60t4vnl3h] {
    margin-top: 16px;
}

.order-number-subtext span[b-i60t4vnl3h] {
    font-size: 16px;
    opacity: 0.85;
    font-weight: 500;
}

/* Receipt Details Card */
.receipt-details-card[b-i60t4vnl3h] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 16px;
    font-weight: 600;
    opacity: 0.9;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    padding: 16px 32px;
    border-radius: 20px;
    animation: fadeInUp-b-i60t4vnl3h 0.8s ease-out 0.7s both;
}

/* Order Instructions Card */
.order-instructions-card[b-i60t4vnl3h] {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(15px);
    border-radius: 24px;
    padding: 32px;
    display: flex;
    gap: 20px;
    align-items: center;
    width: 100%;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    animation: fadeInUp-b-i60t4vnl3h 0.8s ease-out 0.9s both;
}

.instruction-icon[b-i60t4vnl3h] {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.instruction-content[b-i60t4vnl3h] {
    flex: 1;
    text-align: left;
}

.instruction-main[b-i60t4vnl3h] {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 12px 0;
    line-height: 1.4;
}

.instruction-secondary[b-i60t4vnl3h] {
    font-size: 16px;
    margin: 0;
    opacity: 0.9;
}

.cash-payment-notice[b-i60t4vnl3h] {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.2);
    padding: 12px 20px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    margin-top: 12px;
}

/* New Order Button */
.btn-new-order[b-i60t4vnl3h] {
    background: white;
    color: var(--theme-primary, #11998e);
    border: none;
    border-radius: 60px;
    padding: 20px 48px;
    font-size: 22px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    cursor: pointer;
    transition: all 0.4s ease;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
    animation: fadeInUp-b-i60t4vnl3h 0.8s ease-out 1.1s both;
}

.btn-new-order:hover[b-i60t4vnl3h] {
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3);
}

.btn-new-order:active[b-i60t4vnl3h] {
    transform: translateY(-2px) scale(1.02);
}

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

/* ========================================
   Error Screen
   ======================================== */

.error-screen[b-i60t4vnl3h] {
    background: linear-gradient(135deg, #f12711 0%, #f5af19 100%);
    justify-content: center;
    align-items: center;
}

.error-content[b-i60t4vnl3h] {
    text-align: center;
    color: white;
    max-width: 600px;
    padding: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

.error-content h2[b-i60t4vnl3h] {
    font-size: 42px;
    font-weight: 700;
}

.error-content p[b-i60t4vnl3h] {
    font-size: 20px;
    opacity: 0.95;
}

/* ========================================
   Empty State
   ======================================== */

.empty-state[b-i60t4vnl3h] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    text-align: center;
    padding: 60px;
}

.empty-state h3[b-i60t4vnl3h] {
    font-size: 32px;
    font-weight: 700;
    color: #333;
}

.empty-state p[b-i60t4vnl3h] {
    font-size: 18px;
    color: #666;
}

/* ========================================
   Common Buttons
   ======================================== */

.btn-primary-lg[b-i60t4vnl3h],
.btn-secondary-lg[b-i60t4vnl3h],
.btn-cancel-lg[b-i60t4vnl3h] {
    border: none;
    border-radius: 50px;
    padding: 20px 60px;
    font-size: 24px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.btn-primary-lg[b-i60t4vnl3h] {
    background: white;
    color: #667eea;
}

.btn-primary-lg:hover:not(:disabled)[b-i60t4vnl3h] {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.btn-primary-lg:disabled[b-i60t4vnl3h] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-secondary-lg[b-i60t4vnl3h] {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.btn-secondary-lg:hover[b-i60t4vnl3h] {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

.btn-cancel-lg[b-i60t4vnl3h] {
    background: #ff4757;
    color: white;
    margin-top: 24px;
}

.btn-cancel-lg:hover[b-i60t4vnl3h] {
    background: #ff3838;
    transform: translateY(-2px);
}

/* ========================================
   Idle Warning Overlay
   ======================================== */

.idle-overlay[b-i60t4vnl3h] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: fadeIn-b-i60t4vnl3h 0.3s ease-in-out;
}

.idle-dialog[b-i60t4vnl3h] {
    background: white;
    border-radius: 32px;
    padding: 60px;
    max-width: 500px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.idle-dialog h3[b-i60t4vnl3h] {
    font-size: 32px;
    font-weight: 700;
    color: #333;
}

.idle-dialog p[b-i60t4vnl3h] {
    font-size: 18px;
    color: #666;
}

.idle-timer[b-i60t4vnl3h] {
    font-size: 64px;
    font-weight: 800;
    color: #ff4757;
    font-family: 'Courier New', monospace;
}

/* ========================================
   Scrollbar Customization
   ======================================== */

*[b-i60t4vnl3h] {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

*[b-i60t4vnl3h]::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

*[b-i60t4vnl3h]::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 20px;
}

*[b-i60t4vnl3h]::-webkit-scrollbar-track {
    background: transparent;
}

/* ========================================
   Category Position Layouts
   ======================================== */

/* Sidebar Layout (Left/Right) */
.content-with-sidebar[b-i60t4vnl3h] {
    flex: 1;
    display: flex;
    overflow: hidden;
}

.content-with-sidebar.sidebar-left[b-i60t4vnl3h] {
    flex-direction: row;
}

.content-with-sidebar.sidebar-right[b-i60t4vnl3h] {
    flex-direction: row-reverse;
}

.category-sidebar[b-i60t4vnl3h] {
    width: 220px;
    background: white;
    border-right: 2px solid #e0e0e0;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.05);
    flex-shrink: 0;
    overflow: hidden;
}

.content-with-sidebar.sidebar-right .category-sidebar[b-i60t4vnl3h] {
    border-right: none;
    border-left: 2px solid #e0e0e0;
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.05);
}

.category-sidebar-inner[b-i60t4vnl3h] {
    height: 100%;
    overflow-y: auto;
    padding: 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.category-sidebar-item[b-i60t4vnl3h] {
    background: #f5f5f5;
    border: 2px solid transparent;
    border-radius: 16px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.category-sidebar-item:hover[b-i60t4vnl3h] {
    background: #e8e8e8;
    transform: translateX(4px);
}

.content-with-sidebar.sidebar-right .category-sidebar-item:hover[b-i60t4vnl3h] {
    transform: translateX(-4px);
}

.category-sidebar-item.active[b-i60t4vnl3h] {
    background: var(--theme-primary, #667eea);
    border-color: var(--theme-primary, #667eea);
    box-shadow: 0 4px 12px rgba(var(--theme-primary-rgb, 102, 126, 234), 0.3);
}

.category-sidebar-item.active .category-sidebar-name[b-i60t4vnl3h] {
    color: white;
}

.category-sidebar-image[b-i60t4vnl3h] {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    overflow: hidden;
    background: white;
    flex-shrink: 0;
}

.category-sidebar-image img[b-i60t4vnl3h] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.category-sidebar-placeholder[b-i60t4vnl3h] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f8f8;
}

.category-sidebar-name[b-i60t4vnl3h] {
    font-size: 14px;
    font-weight: 700;
    color: #333;
    text-align: center;
    transition: color 0.3s ease;
    word-break: break-word;
}

.products-grid-container-sidebar[b-i60t4vnl3h] {
    flex: 1;
    overflow-y: auto;
    padding: 24px 32px;
    padding-bottom: 140px; /* Space for floating bottom bar */
}

.products-grid-container-sidebar.products-grid-with-sidebar-cart[b-i60t4vnl3h] {
    padding-right: 420px; /* 380px sidebar width + 40px margin */
    padding-bottom: 40px; /* No floating bar when sidebar cart is active */
}

/* Bottom Category Slider */
.category-slider-bottom[b-i60t4vnl3h] {
    bottom: 120px; /* Above the floating bottom bar */
    left: 0;
    right: 0;
    z-index: 99;
    margin-bottom: 0;
    padding: 20px 24px;
    background: white;
    border-top: 2px solid #e0e0e0;
    border-bottom: 2px solid #e0e0e0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 -4px 12px rgba(0, 0, 0, 0.08);
}

.products-grid-container-with-bottom-slider[b-i60t4vnl3h] {
    padding-bottom: 280px; /* Extra space for category slider + bottom bar */
}

/* When sidebar cart is active with bottom categories, no floating bar exists */
.products-grid-container-with-bottom-slider.products-grid-with-sidebar-cart[b-i60t4vnl3h] {
    padding-bottom: 180px !important; /* Only space for category slider */
}

/* Adjust category slider position when sidebar cart is active */
.category-slider-bottom.category-slider-with-sidebar-cart[b-i60t4vnl3h] {
    bottom: 0 !important; /* No floating bar, slider goes to bottom */
}

/* ========================================
   Confirmation Dialog
   ======================================== */

.confirm-overlay[b-i60t4vnl3h] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: fadeIn-b-i60t4vnl3h 0.3s ease-in-out;
}

.confirm-dialog[b-i60t4vnl3h] {
    background: white;
    border-radius: 32px;
    padding: 48px;
    max-width: 550px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: slideUp-b-i60t4vnl3h 0.4s ease-out;
}

.confirm-dialog h3[b-i60t4vnl3h] {
    font-size: 32px;
    font-weight: 700;
    color: #333;
    margin: 0;
}

.confirm-dialog p[b-i60t4vnl3h] {
    font-size: 18px;
    color: #666;
    margin: 0;
}

.confirm-buttons[b-i60t4vnl3h] {
    display: flex;
    gap: 16px;
    width: 100%;
    margin-top: 12px;
}

.btn-confirm-yes[b-i60t4vnl3h],
.btn-confirm-no[b-i60t4vnl3h] {
    flex: 1;
    border: none;
    border-radius: 16px;
    padding: 18px 32px;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.btn-confirm-yes[b-i60t4vnl3h] {
    background: #dc2626;
    color: white;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
}

.btn-confirm-yes:hover[b-i60t4vnl3h] {
    background: #b91c1c;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(220, 38, 38, 0.4);
}

.btn-confirm-no[b-i60t4vnl3h] {
    background: #f5f5f5;
    color: #333;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.btn-confirm-no:hover[b-i60t4vnl3h] {
    background: #e8e8e8;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* ========================================
   Sidebar Cart (Always Visible)
   ======================================== */

.sidebar-cart[b-i60t4vnl3h] {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 380px;
    background: white;
    box-shadow: 0 0 32px rgba(0, 0, 0, 0.15);
    z-index: 1001; /* Above other elements */
    display: flex;
    flex-direction: column;
    animation: slideInFromSide-b-i60t4vnl3h 0.4s ease-out;
}

.sidebar-cart-left[b-i60t4vnl3h] {
    left: 0;
    border-right: 2px solid #e0e0e0;
}

.sidebar-cart-right[b-i60t4vnl3h] {
    right: 0;
    border-left: 2px solid #e0e0e0;
}

@keyframes slideInFromSide-b-i60t4vnl3h {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.sidebar-cart-header[b-i60t4vnl3h] {
    background: var(--theme-primary, #667eea);
    padding: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.sidebar-cart-header h3[b-i60t4vnl3h] {
    font-size: 24px;
    font-weight: 700;
    color: white;
    margin: 0;
}

.sidebar-cart-badge[b-i60t4vnl3h] {
    background: #ff4757;
    color: white;
    border-radius: 12px;
    padding: 6px 12px;
    font-size: 16px;
    font-weight: 700;
    min-width: 32px;
    text-align: center;
}

.sidebar-cart-items[b-i60t4vnl3h] {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sidebar-cart-item[b-i60t4vnl3h] {
    background: #f8f8f8;
    border-radius: 16px;
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.sidebar-cart-item-image[b-i60t4vnl3h] {
    width: 56px;
    height: 56px;
    border-radius: 10px;
    overflow: hidden;
    background: white;
    flex-shrink: 0;
}

.sidebar-cart-item-image img[b-i60t4vnl3h] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sidebar-cart-item-placeholder[b-i60t4vnl3h] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e8e8e8;
}

.sidebar-cart-item-info[b-i60t4vnl3h] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.sidebar-cart-item-name[b-i60t4vnl3h] {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-cart-item-price[b-i60t4vnl3h] {
    font-size: 12px;
    font-weight: 700;
    color: var(--theme-primary, #667eea);
}

.sidebar-cart-item-controls[b-i60t4vnl3h] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: white;
    border-radius: 10px;
    padding: 6px 10px;
    flex-shrink: 0;
}

.sidebar-qty-btn[b-i60t4vnl3h] {
    background: var(--theme-primary, #667eea);
    border: none;
    border-radius: 8px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.sidebar-qty-btn:hover[b-i60t4vnl3h] {
    background: rgba(var(--theme-primary-rgb, 102, 126, 234), 0.85);
    transform: scale(1.1);
}

.sidebar-qty-display[b-i60t4vnl3h] {
    font-size: 16px;
    font-weight: 700;
    color: #333;
    min-width: 24px;
    text-align: center;
}

.sidebar-cart-empty[b-i60t4vnl3h] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    color: #999;
    padding: 40px 24px;
}

.sidebar-cart-empty span[b-i60t4vnl3h] {
    font-size: 18px;
    font-weight: 600;
}

.sidebar-cart-footer[b-i60t4vnl3h] {
    background: white;
    padding: 20px;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08);
    flex-shrink: 0;
}

.sidebar-cart-total[b-i60t4vnl3h] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: #f8f8f8;
    border-radius: 12px;
    margin-bottom: 16px;
    font-size: 18px;
    font-weight: 700;
    color: #333;
}

.sidebar-cart-total-price[b-i60t4vnl3h] {
    color: var(--theme-primary, #667eea);
    font-size: 24px;
}

.sidebar-cart-actions[b-i60t4vnl3h] {
    display: flex;
    gap: 12px;
    align-items: stretch;
}

.sidebar-cart-cancel[b-i60t4vnl3h] {
    background: white;
    border: 2px solid #dc2626;
    border-radius: 14px;
    padding: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sidebar-cart-cancel:hover[b-i60t4vnl3h] {
    background: #dc2626;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
}

.sidebar-cart-cancel:hover fluent-icon[b-i60t4vnl3h] {
    color: white;
}

.sidebar-cart-checkout[b-i60t4vnl3h] {
    background: var(--theme-primary, #667eea);
    border: none;
    border-radius: 14px;
    padding: 16px 24px;
    color: white;
    font-size: 18px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    flex: 1;
}

.sidebar-cart-checkout:hover[b-i60t4vnl3h] {
    background: rgba(var(--theme-primary-rgb, 102, 126, 234), 0.85);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(var(--theme-primary-rgb, 102, 126, 234), 0.4);
}

/* ========================================
   Popup Cart (Toggle Overlay)
   ======================================== */

.popup-cart-overlay[b-i60t4vnl3h] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: fadeIn-b-i60t4vnl3h 0.3s ease-in-out;
}

.popup-cart-container[b-i60t4vnl3h] {
    background: white;
    border-radius: 32px;
    width: 90%;
    max-width: 600px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.3);
    animation: popupSlideIn-b-i60t4vnl3h 0.4s ease-out;
}

@keyframes popupSlideIn-b-i60t4vnl3h {
    from {
        transform: translateY(-50px) scale(0.9);
        opacity: 0;
    }
    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

.popup-cart-header[b-i60t4vnl3h] {
    background: var(--theme-primary, #667eea);
    padding: 24px;
    border-radius: 32px 32px 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.popup-cart-header h3[b-i60t4vnl3h] {
    font-size: 28px;
    font-weight: 700;
    color: white;
    margin: 0;
}

.popup-cart-close[b-i60t4vnl3h] {
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.popup-cart-close:hover[b-i60t4vnl3h] {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

.popup-cart-items[b-i60t4vnl3h] {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.popup-cart-item[b-i60t4vnl3h] {
    background: #f8f8f8;
    border-radius: 18px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.popup-cart-item-image[b-i60t4vnl3h] {
    width: 72px;
    height: 72px;
    border-radius: 12px;
    overflow: hidden;
    background: white;
    flex-shrink: 0;
}

.popup-cart-item-image img[b-i60t4vnl3h] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.popup-cart-item-placeholder[b-i60t4vnl3h] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e8e8e8;
}

.popup-cart-item-info[b-i60t4vnl3h] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.popup-cart-item-name[b-i60t4vnl3h] {
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

.popup-cart-item-price[b-i60t4vnl3h] {
    font-size: 14px;
    font-weight: 700;
    color: var(--theme-primary, #667eea);
}

.popup-cart-item-controls[b-i60t4vnl3h] {
    display: flex;
    align-items: center;
    gap: 12px;
    background: white;
    border-radius: 12px;
    padding: 8px 12px;
    flex-shrink: 0;
}

.popup-qty-btn[b-i60t4vnl3h] {
    background: var(--theme-primary, #667eea);
    border: none;
    border-radius: 10px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.popup-qty-btn:hover[b-i60t4vnl3h] {
    background: rgba(var(--theme-primary-rgb, 102, 126, 234), 0.85);
    transform: scale(1.1);
}

.popup-qty-display[b-i60t4vnl3h] {
    font-size: 20px;
    font-weight: 700;
    color: #333;
    min-width: 32px;
    text-align: center;
}

.popup-cart-empty[b-i60t4vnl3h] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    color: #999;
    padding: 60px 24px;
}

.popup-cart-empty span[b-i60t4vnl3h] {
    font-size: 20px;
    font-weight: 600;
}

.popup-cart-footer[b-i60t4vnl3h] {
    background: white;
    padding: 24px;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
    flex-shrink: 0;
    border-radius: 0 0 32px 32px;
}

.popup-cart-total[b-i60t4vnl3h] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background: #f8f8f8;
    border-radius: 16px;
    margin-bottom: 20px;
    font-size: 20px;
    font-weight: 700;
    color: #333;
}

.popup-cart-total-price[b-i60t4vnl3h] {
    color: var(--theme-primary, #667eea);
    font-size: 28px;
}

.popup-cart-checkout[b-i60t4vnl3h] {
    background: var(--theme-primary, #667eea);
    border: none;
    border-radius: 16px;
    padding: 20px 32px;
    color: white;
    font-size: 20px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
}

.popup-cart-checkout:hover[b-i60t4vnl3h] {
    background: rgba(var(--theme-primary-rgb, 102, 126, 234), 0.85);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(var(--theme-primary-rgb, 102, 126, 234), 0.4);
}

/* ========================================
   Responsive Design
   ======================================== */

@media (max-width: 768px) {
    .category-grid[b-i60t4vnl3h] {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        padding: 20px;
    }

    .products-grid-kiosk[b-i60t4vnl3h] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .payment-methods-grid[b-i60t4vnl3h] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .processing-content-with-summary[b-i60t4vnl3h] {
        flex-direction: column;
    }

    .order-summary-card[b-i60t4vnl3h] {
        min-width: 100%;
        max-width: 100%;
    }

    .language-options[b-i60t4vnl3h] {
        grid-template-columns: 1fr;
    }

    .header-content[b-i60t4vnl3h] {
        grid-template-columns: auto 1fr auto;
        gap: 12px;
    }

    .header-title[b-i60t4vnl3h] {
        font-size: 24px;
    }

    .floating-cart-summary[b-i60t4vnl3h] {
        bottom: 16px;
        right: 16px;
        left: 16px;
    }
}

/* ========================================
   Animations
   ======================================== */

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

@keyframes pulse-b-i60t4vnl3h {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

.kiosk-screen > *[b-i60t4vnl3h] {
    animation: slideUp-b-i60t4vnl3h 0.4s ease-out;
}
/* /Components/Pages/Menus/CustomerMenuPreview.razor.rz.scp.css */
/* Menu Preview Styles */

/* Customer Loading Container */
.customer-loading[b-d3gsfb4qfc] {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: #FAFAFA;
}

/* Loading Container */
.loading-container[b-d3gsfb4qfc] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: #FAFAFA;
    gap: 1rem;
}


/* Main Menu Editor Container */
.menu-editor-container[b-d3gsfb4qfc] {
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: #f8f9fa;
    /* Safe area support for iOS */
    padding-top: env(safe-area-inset-top);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
    /* Prevent pull-to-refresh */
    overscroll-behavior: none;
    touch-action: pan-x pan-y;
}

/* Preview Mode Toolbar */
.editor-toolbar.preview-mode[b-d3gsfb4qfc] {
    background: white;
    border-bottom: 1px solid #e0e0e0;
    padding: 1rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    z-index: 1000;
}

.preview-badge[b-d3gsfb4qfc] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #e3f2fd;
    color: #1976d2;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 500;
}

.menu-title-display[b-d3gsfb4qfc] {
    font-size: 1.2rem;
    font-weight: 600;
    color: #333;
}

/* Main Preview Content */
.editor-main.preview-main[b-d3gsfb4qfc] {
    flex: 1;
    overflow-y: auto;
    background: #fff;
}

.menu-builder[b-d3gsfb4qfc] {
    width: 100%;
    max-width: none;
    margin: 0;
    background: white;
}

/* Restaurant Header */
.restaurant-header[b-d3gsfb4qfc] {
    position: relative;
}

.hero-section[b-d3gsfb4qfc] {
    position: relative;
    min-height: 260px;
    display: flex;
    flex-direction: column;
    background: var(--primary-color, #C20004);
}

.hero-overlay[b-d3gsfb4qfc] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 1;
}

.hero-content[b-d3gsfb4qfc] {
    position: relative;
    z-index: 2;
    flex: 1;
    display: flex;
    flex-direction: column;
    color: white;
}

/* Header Top Bar */
.header-top-bar[b-d3gsfb4qfc] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 2rem;
    margin-bottom: auto;
}

.logo-section[b-d3gsfb4qfc] {
    flex-shrink: 0;
}

.logo-container[b-d3gsfb4qfc] {
    display: flex;
    align-items: center;
    overflow: hidden;
}

.restaurant-logo[b-d3gsfb4qfc] {
    width: auto;
    height: 80px;
    border-radius: 8px;
    object-fit: contain;
    background: rgba(255, 255, 255, 0.1);
    padding: 0.5rem;
    max-width: 200px;
}

.logo-upload-placeholder.disabled[b-d3gsfb4qfc],
.banner-upload-placeholder.disabled[b-d3gsfb4qfc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.1);
    border: 2px dashed rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
    width: 80px;
    height: 80px;
    cursor: default;
}

.logo-upload-placeholder.disabled[b-d3gsfb4qfc] {
    border-radius: 50%;
}

/* Title Section */
.title-section[b-d3gsfb4qfc] {
    padding: 0 2rem 2rem;
    text-align: center;
}

.restaurant-title-container[b-d3gsfb4qfc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.restaurant-title.readonly[b-d3gsfb4qfc] {
    font-size: 2.5rem;
    font-weight: 700;
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    margin: 0;
}

.title-underline[b-d3gsfb4qfc] {
    height: 4px;
    width: 80px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 2px;
}

/* Menu Navigation */
.menu-navigation[b-d3gsfb4qfc] {
    background: white;
    border-bottom: 1px solid #e0e0e0;
    position: sticky;
    top: 0;
    z-index: 10;
}

.nav-content[b-d3gsfb4qfc] {
    padding: 1rem 2rem;
}

.nav-top-row[b-d3gsfb4qfc] {
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-content: center;
}

.search-container[b-d3gsfb4qfc] {
    position: relative;
    max-width: 35vw;
    flex: 1;
}


.search-icon[b-d3gsfb4qfc] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
    z-index: 2;
}

.modern-search[b-d3gsfb4qfc] {
    width: 100%;
    padding: 12px 16px 12px 40px;
    border: 2px solid #e0e0e0;
    border-radius: 25px;
    background: #f8f9fa;
    font-size: 1rem;
    outline: none;
    transition: all 0.2s ease;
}

.modern-search:focus[b-d3gsfb4qfc] {
    border-color: var(--primary-color, #C20004);
    background: white;
}


/* Category Navigation Tabs */
.category-nav-tabs[b-d3gsfb4qfc] {
    display: flex;
    gap: 8px;
    padding: 0 12rem 1rem;
    overflow-x: auto;
    scrollbar-width: none;
}

.category-nav-tabs[b-d3gsfb4qfc]::-webkit-scrollbar {
    display: none;
}

.category-tab[b-d3gsfb4qfc] {
    background: #f8f9fa;
    border: 2px solid transparent;
    color: #666;
    padding: 0.75rem 1.5rem;
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    font-weight: 500;
    font-size: 0.95rem;
}

.category-tab:hover[b-d3gsfb4qfc] {
    background: #e9ecef;
    transform: translateY(-1px);
}

.category-tab.active[b-d3gsfb4qfc] {
    background: var(--primary-color, #C20004);
    color: white;
    border-color: var(--primary-color, #C20004);
}

/* Categories Container */
.categories-container[b-d3gsfb4qfc] {
    padding: 2rem 12rem;
    background: #fff;
}

/* Category Cards */
.modern-category-card[b-d3gsfb4qfc] {
    margin-bottom: 3rem;
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    border: 1px solid #f0f0f0;
}

.category-header-modern[b-d3gsfb4qfc] {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 2rem;
    border-bottom: 1px solid #e0e0e0;
}

.category-title-section[b-d3gsfb4qfc] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.category-info[b-d3gsfb4qfc] {
    flex: 1;
}

.category-title.readonly[b-d3gsfb4qfc] {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--primary-color, #C20004);
    margin: 0 0 0.5rem 0;
}

.category-subtitle.readonly[b-d3gsfb4qfc] {
    font-size: 1rem;
    color: #666;
    margin: 0;
    line-height: 1.4;
}

/* Products Grid */
.products-grid[b-d3gsfb4qfc] {
    padding: 2rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

/* Product Cards */
.product-card[b-d3gsfb4qfc] {
    display: flex;
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    border: 1px solid #f0f0f0;
    transition: all 0.3s ease;
    min-height: 120px;
    position: relative;
}

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

/* Product Info Section */
.product-info[b-d3gsfb4qfc] {
    flex: 1;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.product-name.readonly[b-d3gsfb4qfc] {
    font-size: 1.2rem;
    font-weight: 700;
    color: #333;
    margin: 0 0 0.5rem 0;
    line-height: 1.3;
}

.product-desc.readonly[b-d3gsfb4qfc] {
    font-size: 0.95rem;
    color: #666;
    margin: 0 0 1rem 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-price[b-d3gsfb4qfc] {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
    margin-top: auto;
}

.price-value[b-d3gsfb4qfc] {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--primary-color, #C20004);
}

.price-currency[b-d3gsfb4qfc] {
    font-size: 1rem;
    font-weight: 500;
    color: var(--primary-color, #C20004);
}

.struck-price-value[b-d3gsfb4qfc] {
    font-size: 1rem;
    font-weight: 500;
    color: #999;
    text-decoration: line-through;
    margin-left: 0.5rem;
}

/* Product Image Section */
.product-image-container[b-d3gsfb4qfc] {
    width: 140px;
    height: 100%;
    margin-right: 12px;
    flex-shrink: 0;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-image-box[b-d3gsfb4qfc] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 12px 0px;
}

.product-img[b-d3gsfb4qfc] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.3s ease;
    border-radius: 12px;
}

.product-card:hover .product-img[b-d3gsfb4qfc] {
    transform: scale(1.05);
}

.product-image-placeholder.disabled[b-d3gsfb4qfc] {
    display: none;
}

/* Product Action Buttons */
.product-action-buttons[b-d3gsfb4qfc] {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 2;
}

.product-add-btn.preview-btn[b-d3gsfb4qfc] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--primary-color, #C20004);
    color: white;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.product-add-btn.preview-btn:hover[b-d3gsfb4qfc] {
    background: #a50003;
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(194, 0, 4, 0.4);
}

/* Small Desktop / Tablet Landscape (between 768px and 1440px) */
@media (min-width: 769px) and (max-width: 1440px) {
    .categories-container[b-d3gsfb4qfc] {
        padding: 2rem 2rem;
    }

    .category-nav-tabs[b-d3gsfb4qfc] {
        padding: 0 2rem 1rem;
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .header-top-bar[b-d3gsfb4qfc] {
        padding: 1rem;
        flex-direction: row;
        gap: 0;
        align-items: flex-start;
        justify-content: space-between;
    }
    
    .header-actions[b-d3gsfb4qfc] {
        width: auto;
        align-items: flex-start;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .language-selector-container[b-d3gsfb4qfc] {
        width: 100%;
        margin-right: 0 !important;
        margin-top: 0.5rem;
        order: 10; /* Move language selector to bottom */
        justify-content: flex-end;
    }

    .language-selector[b-d3gsfb4qfc] {
        width: auto;
        min-width: 120px;
        max-width: 180px;
        height: 48px;
        font-size: 0.85rem;
        padding: 0.5rem 0.75rem;
    }
    
    .working-hours-display[b-d3gsfb4qfc] {
        width: auto;
        justify-content: center;
        font-size: 0.6rem;
        border-radius: 8px !important;
    }
    
    .working-hours-label[b-d3gsfb4qfc] {
        font-size: 0.6rem !important;
    }
    
    .working-hours-text[b-d3gsfb4qfc] {
        font-size: 0.75rem !important;
    }
    
    .title-section[b-d3gsfb4qfc] {
        padding: 1rem !important;
        text-align: center !important;
        position: absolute !important;
        left: 50% !important;
        top: 65% !important;
        transform: translate(-50%, -50%) !important;
        width: 100% !important;
    }
    
    .restaurant-title.readonly[b-d3gsfb4qfc] {
        font-size: 1.5rem !important;
        color: white;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    }
    
    .nav-content[b-d3gsfb4qfc] {
        padding: 1rem;
    }
    
    .nav-top-row[b-d3gsfb4qfc] {
        flex-direction: column;
        gap: 0.75rem;
        align-items: stretch;
    }
    
    .search-container[b-d3gsfb4qfc] {
        max-width: 100%;
    }
    
    
    .category-nav-tabs[b-d3gsfb4qfc] {
        padding: 0 1rem 1rem;
    }
    
    .categories-container[b-d3gsfb4qfc] {
        padding: 0;
    }
    
    .category-header-modern[b-d3gsfb4qfc] {
        padding: 1.5rem;
    }
    
    .products-grid[b-d3gsfb4qfc] {
        padding: 1rem;
        gap: 1rem;
        grid-template-columns: 1fr !important;
    }
    
    .product-card[b-d3gsfb4qfc] {
        flex-direction: row;
        min-height: 120px;
        align-items: center;
        gap: 1rem;
        padding: 0.75rem;
    }
    
    .product-image-container[b-d3gsfb4qfc] {
        width: 94px;
        height: 100%;
        flex-shrink: 0;
        border-radius: 8px;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .product-image-box[b-d3gsfb4qfc] {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        padding: 0;
    }
    
    .product-img[b-d3gsfb4qfc] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        transition: transform 0.3s ease;
    }
    
    .product-info[b-d3gsfb4qfc] {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-height: 80px;
        padding: 0;
    }
    
    .product-name.readonly[b-d3gsfb4qfc] {
        font-size: 1rem;
        font-weight: 600;
        margin: 0 0 0.2rem;
        line-height: 1.3;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        color: var(--text-color, #333333);
    }
    
    .product-desc.readonly[b-d3gsfb4qfc] {
        color: #666;
        font-size: 0.9rem;
        margin: 0 0 0.4rem;
        line-height: 1.2;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    
    .price-value[b-d3gsfb4qfc] {
        font-size: 1rem;
        font-weight: 600;
        color: var(--primary-color, #C20004);
    }
    
    .price-currency[b-d3gsfb4qfc] {
        font-size: 0.7rem;
        color: var(--primary-color, #C20004);
    }
    
    .struck-price-value[b-d3gsfb4qfc] {
        font-size: 0.8rem;
        font-weight: 500;
        color: #999;
        text-decoration: line-through;
        margin-left: 0.3rem;
    }
    
    .product-card[b-d3gsfb4qfc] {
        background: var(--card-background-color, #ffffff);
        border: 1px solid #f0f0f0;
    }
    
    .category-title.readonly[b-d3gsfb4qfc] {
        color: var(--primary-color, #C20004);
        font-size: 1.5rem;
    }
    
    .category-tab.active[b-d3gsfb4qfc] {
        background: var(--primary-color, #C20004) !important;
        color: white !important;
        border-color: var(--primary-color, #C20004);
    }
    
    .modern-search:focus[b-d3gsfb4qfc] {
        border-color: var(--primary-color, #C20004);
        background: white;
        box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb, 194, 0, 4), 0.1);
    }
    
    .product-image-placeholder.disabled[b-d3gsfb4qfc] {
        display: none;
    }
    
    /* Mobile responsive for hero bottom row */
    .hero-bottom-row[b-d3gsfb4qfc] {
        bottom: 0.5rem !important;
        left: 1rem !important;
        right: 1rem !important;
        flex-direction: row;
        justify-content: space-between;
    }
    
    .hero-eta-side[b-d3gsfb4qfc] {
        flex: 1;
        display: flex;
        justify-content: flex-start;
    }
    
    .hero-eta-container[b-d3gsfb4qfc] {
        padding: 0.25rem 0.5rem !important;
        font-size: 0.6rem !important;
        border-radius: 12px !important;
    }
    
    .hero-eta-text[b-d3gsfb4qfc] {
        font-size: 0.6rem !important;
    }
    
    .powered-by-attribution[b-d3gsfb4qfc] {
        font-size: 0.7rem !important;
        padding: 0.25rem 0.5rem !important;
    }
    
    .attribution-icon[b-d3gsfb4qfc] {
        width: 16px !important;
        height: 16px !important;
    }
    
    /* Mobile store address styles */
    .store-address-section[b-d3gsfb4qfc] {
        padding: 1.5rem 0;
        margin-top: 1rem;
    }

    .store-address-content[b-d3gsfb4qfc] {
        padding: 0 1rem;
    }

    .address-info[b-d3gsfb4qfc] {
        gap: 0.75rem;
        padding: 0.75rem 1rem;
        font-size: 0.9rem;
    }

    .address-text[b-d3gsfb4qfc] {
        font-size: 0.9rem;
        font-weight: 500;
    }

    /* Mobile footer styles */
    .menu-footer[b-d3gsfb4qfc] {
        padding: 1rem;
        margin-top: 1rem;
        margin-bottom: 0;
    }

    .footer-content[b-d3gsfb4qfc] {
        gap: 0.75rem;
    }

    .footer-icon[b-d3gsfb4qfc] {
        width: 36px;
        height: 36px;
    }

    .footer-text[b-d3gsfb4qfc] {
        font-size: 1rem;
    }
}

/* Animation for smooth loading */
@keyframes fadeInUp-b-d3gsfb4qfc {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modern-category-card[b-d3gsfb4qfc] {
    animation: fadeInUp-b-d3gsfb4qfc 0.5s ease-out;
}

.product-card[b-d3gsfb4qfc] {
    animation: fadeInUp-b-d3gsfb4qfc 0.3s ease-out;
}

/* Header Actions and Working Hours */
.header-actions[b-d3gsfb4qfc] {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    align-items: center;
}

.working-hours-display[b-d3gsfb4qfc] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: rgba(255, 255, 255, 0.15) !important;
    color: white !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 8px !important;
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    padding: 0.75rem;
    min-width: 48px;
    min-height: 48px;
    cursor: pointer;
    transition: all 0.3s ease;
}

a.working-hours-display[b-d3gsfb4qfc] {
    text-decoration: none;
    justify-content: center;
}

.working-hours-display:hover[b-d3gsfb4qfc] {
    background: rgba(255, 255, 255, 0.25) !important;
    transform: translateY(-1px);
}

.working-hours-content[b-d3gsfb4qfc] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.working-hours-label[b-d3gsfb4qfc] {
    font-size: 0.75rem;
    font-weight: 500;
    opacity: 0.9;
    letter-spacing: 0.3px;
}

.working-hours-text[b-d3gsfb4qfc] {
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.hero-buttons[b-d3gsfb4qfc] {
    display: flex;
    gap: 0.5rem;
}

.hero-info-btn[b-d3gsfb4qfc] {
    background: rgba(255, 255, 255, 0.2) !important;
    color: white !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    padding: 0.5rem 1rem !important;
    border-radius: 20px !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    backdrop-filter: blur(10px);
    transition: all 0.2s ease !important;
}

.hero-info-btn:hover[b-d3gsfb4qfc] {
    background: rgba(255, 255, 255, 0.3) !important;
    transform: translateY(-1px);
}

/* CSS Custom Properties for Dynamic Theming */
:root[b-d3gsfb4qfc] {
    --primary-color: #C20004;
    --theme-primary-rgb: 194, 0, 4;
}

/* Hero Bottom Row */
.hero-bottom-row[b-d3gsfb4qfc] {
    position: absolute;
    bottom: 1rem;
    left: 2rem;
    right: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 10;
}

/* Hero ETA Side (Left placeholder) */
.hero-eta-side[b-d3gsfb4qfc] {
    flex: 1;
    display: flex;
    justify-content: flex-start;
}

/* Hero ETA Container (Left) */
.hero-eta-container[b-d3gsfb4qfc] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    backdrop-filter: blur(10px);
    color: white;
}

.hero-eta-icon[b-d3gsfb4qfc] {
    color: white;
}

.hero-eta-text[b-d3gsfb4qfc] {
    font-size: 0.8rem;
    font-weight: 500;
    color: white;
}

/* Powered By Attribution (Right) */
.powered-by-attribution[b-d3gsfb4qfc] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255, 255, 255, 0.9);
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
    font-weight: 500;
    backdrop-filter: blur(10px);
}

.attribution-icon[b-d3gsfb4qfc] {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    object-fit: contain;
}

.attribution-text[b-d3gsfb4qfc] {
    white-space: nowrap;
}

/* Store Address Section */
/* Hero Address Section */
.hero-address-section[b-d3gsfb4qfc] {
    margin-top: 1.5rem;
}

.hero-address-info[b-d3gsfb4qfc] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: center;
}

.hero-address-text[b-d3gsfb4qfc] {
    color: white;
    font-size: 0.9rem;
    opacity: 0.9;
    font-weight: 400;
}

@media (max-width: 768px) {

    .hero-address-section[b-d3gsfb4qfc] {
        margin-top: 1.5rem;
    }

    .hero-address-text[b-d3gsfb4qfc] {
        font-size: 0.8rem;
        text-align: center;
        line-height: 1.2;
    }

    .hero-address-info[b-d3gsfb4qfc] {
        gap: 0.3rem;
        flex-wrap: wrap;
    }
}

.store-address-section[b-d3gsfb4qfc] {
    background: #ffffff;
    padding: 2rem 0;
    margin-top: 2rem;
    border-top: 1px solid #e9ecef;
}

.store-address-content[b-d3gsfb4qfc] {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.address-info[b-d3gsfb4qfc] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.address-text[b-d3gsfb4qfc] {
    font-size: 1rem;
    font-weight: 500;
    color: #495057;
    line-height: 1.4;
}

/* Footer */
.menu-footer[b-d3gsfb4qfc] {
    background: #f8f9fa;
    border-top: 1px solid #e9ecef;
    padding: 2rem 0;
    margin-top: 1rem;
    width: 100%;
    position: relative;
    z-index: 1;
}

.footer-content[b-d3gsfb4qfc] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.footer-icon[b-d3gsfb4qfc] {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    object-fit: contain;
}

.footer-text[b-d3gsfb4qfc] {
    font-size: 1.2rem;
    font-weight: 500;
    color: #666;
}

/* Store Info Page Styles - Only for Mobile */
@media (max-width: 768px) {
    .store-info-page[b-d3gsfb4qfc] {
        height: auto;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        background: #f8f9fa;
    }

    .store-info-header[b-d3gsfb4qfc] {
        position: sticky;
        top: 0;
        z-index: 1000;
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: 1rem;
        background: white;
        border-bottom: 1px solid #e0e0e0;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .back-button[b-d3gsfb4qfc] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem 0.75rem;
        border: none;
        background: #6c757d;
        color: white;
        border-radius: 6px;
        font-size: 0.8rem;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .back-button:hover[b-d3gsfb4qfc] {
        background: #545b62;
        transform: translateY(-1px);
    }

    .store-info-title[b-d3gsfb4qfc] {
        font-size: 1.25rem;
        font-weight: 600;
        color: #333;
        margin: 0;
    }

    .store-info-content[b-d3gsfb4qfc] {
        flex: 1;
        overflow: visible;
        padding: 1rem;
    }

    .store-info-container[b-d3gsfb4qfc] {
        width: 100%;
        background: white;
        border-radius: 8px;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
        border: 1px solid #e0e0e0;
        overflow: visible;
        height: fit-content;
    }
}

/* Desktop - Hide page view, use dialog instead */
@media (min-width: 769px) {
    .store-info-page[b-d3gsfb4qfc] {
        display: none;
    }
}

/* Language Selector Styles */
.language-selector-container[b-d3gsfb4qfc] {
    margin-right: 12px;
    display: flex;
    align-items: center;
    height: 48px;
}

.language-selector[b-d3gsfb4qfc] {
    background: rgba(255, 255, 255, 0.15);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    padding: 0.75rem;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    font-family: inherit;
    min-width: 100px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.language-selector:hover[b-d3gsfb4qfc] {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
}

.language-selector:focus[b-d3gsfb4qfc] {
    outline: none;
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.6);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2);
}

.language-selector option[b-d3gsfb4qfc] {
    background: #333;
    color: white;
    padding: 4px 8px;
}

/* Cart UI Styles */
.floating-cart-button[b-d3gsfb4qfc] {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--theme-primary, #C20004);
    color: white;
    border-radius: 25px;
    padding: 12px 20px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    z-index: 2;
    min-width: 200px;
    will-change: transform;
}

.floating-cart-button:hover[b-d3gsfb4qfc] {
    transform: translateX(-50%) translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.floating-cart-button.no-animation[b-d3gsfb4qfc] {
    transition: none !important;
}

.cart-content[b-d3gsfb4qfc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.cart-info[b-d3gsfb4qfc] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cart-count[b-d3gsfb4qfc] {
    background: rgba(255, 255, 255, 0.9);
    color: var(--theme-primary, #C20004);
    font-weight: bold;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.cart-details[b-d3gsfb4qfc] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.cart-text[b-d3gsfb4qfc] {
    font-weight: 600;
    font-size: 14px;
}

.cart-total[b-d3gsfb4qfc] {
    font-size: 16px;
    font-weight: bold;
}

/* Quantity Controls - Minimal styling for cart functionality */
.quantity-controls[b-d3gsfb4qfc] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 6px;
    padding: 2px;
    backdrop-filter: blur(10px);
}

.quantity-btn[b-d3gsfb4qfc] {
    background: var(--theme-primary, #C20004);
    color: white;
    border: none;
    border-radius: 4px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    transition: opacity 0.2s ease;
}

.quantity-btn:hover:not(.disabled)[b-d3gsfb4qfc] {
    opacity: 0.8;
}

.quantity-btn.disabled[b-d3gsfb4qfc],
.product-add-btn.disabled[b-d3gsfb4qfc] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.quantity-btn.decrease[b-d3gsfb4qfc] {
    background: #666;
}

.quantity-display[b-d3gsfb4qfc] {
    font-weight: 500;
    font-size: 14px;
    color: var(--neutral-layer-1);
    min-width: 20px;
    text-align: center;
}

/* Unavailable Items Notification */
.unavailable-items-notification[b-d3gsfb4qfc] {
    position: fixed;
    top: 20px;
    right: 20px;
    background: #fff3cd;
    border: 1px solid #ffeaa7;
    border-radius: 8px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 1001;
    max-width: 350px;
    animation: slideInRight-b-d3gsfb4qfc 0.3s ease;
}

.notification-content[b-d3gsfb4qfc] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.notification-title[b-d3gsfb4qfc] {
    font-weight: 600;
    font-size: 14px;
    color: #856404;
}

.notification-text[b-d3gsfb4qfc] {
    font-size: 12px;
    color: #856404;
    opacity: 0.9;
}

.notification-close[b-d3gsfb4qfc] {
    background: none;
    border: none;
    color: #856404;
    cursor: pointer;
    padding: 0;
    margin-left: auto;
    font-size: 16px;
}

@keyframes slideInRight-b-d3gsfb4qfc {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Mobile Responsive for Cart */
@media (max-width: 768px) {
    .floating-cart-button[b-d3gsfb4qfc] {
        bottom: 15px;
        left: 15px;
        right: 15px;
        transform: none;
        min-width: auto;
        transition: box-shadow 0.2s ease;
    }

    .floating-cart-button:hover[b-d3gsfb4qfc] {
        transform: none;
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
    }

    .floating-cart-button.no-animation[b-d3gsfb4qfc] {
        transition: none !important;
    }

    .unavailable-items-notification[b-d3gsfb4qfc] {
        top: 15px;
        right: 15px;
        left: 15px;
        max-width: none;
    }

    .cart-content[b-d3gsfb4qfc] {
        justify-content: center;
    }

    .cart-details[b-d3gsfb4qfc] {
        align-items: center;
    }
}

/* ======================== ALLERGEN BADGES ======================== */
.product-allergens[b-d3gsfb4qfc] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
    margin-bottom: 4px;
}

.allergen-badge[b-d3gsfb4qfc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 500;
    padding: 4px 10px;
    background: rgba(255, 152, 0, 0.1);
    border: 1px solid rgba(255, 152, 0, 0.3);
    border-radius: 12px;
    color: #e65100;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.allergen-badge:hover[b-d3gsfb4qfc] {
    background: rgba(255, 152, 0, 0.2);
    border-color: rgba(255, 152, 0, 0.5);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(255, 152, 0, 0.2);
}

@media (max-width: 768px) {
    .allergen-badge[b-d3gsfb4qfc] {
        font-size: 10px;
        padding: 3px 8px;
    }

    .product-allergens[b-d3gsfb4qfc] {
        gap: 4px;
    }
}
/* /Components/Pages/Menus/Dialogs/MenuTypeSelectionDialog.razor.rz.scp.css */
.menu-type-btn[b-p8zhnylbm4] {
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--neutral-layer-2);
    border-radius: 16px;
    border: 2px solid var(--neutral-stroke-rest);
    transition: border 0.2s, color 0.2s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    cursor: pointer;
    margin: 0;
    padding: 0;
    outline: none;
}

.menu-type-btn.selected[b-p8zhnylbm4] {
    border: 2px solid var(--accent-fill-rest);
    background: var(--accent-fill-rest) !important;
}

.menu-type-btn.selected .menu-type-content[b-p8zhnylbm4],
.menu-type-btn.selected .menu-type-content span[b-p8zhnylbm4],
.menu-type-btn.selected .menu-type-content svg[b-p8zhnylbm4] {
    color: #000 !important;
    fill: #000 !important;
}

.menu-type-btn:hover:not(.selected)[b-p8zhnylbm4] {
    border: 2px solid var(--accent-fill-rest);
}

.menu-type-content[b-p8zhnylbm4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    font-size: 1.1rem;
    font-weight: 500;
    text-align: center;
    color: inherit;
    fill: inherit;
}

.menu-type-content span[b-p8zhnylbm4] {
    font-size: 1.05rem;
    margin-top: 0.2rem;
    word-break: break-word;
    color: inherit;
}

.file-upload-container[b-p8zhnylbm4] {
    padding: 1rem;
    max-width: 600px;
    margin: 0 auto;
}

.upload-area[b-p8zhnylbm4] {
    border: 2px dashed var(--neutral-stroke-rest);
    border-radius: 12px;
    padding: 3rem 2rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--neutral-layer-1);
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.upload-area:hover[b-p8zhnylbm4] {
    border-color: var(--accent-fill-rest);
    background: var(--neutral-layer-2);
}

.upload-placeholder[b-p8zhnylbm4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.upload-text[b-p8zhnylbm4] {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--neutral-foreground-rest);
}

.upload-hint[b-p8zhnylbm4] {
    font-size: 0.9rem;
    color: var(--neutral-foreground-hint);
}

.uploaded-files[b-p8zhnylbm4] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.uploaded-file-item[b-p8zhnylbm4] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--neutral-layer-2);
    border-radius: 8px;
    border: 1px solid var(--neutral-stroke-rest);
}

.file-name[b-p8zhnylbm4] {
    flex: 1;
    font-weight: 500;
    color: var(--neutral-foreground-rest);
}

.file-size[b-p8zhnylbm4] {
    font-size: 0.85rem;
    color: var(--neutral-foreground-hint);
}

.extraction-progress[b-p8zhnylbm4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 2rem;
    text-align: center;
}

.extraction-results[b-p8zhnylbm4] {
    background: var(--neutral-layer-2);
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid var(--neutral-stroke-rest);
}

.results-summary[b-p8zhnylbm4] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.75rem 0;
    font-weight: 500;
    color: var(--accent-fill-rest);
}

.categories-preview[b-p8zhnylbm4] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1rem;
}

.category-preview[b-p8zhnylbm4] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: var(--neutral-layer-1);
    border-radius: 6px;
}

.category-preview strong[b-p8zhnylbm4] {
    color: var(--neutral-foreground-rest);
}

.category-preview span[b-p8zhnylbm4] {
    color: var(--neutral-foreground-hint);
    font-size: 0.9rem;
}

.more-categories[b-p8zhnylbm4] {
    padding: 0.5rem;
    text-align: center;
    font-style: italic;
    color: var(--neutral-foreground-hint);
}

/* Manual creation container styles */
.manual-creation-container[b-p8zhnylbm4] {
    padding: 2rem;
    text-align: center;
}

.info-item[b-p8zhnylbm4] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 8px 12px;
    background: var(--neutral-layer-2);
    border-radius: 8px;
    font-size: 14px;
    color: var(--neutral-foreground-rest);
}
/* /Components/Pages/Menus/Dialogs/StoreInfoMapDialog.razor.rz.scp.css */
/* Store Info Dialog Styles */
.store-info-dialog-content[b-glta9t1ckh] {
    padding: 0;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
}

.store-info-header[b-glta9t1ckh] {
    background: var(--primary-color, #C20004);
    color: white;
    padding: 16px;
    text-align: center;
    position: relative;
}

.store-info-header[b-glta9t1ckh]::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.1) 100%);
}

.store-name[b-glta9t1ckh] {
    margin: 0 0 8px 0;
    font-size: 1.8rem;
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    letter-spacing: 0.5px;
}

.store-description[b-glta9t1ckh] {
    margin: 0;
    font-size: 1rem;
    opacity: 0.9;
    font-weight: 400;
    line-height: 1.4;
}

.store-info-details[b-glta9t1ckh] {
    padding: 12px;
    background: white;
}

.info-item[b-glta9t1ckh] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
}

.info-item:last-child[b-glta9t1ckh] {
    border-bottom: none;
}

.info-icon[b-glta9t1ckh] {
    font-size: 1.5rem;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.info-content[b-glta9t1ckh] {
    flex: 1;
    min-width: 0;
}

.info-label[b-glta9t1ckh] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.info-value[b-glta9t1ckh] {
    font-size: 1rem;
    font-weight: 500;
    color: #333;
    line-height: 1.4;
    word-break: break-word;
}

.phone-link[b-glta9t1ckh] {
    color: #C20004;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s ease;
}

.phone-link:hover[b-glta9t1ckh] {
    color: #a50003;
    text-decoration: underline;
}

.hours-text[b-glta9t1ckh] {
    color: #28a745;
    font-weight: 600;
}

.address-text[b-glta9t1ckh] {
    color: #495057;
    line-height: 1.5;
}

.map-section[b-glta9t1ckh] {
    background: white;
    border-top: 1px solid #e9ecef;
}

.hours-accordion[b-glta9t1ckh] {
    border: 1px solid #e9ecef;
    border-radius: 8px;
    margin-bottom: 8px;
    overflow: hidden;
}

.hours-summary[b-glta9t1ckh] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.hours-summary[b-glta9t1ckh]::-webkit-details-marker { display: none; }

details[open] .expand-icon[b-glta9t1ckh] {
    transform: rotate(-135deg);
}

.expand-icon[b-glta9t1ckh] {
    margin-left: auto;
    margin-right: 8px;
    width: 12px;
    height: 12px;
    border-right: 2px solid #666;
    border-bottom: 2px solid #666;
    transform: rotate(45deg);
    transition: transform 0.12s ease;
    flex-shrink: 0;
}

.hours-list[b-glta9t1ckh] {
    padding: 8px 12px 12px;
    background: #fff;
}

.hours-row[b-glta9t1ckh] {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px dashed #eee;
}

.hours-row:last-child[b-glta9t1ckh] {
    border-bottom: none;
}

.day-name[b-glta9t1ckh] {
    color: #666;
    font-weight: 600;
}

.day-hours[b-glta9t1ckh] {
    color: #333;
    font-weight: 500;
}

.map-header[b-glta9t1ckh] {
    padding: 8px 12px 6px;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border-bottom: 1px solid #e9ecef;
}

.map-title[b-glta9t1ckh] {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 600;
    color: #333;
    display: flex;
    align-items: center;
    gap: 8px;
}

.map-title[b-glta9t1ckh]::before {
    content: '🗺️';
    font-size: 1.1rem;
}

.map-container[b-glta9t1ckh] {
    height: 400px;
    width: 100%;
    border-radius: 0;
    overflow: hidden;
    position: relative;
    z-index: 1;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    
    .store-info-header[b-glta9t1ckh] {
        padding: 16px 12px;
    }
    
    .store-name[b-glta9t1ckh] {
        font-size: 1.5rem;
    }
    
    .store-info-details[b-glta9t1ckh] {
        padding: 12px;
    }
    
    .info-item[b-glta9t1ckh] {
        gap: 12px;
        padding: 12px 0;
    }
    
    .info-icon[b-glta9t1ckh] {
        width: 36px;
        height: 36px;
        font-size: 1.3rem;
    }
    
    .map-header[b-glta9t1ckh] {
        padding: 10px 12px;
    }
    .map-container[b-glta9t1ckh] {
        height: auto;
    }
}

@media (min-width: 769px) {
    .store-info-dialog-content[b-glta9t1ckh] {
    overflow-y: auto;
    max-height: 80vh;
}

}
/* /Components/Pages/Menus/IntegrationMenu.razor.rz.scp.css */
.status-cards[b-2z8soddd62] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-bottom: 1.5rem;
}

.status-summary[b-2z8soddd62] {
    gap: 0.8rem;
}

.summary-row[b-2z8soddd62] {
    display: flex;
    justify-content: space-between;
}

.summary-time[b-2z8soddd62] {
    font-size: 0.9rem;
    opacity: 0.7;
}

.loading-overlay[b-2z8soddd62] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    color: white;
}

.loading-overlay p[b-2z8soddd62] {
    margin-top: 1rem;
    font-size: 1.1rem;
}
/* /Components/Pages/Menus/MenuPreview.razor.rz.scp.css */
/* Menu Preview Styles */

/* Loading Container */
.loading-container[b-hgcjy323dt] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: #FAFAFA;
    gap: 1rem;
}

/* Main Menu Editor Container */
.menu-editor-container[b-hgcjy323dt] {
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: #f8f9fa;
    overflow: hidden;
}

/* Preview Mode Toolbar */
.editor-toolbar.preview-mode[b-hgcjy323dt] {
    background: white;
    border-bottom: 1px solid #e0e0e0;
    padding: 1rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    width: 100%;
    z-index: 3;
    display: flex;
    gap: 10px;
}

.preview-badge[b-hgcjy323dt] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #e3f2fd;
    color: #1976d2;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 500;
}

.menu-title-display[b-hgcjy323dt] {
    font-size: 1.2rem;
    font-weight: 600;
    color: #333;
}

/* Main Preview Content */
.editor-main.preview-main[b-hgcjy323dt] {
    flex: 1;
    overflow-y: auto;
    background: #fff;
}

.menu-builder[b-hgcjy323dt] {
    width: 100%;
    max-width: none;
    margin: 0;
    background: white;
}

/* Restaurant Header */
.restaurant-header[b-hgcjy323dt] {
    position: relative;
}

.hero-section[b-hgcjy323dt] {
    position: relative;
    min-height: 260px;
    display: flex;
    flex-direction: column;
    background: var(--primary-color, #C20004);
}

.hero-overlay[b-hgcjy323dt] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 1;
}

.hero-content[b-hgcjy323dt] {
    position: relative;
    z-index: 2;
    flex: 1;
    display: flex;
    flex-direction: column;
    color: white;
}

/* Header Top Bar */
.header-top-bar[b-hgcjy323dt] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 2rem;
    margin-bottom: auto;
}

.logo-section[b-hgcjy323dt] {
    flex-shrink: 0;
}

.logo-container[b-hgcjy323dt] {
    display: flex;
    align-items: center;
    overflow: hidden;
}

.restaurant-logo[b-hgcjy323dt] {
    width: auto;
    height: 80px;
    border-radius: 8px;
    object-fit: contain;
    background: rgba(255, 255, 255, 0.1);
    padding: 0.5rem;
    max-width: 200px;
}

.logo-upload-placeholder.disabled[b-hgcjy323dt],
.banner-upload-placeholder.disabled[b-hgcjy323dt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.1);
    border: 2px dashed rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
    width: 80px;
    height: 80px;
    cursor: default;
}

.logo-upload-placeholder.disabled[b-hgcjy323dt] {
    border-radius: 50%;
}

/* Title Section */
.title-section[b-hgcjy323dt] {
    padding: 0 2rem 2rem;
    text-align: center;
}

.restaurant-title-container[b-hgcjy323dt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.restaurant-title.readonly[b-hgcjy323dt] {
    font-size: 2.5rem;
    font-weight: 700;
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    margin: 0;
}

.title-underline[b-hgcjy323dt] {
    height: 4px;
    width: 80px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 2px;
}

/* Menu Navigation */
.menu-navigation[b-hgcjy323dt] {
    background: white;
    border-bottom: 1px solid #e0e0e0;
    position: sticky;
    top: 0;
    z-index: 10;
}

.nav-content[b-hgcjy323dt] {
    padding: 1rem 2rem;
}

.search-container[b-hgcjy323dt] {
    position: relative;
    max-width: 35vw;
    margin: 0 auto;
}

.search-icon[b-hgcjy323dt] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
    z-index: 2;
}

.modern-search[b-hgcjy323dt] {
    width: 100%;
    padding: 12px 16px 12px 40px;
    border: 2px solid #e0e0e0;
    border-radius: 25px;
    background: #f8f9fa;
    font-size: 1rem;
    outline: none;
    transition: all 0.2s ease;
}

.modern-search:focus[b-hgcjy323dt] {
    border-color: var(--primary-color, #C20004);
    background: white;
}

.modern-search:disabled[b-hgcjy323dt] {
    background: #f5f5f5;
    color: #999;
    cursor: not-allowed;
}

/* Category Navigation Tabs */
.category-nav-tabs[b-hgcjy323dt] {
    display: flex;
    gap: 8px;
    padding: 0 2rem 1rem;
    overflow-x: auto;
    scrollbar-width: none;
}

.category-nav-tabs[b-hgcjy323dt]::-webkit-scrollbar {
    display: none;
}

.category-tab[b-hgcjy323dt] {
    background: #f8f9fa;
    border: 2px solid transparent;
    color: #666;
    padding: 0.75rem 1.5rem;
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    font-weight: 500;
    font-size: 0.95rem;
}

.category-tab:hover[b-hgcjy323dt] {
    background: #e9ecef;
    transform: translateY(-1px);
}

.category-tab.active[b-hgcjy323dt] {
    background: var(--primary-color, #C20004);
    color: white;
    border-color: var(--primary-color, #C20004);
}

/* Categories Container */
.categories-container[b-hgcjy323dt] {
    padding: 2rem;
    background: #fff;
}

/* Category Cards */
.modern-category-card[b-hgcjy323dt] {
    margin-bottom: 3rem;
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    border: 1px solid #f0f0f0;
}

.category-header-modern[b-hgcjy323dt] {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 2rem;
    border-bottom: 1px solid #e0e0e0;
}

.category-title-section[b-hgcjy323dt] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.category-info[b-hgcjy323dt] {
    flex: 1;
}

.category-title.readonly[b-hgcjy323dt] {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--primary-color, #C20004);
    margin: 0 0 0.5rem 0;
}

.category-subtitle.readonly[b-hgcjy323dt] {
    font-size: 1rem;
    color: #666;
    margin: 0;
    line-height: 1.4;
}

/* Products Grid */
.products-grid[b-hgcjy323dt] {
    padding: 2rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

/* Product Cards */
.product-card[b-hgcjy323dt] {
    display: flex;
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    border: 1px solid #f0f0f0;
    transition: all 0.3s ease;
    min-height: 120px;
    position: relative;
}

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

/* Product Info Section */
.product-info[b-hgcjy323dt] {
    flex: 1;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.product-name.readonly[b-hgcjy323dt] {
    font-size: 1.2rem;
    font-weight: 700;
    color: #333;
    margin: 0 0 0.5rem 0;
    line-height: 1.3;
}

.product-desc.readonly[b-hgcjy323dt] {
    font-size: 0.95rem;
    color: #666;
    margin: 0 0 1rem 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-price[b-hgcjy323dt] {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
    margin-top: auto;
}

.price-value[b-hgcjy323dt] {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--primary-color, #C20004);
}

.price-currency[b-hgcjy323dt] {
    font-size: 1rem;
    font-weight: 500;
    color: var(--primary-color, #C20004);
}

.struck-price-value[b-hgcjy323dt] {
    font-size: 1rem;
    font-weight: 500;
    color: #999;
    text-decoration: line-through;
    margin-left: 0.5rem;
}

/* Product Image Section */
.product-image-container[b-hgcjy323dt] {
    width: 140px;
    height: 100%;
    margin-right: 12px;
    padding: 12px 0px;
    flex-shrink: 0;
    position: relative;
}

.product-image-box[b-hgcjy323dt] {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.product-img[b-hgcjy323dt] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.product-card:hover .product-img[b-hgcjy323dt] {
    transform: scale(1.05);
}

.product-image-placeholder.disabled[b-hgcjy323dt] {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: #f5f5f5;
    color: #999;
    font-size: 0.8rem;
    border-left: 1px solid #e0e0e0;
}

/* Product Action Buttons */
.product-action-buttons[b-hgcjy323dt] {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 2;
}

.product-add-btn.preview-btn[b-hgcjy323dt] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--primary-color, #C20004);
    color: white;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.product-add-btn.preview-btn:hover[b-hgcjy323dt] {
    background: #a50003;
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(194, 0, 4, 0.4);
}

/* Responsive Design */
@media (max-width: 768px) {
    .header-top-bar[b-hgcjy323dt] {
        padding: 1.5rem;
    }
    
    .restaurant-title.readonly[b-hgcjy323dt] {
        font-size: 2rem;
    }
    
    .nav-content[b-hgcjy323dt] {
        padding: 1rem;
    }
    
    .category-nav-tabs[b-hgcjy323dt] {
        padding: 0 1rem 1rem;
    }
    
    .categories-container[b-hgcjy323dt] {
        padding: 1rem;
    }
    
    .category-header-modern[b-hgcjy323dt] {
        padding: 1.5rem;
    }
    
    .products-grid[b-hgcjy323dt] {
        padding: 1rem;
    }
    
    .product-card[b-hgcjy323dt] {
        flex-direction: column;
        min-height: auto;
    }
    
    .product-image-container[b-hgcjy323dt] {
        width: 100%;
        height: 100%;
        margin-right: 8px;
        padding: 8px 0px;
    }
    
    .product-image-placeholder.disabled[b-hgcjy323dt] {
        border-left: none;
        border-bottom: 1px solid #e0e0e0;
    }
}

/* Animation for smooth loading */
@keyframes fadeInUp-b-hgcjy323dt {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modern-category-card[b-hgcjy323dt] {
    animation: fadeInUp-b-hgcjy323dt 0.5s ease-out;
}

.product-card[b-hgcjy323dt] {
    animation: fadeInUp-b-hgcjy323dt 0.3s ease-out;
}

/* Header Actions and Working Hours */
.header-actions[b-hgcjy323dt] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.working-hours-display[b-hgcjy323dt] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: rgba(255, 255, 255, 0.15) !important;
    color: white !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    padding: 0.75rem 1.25rem !important;
    border-radius: 25px !important;
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    min-width: 180px;
}

.working-hours-content[b-hgcjy323dt] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.working-hours-label[b-hgcjy323dt] {
    font-size: 0.75rem;
    font-weight: 500;
    opacity: 0.9;
    letter-spacing: 0.3px;
}

.working-hours-text[b-hgcjy323dt] {
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.hero-buttons[b-hgcjy323dt] {
    display: flex;
    gap: 0.5rem;
}

.hero-info-btn[b-hgcjy323dt] {
    background: rgba(255, 255, 255, 0.2) !important;
    color: white !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    padding: 0.5rem 1rem !important;
    border-radius: 20px !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    backdrop-filter: blur(10px);
    transition: all 0.2s ease !important;
}

.hero-info-btn:hover[b-hgcjy323dt] {
    background: rgba(255, 255, 255, 0.3) !important;
    transform: translateY(-1px);
}

/* CSS Custom Properties for Dynamic Theming */
:root[b-hgcjy323dt] {
    --primary-color: #C20004;
    --theme-primary-rgb: 194, 0, 4;
}

/* ======================== ALLERGEN BADGES ======================== */
.product-allergens[b-hgcjy323dt] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
    margin-bottom: 4px;
}

.allergen-badge[b-hgcjy323dt] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 500;
    padding: 4px 10px;
    background: rgba(255, 152, 0, 0.1);
    border: 1px solid rgba(255, 152, 0, 0.3);
    border-radius: 12px;
    color: #e65100;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.allergen-badge:hover[b-hgcjy323dt] {
    background: rgba(255, 152, 0, 0.2);
    border-color: rgba(255, 152, 0, 0.5);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(255, 152, 0, 0.2);
}

@media (max-width: 768px) {
    .allergen-badge[b-hgcjy323dt] {
        font-size: 10px;
        padding: 3px 8px;
    }

    .product-allergens[b-hgcjy323dt] {
        gap: 4px;
    }
}
/* /Components/Pages/Menus/Products.razor.rz.scp.css */
.product-image[b-ih3p3zhzk2] {
    width: 128px;
    height: 96px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}

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

.placeholder-image[b-ih3p3zhzk2] {
    width: 30%;
    height: 30%;
    background: var(--neutral-layer-2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--neutral-foreground-hint);
}

.description-cell[b-ih3p3zhzk2] {
        max-width: 300px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
}
/* /Components/Pages/Orders/Dialogs/CompleteOrderDialog.razor.rz.scp.css */
.complete-order-dialog[b-az1ja4bxrd] {
    width: 100%;
    max-height: 70vh;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px;
}

/* Info Card */
.info-card[b-az1ja4bxrd] {
    padding: 16px;
    margin-bottom: 16px;
    background-color: var(--neutral-layer-1);
    border-radius: 4px;
}

.info-row[b-az1ja4bxrd] {
    margin-top: 8px;
}

/* Payment Methods Card */
.payment-methods-card[b-az1ja4bxrd] {
    padding: 16px;
    margin-bottom: 16px;
    background-color: var(--neutral-layer-1);
    border-radius: 4px;
}

.payment-method-row[b-az1ja4bxrd] {
    margin-bottom: 12px;
    align-items: center;
}

.payment-method-checkbox[b-az1ja4bxrd] {
    width: 200px;
}

.payment-amount-input[b-az1ja4bxrd] {
    width: 150px !important;
    text-align: right;
    padding-right: 8px;
}

.payment-amount-input input[b-az1ja4bxrd] {
    text-align: right;
}

.currency-label[b-az1ja4bxrd] {
    margin-left: 8px;
    color: var(--neutral-foreground-rest);
}

.current-badge[b-az1ja4bxrd] {
    margin-left: 8px;
}

.payment-divider[b-az1ja4bxrd] {
    margin: 12px 0;
}

.total-payment-row[b-az1ja4bxrd] {
    margin-top: 8px;
}

/* Text Styles */
.success-text[b-az1ja4bxrd] {
    color: var(--success-foreground-rest);
    font-weight: 500;
}

.error-text[b-az1ja4bxrd] {
    color: var(--error-foreground-rest);
    font-weight: 500;
}

/* Error Message */
.error-message[b-az1ja4bxrd] {
    margin-top: 8px;
    color: var(--error-foreground-rest);
    align-items: center;
    gap: 8px;
}

/* Completion Note */
.completion-note[b-az1ja4bxrd] {
    width: 100%;
    min-height: 80px;
    background-color: var(--neutral-layer-2);
    border: 1px solid var(--neutral-stroke-input-rest);
    border-radius: 4px;
    resize: vertical;
}

.completion-note:focus[b-az1ja4bxrd] {
    border-color: var(--accent-stroke-focus);
    outline: none;
}

/* Validation Summary */
.validation-summary[b-az1ja4bxrd] {
    color: var(--error-foreground-rest);
} 
/* /Components/Pages/Orders/Dialogs/OrderDetailsDialog.razor.rz.scp.css */
/* Dialog Header */
.dialog-header[b-j8e120m4bd] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.dialog-subheader[b-j8e120m4bd] {
    margin-top: 0.5rem;
    color: var(--neutral-foreground-hint);
}


/* Layout Structure */
.order-content[b-j8e120m4bd] {
    padding: 16px;
}

.split-layout[b-j8e120m4bd] {
    display: flex;
    gap: 12px;
}

.left-column[b-j8e120m4bd] {
    flex: 7;
    max-height: 60vh;
    overflow-y: auto;
    padding-right: 10px;
}

.right-column[b-j8e120m4bd] {
    flex: 3;
    border-left: 1px solid var(--neutral-stroke-divider-rest);
    padding-left: 12px;
}

/* Section Titles */
.section-title[b-j8e120m4bd] {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 10px;
    margin-top: 0;
    color: var(--neutral-foreground-rest);
}

.notes-title[b-j8e120m4bd], 
.payment-methods-title[b-j8e120m4bd] {
    margin-top: 16px;
}

/* Order Items */
.order-items[b-j8e120m4bd] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 300px;
    overflow-y: auto;
    padding-right: 0.5rem;
}

.order-items[b-j8e120m4bd]::-webkit-scrollbar {
    width: 6px;
}

.order-items[b-j8e120m4bd]::-webkit-scrollbar-thumb {
    background-color: var(--neutral-stroke-rest);
    border-radius: 3px;
}

.order-item[b-j8e120m4bd] {
    border-radius: 4px;
    margin-bottom: 8px;
}

.order-item-modifiers li[b-j8e120m4bd] {
    padding: 0;
}

.modified-item[b-j8e120m4bd] {
    border-left: 3px solid var(--warning-foreground-rest);
}

.item-content[b-j8e120m4bd] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
}

.item-details[b-j8e120m4bd] {
    display: flex;
    align-items: center;
}

.item-name[b-j8e120m4bd] {
    font-weight: 500;
}

.item-quantity[b-j8e120m4bd] {
    color: var(--neutral-foreground-hint);
    font-weight: 500;
    margin-left: 8px;
}

.item-price[b-j8e120m4bd] {
    font-weight: 500;
}

.item-notes[b-j8e120m4bd] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px 8px 12px;
    color: var(--neutral-foreground-hint);
    font-size: 13px;
    border-top: 1px dashed var(--neutral-stroke-divider-rest);
    margin-top: 4px;
}

/* Payment Information */
.payment-card[b-j8e120m4bd] {
    background-color: var(--neutral-layer-1);
    padding: 12px;
    border-radius: 4px;
}

.total-row[b-j8e120m4bd] {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    padding: 4px 0;
}

.discount-row[b-j8e120m4bd] {
    color: #4caf50;
}

.final-total[b-j8e120m4bd] {
    font-weight: 600;
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid var(--neutral-stroke-divider-rest);
    font-size: 16px;
}

/* Payment Methods */
.payment-methods[b-j8e120m4bd] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.payment-method-item[b-j8e120m4bd] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #4caf50;
    padding: 8px 8px;
    border-radius: 4px;
    border: 1px solid var(--neutral-stroke-divider-rest);
}

/* Notes Field */
.notes-field[b-j8e120m4bd] {
    width: 100% !important;
    min-height: 80px;
    margin-top: 1rem;
    background-color: var(--neutral-layer-2);
    border: 1px solid var(--neutral-stroke-input-rest);
    border-radius: 4px;
    resize: vertical;
}

.notes-field:focus[b-j8e120m4bd] {
    border-color: var(--accent-stroke-focus);
    outline: none;
}


/* /Components/Pages/Orders/Dialogs/OrderItemDialog.razor.rz.scp.css */
/* Dialog Container Styles */
.dialog-header-center[b-wgsv3wi6no] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 1.25rem;
    background: var(--neutral-layer-2);
    border-radius: 12px;
    margin-bottom: 1.5rem;
    border: 2px solid var(--neutral-stroke-control-default);
    gap: 1rem;
    box-shadow: var(--elevation-shadow-card-rest);
}

/* Product Image Styles */
.product-image-vertical[b-wgsv3wi6no] {
    width: 110px !important;
    height: 85px !important;
    object-fit: contain;
    border-radius: 10px;
    background: var(--neutral-layer-card-default);
    display: block;
    border: 2px solid var(--neutral-stroke-control-default);
    box-shadow: var(--elevation-shadow-card-rest);
    flex-shrink: 0;
    min-width: 110px;
    min-height: 85px;
}

/* FluentIcon için özel stil */
[b-wgsv3wi6no] .product-image-vertical fluent-icon {
    width: 110px !important;
    height: 85px !important;
    min-width: 110px !important;
    min-height: 85px !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

[b-wgsv3wi6no] .product-image-vertical svg {
    width: 60px !important;
    height: 60px !important;
}

/* Product Info Layout */
.product-info[b-wgsv3wi6no] {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 0.5rem;
}

.product-info-with-quantity[b-wgsv3wi6no] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
}

.product-details[b-wgsv3wi6no] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
}

/* Product Text Styles */
.product-title[b-wgsv3wi6no] {
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0;
    color: var(--neutral-foreground-rest);
    line-height: 1.3;
}

.product-price[b-wgsv3wi6no] {
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0;
    color: #C20004;
}

/* Dialog Layout Improvements */
[b-wgsv3wi6no] fluent-dialog-body {
    padding: 1.5rem !important;
    background: var(--neutral-layer-floating);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
}

[b-wgsv3wi6no] fluent-dialog-header {
    background: var(--neutral-layer-floating);
    border-bottom: 1px solid var(--neutral-stroke-divider);
}

[b-wgsv3wi6no] fluent-dialog-footer {
    background: var(--neutral-layer-floating);
    border-top: 1px solid var(--neutral-stroke-divider);
    padding: 1.5rem !important;
    gap: 1rem;
}

[b-wgsv3wi6no] fluent-dialog-footer fluent-button {
    min-width: 120px;
    height: 44px;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.2s ease;
}

[b-wgsv3wi6no] fluent-dialog-footer fluent-button[appearance="accent"] {
    box-shadow: var(--elevation-shadow-card-rest);
}

[b-wgsv3wi6no] fluent-dialog-footer fluent-button:hover {
    transform: translateY(-1px);
    box-shadow: var(--elevation-shadow-card-hover);
}

/* Quantity Controls */
.quantity-controls[b-wgsv3wi6no] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.quantity[b-wgsv3wi6no] {
    min-width: 2.5rem;
    text-align: center;
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--neutral-foreground-rest);
    padding: 0.5rem;
    background: var(--neutral-layer-3);
    border-radius: 8px;
    border: 2px solid var(--neutral-stroke-control-default);
    box-shadow: var(--elevation-shadow-card-rest);
}

/* FluentNumberField styling */
[b-wgsv3wi6no] .quantity-field {
    --control-text-align: center;
    --control-font-weight: 600;
}

[b-wgsv3wi6no] .quantity-field::part(control) {
    text-align: center !important;
    font-weight: 600 !important;
    font-size: 1.1rem !important;
}

[b-wgsv3wi6no] .quantity-field::part(root) {
    text-align: center !important;
}

[b-wgsv3wi6no] fluent-number-field.quantity-field::part(control) {
    text-align: center !important;
    font-weight: 600 !important;
    font-size: 1.1rem !important;
}

.quantity-unit[b-wgsv3wi6no] {
    min-width: 25px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

/* Modifiers Container */.modifiers-container[b-wgsv3wi6no] {    display: flex;    flex-direction: column;    gap: 1rem;    margin-top: 1rem;}

/* Modifier Group Compact */.modifier-group-compact[b-wgsv3wi6no] {    background: var(--neutral-layer-1);    border-radius: 12px;    border: 1px solid var(--neutral-stroke-divider);    overflow: hidden;    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);}

/* Modifier Group Header */.modifier-group-header[b-wgsv3wi6no] {    display: flex;    align-items: flex-start;    justify-content: space-between;    gap: 1rem;    padding: 1rem 1.25rem 0.75rem 1.25rem;    background: var(--neutral-layer-2);    border-bottom: 1px solid var(--neutral-stroke-divider);}.modifier-group-title-section[b-wgsv3wi6no] {    display: flex;    flex-direction: column;    gap: 0.25rem;    flex: 1;}.modifier-group-title[b-wgsv3wi6no] {    font-size: 1rem;    font-weight: 600;    color: var(--neutral-foreground-rest);    margin: 0;    line-height: 1.3;}.modifier-group-description[b-wgsv3wi6no] {    font-size: 0.8rem;    color: var(--neutral-foreground-rest);    margin: 0;    line-height: 1.3;    font-weight: 400;    opacity: 0.6;}.modifier-group-badges[b-wgsv3wi6no] {    display: flex;    align-items: center;    gap: 0.5rem;    flex-shrink: 0;}.required-badge[b-wgsv3wi6no] {    background: #DC2626;    color: white;    font-size: 0.7rem;    font-weight: 600;    padding: 0.2rem 0.5rem;    border-radius: 12px;    text-transform: uppercase;    letter-spacing: 0.5px;}.selection-info[b-wgsv3wi6no] {    background: var(--neutral-layer-3);    color: var(--neutral-foreground-rest);    font-size: 0.75rem;    font-weight: 500;    padding: 0.25rem 0.5rem;    border-radius: 8px;    border: 1px solid var(--neutral-stroke-control-default);    opacity: 0.7;}

/* Modifier Options List */
.modifier-options-list[b-wgsv3wi6no] {
    display: flex;
    flex-direction: column;
}

/* Modifier Option */.modifier-option[b-wgsv3wi6no] {    padding: 0;    cursor: pointer;    transition: all 0.2s ease;    border-bottom: 1px solid var(--neutral-stroke-divider);    background: var(--neutral-layer-1);}.modifier-option:last-child[b-wgsv3wi6no] {    border-bottom: none;}.modifier-option:hover[b-wgsv3wi6no] {    background: var(--neutral-layer-2);}.modifier-option.selected[b-wgsv3wi6no] {    background: var(--neutral-layer-2);    border-left: 3px solid var(--accent-fill-rest);}.modifier-option.selected:hover[b-wgsv3wi6no] {    background: var(--neutral-layer-3);}/* Modifier Option Content */.modifier-option-content[b-wgsv3wi6no] {    display: flex;    align-items: center;    justify-content: space-between;    padding: 0.75rem 1.25rem;    gap: 1rem;}.modifier-option-left[b-wgsv3wi6no] {    display: flex;    align-items: center;    gap: 0.75rem;    flex: 1;}.modifier-option-name[b-wgsv3wi6no] {    font-size: 0.9rem;    font-weight: 500;    color: var(--neutral-foreground-rest);    line-height: 1.3;}.modifier-option-price[b-wgsv3wi6no] {    font-size: 0.9rem;    font-weight: 500;    color: var(--neutral-foreground-rest);    padding: 0;    border-radius: 0;    background: none;    border: none;}



/* Radio Selector */.radio-selector[b-wgsv3wi6no] {    width: 20px;    height: 20px;    border: 2px solid var(--neutral-stroke-control-default);    border-radius: 50%;    background: var(--neutral-layer-3);    display: flex;    align-items: center;    justify-content: center;    transition: all 0.2s ease;    flex-shrink: 0;}.radio-selector.selected[b-wgsv3wi6no] {    border-color: var(--accent-fill-rest);    background: var(--accent-fill-rest);}.radio-inner[b-wgsv3wi6no] {    width: 8px;    height: 8px;    background: var(--neutral-layer-3);    border-radius: 50%;}/* Checkbox Selector */.checkbox-selector[b-wgsv3wi6no] {    width: 20px;    height: 20px;    border: 2px solid var(--neutral-stroke-control-default);    border-radius: 4px;    background: var(--neutral-layer-3);    display: flex;    align-items: center;    justify-content: center;    transition: all 0.2s ease;    flex-shrink: 0;}.checkbox-selector.selected[b-wgsv3wi6no] {    border-color: var(--accent-fill-rest);    background: var(--accent-fill-rest);}.checkbox-selector.selected[b-wgsv3wi6no]  fluent-icon {    color: var(--neutral-layer-3);}.checkbox-selector.selected[b-wgsv3wi6no]  svg {    fill: var(--neutral-layer-3);}

/* Quantity Buttons */
.quantity-button[b-wgsv3wi6no] {
    min-width: 36px;
    height: 36px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1.1rem;
    transition: all 0.2s ease;
    box-shadow: var(--elevation-shadow-card-rest);
    background: var(--neutral-layer-3);
    border: 2px solid var(--neutral-stroke-control-default);
    color: var(--neutral-foreground-rest);
}

.quantity-button:hover[b-wgsv3wi6no] {
    transform: translateY(-1px);
    box-shadow: var(--elevation-shadow-card-hover);
    background: var(--neutral-layer-4);
    border-color: var(--neutral-stroke-control-hover);
    color: var(--neutral-foreground-hover);
}

.quantity-button[b-wgsv3wi6no]  .control {
    color: var(--neutral-foreground-rest) !important;
    background-color: transparent !important;
    border: none !important;
}

.quantity-button:hover[b-wgsv3wi6no]  .control {
    color: var(--neutral-foreground-hover) !important;
}

/* Specific button styles for consistency */
.decrease-button[b-wgsv3wi6no],
.increase-button[b-wgsv3wi6no] {
    background: var(--neutral-layer-3);
    border-color: var(--neutral-stroke-control-default);
    color: var(--neutral-foreground-rest);
}

.decrease-button:hover[b-wgsv3wi6no],
.increase-button:hover[b-wgsv3wi6no] {
    background: var(--neutral-layer-4);
    border-color: var(--neutral-stroke-control-hover);
    color: var(--neutral-foreground-hover);
} 
/* /Components/Pages/Orders/Dialogs/SplitOrderPaymentDialog.razor.rz.scp.css */
.split-order-dialog[b-xm3ef96m6q] {
    min-width: 700px;
    max-width: 900px;
    width: 100%;
}

.info-card[b-xm3ef96m6q],
.payment-type-card[b-xm3ef96m6q],
.items-card[b-xm3ef96m6q],
.summary-card[b-xm3ef96m6q] {
    margin-bottom: 1rem;
    padding: 1rem;
    border: 1px solid var(--neutral-stroke-divider-rest);
    border-radius: 4px;
    background-color: var(--neutral-layer-1);
}

.payment-type-card fluent-radio-group[b-xm3ef96m6q] {
    display: flex;
    justify-content: center;
    gap: 3rem;
    width: 100%;
}

.payment-type-card fluent-radio[b-xm3ef96m6q] {
    margin: 0;
    flex: 0 0 auto;
}

.custom-payment-card[b-xm3ef96m6q] {
    margin-bottom: 1rem;
    padding: 1rem;
    border: 1px solid var(--neutral-stroke-divider-rest);
    border-radius: 4px;
    background-color: var(--neutral-layer-1);
    min-width: 100%;
    overflow: visible;
    position: relative; /* Added for dropdown z-index */
}

.custom-payment-card .fluent-select[b-xm3ef96m6q] {
    z-index: 1000;
    position: relative;
}

.single-payment-fields[b-xm3ef96m6q] {
    gap: 1rem;
}

.payment-method-field[b-xm3ef96m6q] {
    flex: 1;
    position: relative;
    z-index: 10;
}

.payment-amount-field[b-xm3ef96m6q] {
    flex: 1;
    position: relative;
}

.info-row[b-xm3ef96m6q] {
    margin-top: 0.5rem;
}

.item-row[b-xm3ef96m6q] {
    padding: 0.75rem 0;
}

.item-row:last-child[b-xm3ef96m6q] {
    border-bottom: none;
}

.item-info[b-xm3ef96m6q] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.item-details[b-xm3ef96m6q] {
    font-size: 0.875rem;
    color: var(--neutral-foreground-rest);
}

.paid-info[b-xm3ef96m6q] {
    color: var(--accent-foreground-rest);
    font-weight: 500;
}

.item-controls[b-xm3ef96m6q] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.item-total[b-xm3ef96m6q] {
    min-width: 80px;
    text-align: right;
    font-weight: 600;
}

.payment-method-row[b-xm3ef96m6q] {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
}

.payment-method-row:last-child[b-xm3ef96m6q] {
    border-bottom: none;
}

.payment-method-checkbox[b-xm3ef96m6q] {
    flex: 1;
}

/* Mobile-style payment method selection */
.payment-method-option[b-xm3ef96m6q] {
    padding: 1rem;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 8px;
    margin-bottom: 0.5rem;
}

.payment-method-option:hover[b-xm3ef96m6q] {
    background-color: var(--neutral-layer-2);
}

.payment-method-option.selected[b-xm3ef96m6q] {
    background-color: var(--neutral-layer-2);
    border-color: var(--accent-stroke-rest);
}

.payment-method-option:last-child[b-xm3ef96m6q] {
    border-bottom: none;
}

.payment-radio[b-xm3ef96m6q] {
    margin-right: 0.75rem;
}

.payment-method-name[b-xm3ef96m6q] {
    flex: 1;
    font-weight: 500;
}

.selected-icon[b-xm3ef96m6q] {
    color: var(--accent-foreground-rest);
    margin-left: auto;
}

.amount-input-section[b-xm3ef96m6q] {
    padding: 1rem 0;
    gap: 0.75rem;
}

/* Responsive adjustments */
@media(max-width: 768px) {
    .payment-entry-row[b-xm3ef96m6q] {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .payment-entry-row > *[b-xm3ef96m6q] {
        flex: 1;
        min-width: 120px;
    }
    .split-order-dialog[b-xm3ef96m6q] {
        min-width: 90vw;
        max-width: 95vw;
    }
}

.payment-details[b-xm3ef96m6q] {
    margin-top: 1rem;
    padding: 1rem;
    background-color: var(--neutral-layer-2);
    border-radius: 4px;
    gap: 0.5rem;
}

.payment-detail-item[b-xm3ef96m6q] {
    font-size: 0.875rem;
}

.payment-count[b-xm3ef96m6q] {
    color: var(--neutral-foreground-rest);
    font-weight: normal;
}

.existing-payments[b-xm3ef96m6q] {
    margin-top: 0.5rem;
    gap: 0.25rem;
    width: unset !important;
}

.existing-payment-row[b-xm3ef96m6q] {
    font-size: 0.875rem;
    padding: 0.25rem 0;
    color: var(--neutral-foreground-rest);
}

.existing-payments-section[b-xm3ef96m6q] {
    margin-bottom: 0.75rem;
    gap: 0.25rem;
}

.completed-payment-row[b-xm3ef96m6q] {
    padding: 0.5rem 0.75rem;
    background-color: var(--neutral-layer-2);
    border-radius: 4px;
    font-size: 0.8rem;
    min-height: auto;
    align-items: center;
    display: inline-flex;
    width: unset !important;
}

.payment-info[b-xm3ef96m6q] {
    gap: 0.5rem;
    align-items: center;
}

.success-icon[b-xm3ef96m6q] {
    color: var(--accent-foreground-rest);
    font-size: 1rem;
}

.payment-divider[b-xm3ef96m6q] {
    margin: 1rem 0;
}

.total-payment-row[b-xm3ef96m6q] {
    padding: 0.75rem 0;
    font-weight: 600;
}

.success-text[b-xm3ef96m6q] {
    color: var(--accent-foreground-rest);
}

.error-text[b-xm3ef96m6q] {
    color: var(--error-foreground-rest);
}

.warning-text[b-xm3ef96m6q] {
    color: var(--warning-foreground-rest);
}

.error-message[b-xm3ef96m6q] {
    color: var(--error-foreground-rest);
    font-size: 0.875rem;
    gap: 0.5rem;
    align-items: center;
    margin-top: 0.5rem;
}

.warning-message[b-xm3ef96m6q] {
    color: var(--warning-foreground-rest);
    font-size: 0.875rem;
    gap: 0.5rem;
    align-items: center;
    margin-top: 0.75rem;
    padding: 0.5rem;
    background-color: var(--warning-layer-1);
    border-radius: 4px;
    border-left: 3px solid var(--warning-foreground-rest);
}

.validation-summary[b-xm3ef96m6q] {
    margin-top: 1rem;
}

.single-payment-section[b-xm3ef96m6q] {
    margin-bottom: 1rem;
}

.payment-entry-row[b-xm3ef96m6q] {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
}

.payment-entry-row:last-child[b-xm3ef96m6q] {
    border-bottom: none;
}

.payment-entry-content[b-xm3ef96m6q] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.payment-entry-fields[b-xm3ef96m6q] {
    flex: 1;
    display: flex;
    gap: 1rem;
}

.payment-method-field[b-xm3ef96m6q] {
    flex: 1;
}

.payment-amount-field[b-xm3ef96m6q] {
    flex: 1;
}

.delete-payment-btn[b-xm3ef96m6q] {
    margin-left: 0.5rem;
}

.order-items-table[b-xm3ef96m6q] {
    display: flex;
    flex-direction: column;
    margin-top: 0.5rem;
    width: 100%;
}
.order-items-header[b-xm3ef96m6q] {
    display: grid;
    grid-template-columns: 3fr 3fr 1fr 1.5fr 1.5fr;
    font-weight: 600;
    background: var(--neutral-layer-2, #f5f5f5);
    padding: 0.75rem 0.5rem;
    border-radius: 8px 8px 0 0;
    margin-bottom: 2px;
    font-size: 1.05em;
}
.order-item-row[b-xm3ef96m6q] {
    display: grid;
    grid-template-columns: 3fr 3fr 1fr 1.5fr 1.5fr;
    align-items: flex-start;
    padding: 0.75rem 0.5rem;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest, #eee);
    background: var(--neutral-layer-1, #fff);
    font-size: 0.95em;
}
.order-item-row:last-child[b-xm3ef96m6q] {
    border-bottom: none;
}
.order-item-name[b-xm3ef96m6q] {
    font-weight: 500;
    word-break: break-word;
}
.order-item-modifiers ul[b-xm3ef96m6q] {
    margin: 0;
    padding-left: 1.1em;
    list-style: disc;
}
.order-item-modifiers li[b-xm3ef96m6q] {
    color: #555;
    font-size: 1em;
    margin-bottom: 3px;
    font-weight: 500;
}
.no-modifiers[b-xm3ef96m6q] {
    color: #bbb;
    font-size: 0.95em;
} 

.loader-container[b-xm3ef96m6q] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    right: 0;
    left: 0;
    bottom: 0;
    top: 0;
    height:50%;
}

.loader-container span[b-xm3ef96m6q] {
    margin-top: 16px;
    font-size: 1.1rem;
    color: #444;
} 

.split-order-columns[b-xm3ef96m6q] {
    display: flex;
    flex-direction: row;
    gap: 2rem;
    width: 100%;
}

.order-details-card[b-xm3ef96m6q] {
    height: fit-content;
}

.order-details-card[b-xm3ef96m6q], .payment-details-card[b-xm3ef96m6q] {
    flex: 1 1 0;
    min-width: 0;
    box-sizing: border-box;
    margin-bottom: 0;
}

@media (max-width: 900px) {
    .split-order-columns[b-xm3ef96m6q] {
        flex-direction: column;
        gap: 1.5rem;
    }
    .order-details-card[b-xm3ef96m6q], .payment-details-card[b-xm3ef96m6q] {
        min-width: 0;
        width: 100%;
    }
} 

/* Section Title (Kart içi başlıklar) */
.section-title[b-xm3ef96m6q] {
    font-size: 1.15rem;
    font-weight: 700;
    color: #1976d2;
    margin-bottom: 0.5rem;
    letter-spacing: 0.01em;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Yapılmış Ödemeler DataGrid header ve satırları */
.payment-grid[b-xm3ef96m6q] (.fluent-data-grid-header-row),
.payment-grid[b-xm3ef96m6q] (.fluent-data-grid-row) {
    display: grid !important;
    grid-template-columns: 3fr 1.5fr !important;
    align-items: center;
    padding: 0.75rem 0.5rem !important;
    font-size: 1.05em !important;
}
.payment-grid[b-xm3ef96m6q] (.fluent-data-grid-header-row) {
    background: var(--neutral-layer-2, #f5f5f5) !important;
    font-weight: 600 !important;
    color: #222 !important;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest, #eee) !important;
}
.payment-grid[b-xm3ef96m6q] (.fluent-data-grid-row) {
    background: var(--neutral-layer-1, #fff) !important;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest, #eee) !important;
    font-size: 0.95em !important;
}
.payment-grid[b-xm3ef96m6q] (.fluent-data-grid-row:last-child) {
    border-bottom: none !important;
}
.payment-grid-header-cell[b-xm3ef96m6q] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0;
}
.payment-grid[b-xm3ef96m6q] (.payment-amount-col) {
    text-align: right !important;
    justify-content: flex-end;
} 

.payment-type-tabs[b-xm3ef96m6q] {
    display: flex;
    border-bottom: 1.5px solid #e0e0e0;
    margin-bottom: 1.2rem;
    gap: 0.5rem;
}
.payment-type-tabs .tab[b-xm3ef96m6q] {
    background: none;
    border: none;
    outline: none;
    font-weight: 600;
    font-size: 1.08rem;
    color: var(--accent-fill-rest);
    padding: 0.7rem;
    border-radius: 12px 12px 0 0;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.payment-type-tabs .tab:hover[b-xm3ef96m6q] {
    background: var(--accent-fill-hover);
    color: #fff;
}
.payment-type-tabs .tab.active[b-xm3ef96m6q] {
    background: #fff;
    color: var(--accent-fill-rest);
    border: 1.5px solid var(--accent-fill-rest);
    border-bottom: none;
    box-shadow: 0 2px 8px rgba(var(--accent-fill-rest-rgb, 25, 118, 210), 0.04);
    z-index: 2;
}
.payment-type-tabs .tab.active:hover[b-xm3ef96m6q] {
    background: #fff;
    color: var(--accent-fill-rest);
} 

.shared-payment-card[b-xm3ef96m6q] {
    margin-bottom: 0.5rem;
}
.add-payment-row[b-xm3ef96m6q] {
    justify-content: flex-end;
}
.add-payment-row fluent-button[b-xm3ef96m6q], .add-payment-row .fluent-button[b-xm3ef96m6q] {
    min-width: 140px;
    padding: 0.5rem 1.2rem;
    font-size: 1rem;
    width: auto;
}
.payment-summary-box[b-xm3ef96m6q] {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: flex-end;
    background: #f5f5f5;
    border-radius: 8px;
    margin-top: 0.5rem;
    padding: 1rem 1.2rem 0.7rem 1.2rem;
}
.payment-summary-box .summary-values[b-xm3ef96m6q] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.payment-summary-box .summary-total[b-xm3ef96m6q] {
    font-weight: bold;
    color: #111;
}
.payment-summary-box .summary-remaining[b-xm3ef96m6q] {
    font-weight: bold;
    color: #e65100;
    margin-top: 0.1rem;
} 

/* FluentSelect ve FluentNumberField hizası için */
.fluent-select[b-xm3ef96m6q], .fluent-numberfield[b-xm3ef96m6q] {
  min-height: 40px;
  line-height: 40px;
  font-size: 1rem;
  vertical-align: middle;
  box-sizing: border-box;
}

/* Gerekirse mikro ayar için */
.fluent-numberfield input[b-xm3ef96m6q] {
  padding-top: 0;
  padding-bottom: 0;
}
.fluent-select select[b-xm3ef96m6q] {
  padding-top: 0;
  padding-bottom: 0;
} 

/* Accent buton içindeki ikonun rengi beyaz olsun */
.fluent-button[appearance="accent"][b-xm3ef96m6q]  svg {
  fill: #fff !important;
}

/* Warning action button için padding */
[b-xm3ef96m6q] .warning-action-button {
    padding: 0.75rem 2rem !important;
    font-size: 1rem !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    line-height: 1.5 !important;
}

[b-xm3ef96m6q] .warning-action-button span {
    margin-left: 0.5rem;
}
/* /Components/Pages/Orders/Dialogs/UpdateOrderDialog.razor.rz.scp.css */
[b-hbd8s41elj] fluent-card {
    padding: 0 !important;
}

[b-hbd8s41elj] .product-card {
    padding: 0 !important;
}

[b-hbd8s41elj] .product-card fluent-card {
    padding: 0 !important;
}

[b-hbd8s41elj] fluent-card::part(control) {
    padding: 0 !important;
}

[b-hbd8s41elj] .product-card fluent-card::part(control) {
    padding: 0 !important;
}

[b-hbd8s41elj] fluent-dialog {
    max-height: 800px !important;
}

    fluent-dialog[b-hbd8s41elj]::part(control) {
        background-color: var(--dialog-background-color) !important;
        width: 400px !important;
        height: 100%;
        margin: 40px auto !important;
        margin-bottom: 20px !important;
        max-height: 80% !important;
        overflow-y: hidden !important;
        left: 0 !important;
        right: 0 !important;
        border-radius: calc(var(--layer-corner-radius)* 1px) !important;
        border: calc(var(--stroke-width)* 1px) solid var(--accent-fill-rest) !important;
    }

    fluent-dialog[b-hbd8s41elj]::part(overlay) {
        backdrop-filter: blur(1px) !important;
        pointer-events: none !important;
    }

    fluent-dialog .fluent-dialog-body[b-hbd8s41elj] {
        overflow-x: hidden !important;
    }

    fluent-dialog .fluent-dialog-footer[b-hbd8s41elj] {
        position: sticky !important;
        bottom: 0 !important;
        padding: 8px !important;
        border-top: 1px solid var(--neutral-stroke-rest) !important;
    }



.update-order-dialog[b-hbd8s41elj] {
    width: 100%;
    height: 100%;
    max-width: 1400px;
    max-height: 800px;
    padding: 0;
    overflow: hidden;
}

.main-content[b-hbd8s41elj] {
    display: flex;
    height: 100%;
    gap: 1rem;
}

.menu-section[b-hbd8s41elj] {
    display: flex;
    flex-direction: column;
    background-color: var(--neutral-layer-1);
    border-radius: 8px;
    padding: 1rem;
    overflow: hidden;
    width: 100%;
}

.order-details-section[b-hbd8s41elj] {
    display: flex;
    flex-direction: column;
    background-color: var(--neutral-layer-1);
    border-radius: 8px;
    padding: 1rem;
    overflow: hidden;
    width: 100%;
}

.categories-container[b-hbd8s41elj] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.order-items-list[b-hbd8s41elj] {
    flex: 1;
    overflow-y: auto;
    margin: 1rem 0;
    padding-right: 8px;
}

.order-summary[b-hbd8s41elj] {
    border-top: 1px solid var(--neutral-stroke-rest);
    padding-top: 1rem;
}

.empty-order[b-hbd8s41elj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: var(--neutral-foreground-hint);
    gap: 1rem;
}

.quantity-controls[b-hbd8s41elj] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.quantity[b-hbd8s41elj] {
    min-width: 30px;
    text-align: center;
    font-weight: bold;
}

/* FluentNumberField styling */
[b-hbd8s41elj] .quantity-field {
    --control-text-align: center;
    --control-font-weight: 600;
}

[b-hbd8s41elj] .quantity-field::part(control) {
    text-align: center !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
}

[b-hbd8s41elj] .quantity-field::part(root) {
    text-align: center !important;
}

[b-hbd8s41elj] fluent-number-field.quantity-field::part(control) {
    text-align: center !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
}

.quantity-unit[b-hbd8s41elj] {
    min-width: 25px;
    font-size: 0.875rem;
    font-weight: bold;
}

.order-item-notes[b-hbd8s41elj] {
    font-size: 0.9rem;
    color: var(--neutral-foreground-hint);
    margin-top: 0.5rem;
    font-style: italic;
}

.inactive-badge[b-hbd8s41elj] {
    background-color: #ff6b6b;
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.75rem;
    margin-left: 0.5rem;
}

.order-item-modifiers[b-hbd8s41elj] {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    padding: 0;
    list-style: disc;
    color: #888;
    font-size: 0.95rem;
}

.order-item-modifiers li[b-hbd8s41elj] {
    margin-bottom: 2px;
}

.edit-item-button[b-hbd8s41elj] {
    padding: 6px;
    min-width: 32px;
    height: 32px;
    background-color: var(--neutral-layer-3);
    color: var(--neutral-foreground-rest);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 6px;
    transition: all 0.2s ease;
}

.edit-item-button:hover[b-hbd8s41elj] {
    background-color: var(--neutral-layer-4);
    border-color: var(--neutral-stroke-hover);
    color: var(--neutral-foreground-hover);
}

.edit-item-button[b-hbd8s41elj]::part(control) {
    color: var(--neutral-foreground-rest) !important;
    background-color: transparent !important;
    border: none !important;
}

.edit-item-button:hover[b-hbd8s41elj]::part(control) {
    color: var(--neutral-foreground-hover) !important;
}

.order-item-left[b-hbd8s41elj] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 180px;
}

.order-item-title[b-hbd8s41elj] {
    font-size: 1rem;
    font-weight: bold;
    display: inline-block;
    vertical-align: middle;
}

.order-item-modifiers-inline[b-hbd8s41elj] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
    margin: 0 0 0 0.7rem;
    padding: 0;
    list-style: disc inside;
}

.order-item-modifiers-inline li[b-hbd8s41elj] {
    margin: 0;
    padding: 0.2rem 0;
    font-size: 0.9rem;
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
}

.add-product-button[b-hbd8s41elj] {
    margin-left: auto;
}

.product-card-row[b-hbd8s41elj] {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0.8rem;
    width: 100%;
}

.product-image-container[b-hbd8s41elj] {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
}

.product-image[b-hbd8s41elj] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.product-details[b-hbd8s41elj] {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.add-button[b-hbd8s41elj] {
    background-color: #C20004;
    color: white;
    border: 1px solid #C20004;
    border-radius: 4px;
    padding: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

.add-button:hover[b-hbd8s41elj] {
    background-color: #A00003;
    border-color: #A00003;
}

.add-button:disabled[b-hbd8s41elj] {
    background-color: #ccc;
    color: #666;
    border-color: #ccc;
    cursor: not-allowed;
}

.add-button:disabled[b-hbd8s41elj] {
    background-color: var(--neutral-fill-rest) !important;
    border-color: var(--neutral-stroke-rest) !important;
    color: var(--neutral-foreground-hint) !important;
    opacity: 0.6;
}

.add-button:disabled[b-hbd8s41elj]::part(control) {
    color: var(--neutral-foreground-hint) !important;
}

.product-card[b-hbd8s41elj] {
    background-color: var(--neutral-layer-2);
    border: 1px solid var(--neutral-stroke-rest);
    transition: all 0.2s ease;
}

.product-card:hover[b-hbd8s41elj] {
    border-color: var(--neutral-stroke-hover);
    box-shadow: var(--elevation-shadow-card-hover);
    background-color: var(--neutral-layer-3);
}

.inactive-product[b-hbd8s41elj] {
    opacity: 0.4;
    background-color: var(--neutral-layer-1);
}

.order-item[b-hbd8s41elj] {
    background-color: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 8px;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    transition: all 0.2s ease;
}

.order-item:hover[b-hbd8s41elj] {
    background-color: var(--neutral-layer-2);
    border-color: var(--neutral-stroke-hover);
}

.order-item.newly-added[b-hbd8s41elj] {
    background-color: var(--neutral-layer-2);
    border-left: 3px solid var(--accent-fill-rest);
    box-shadow: var(--elevation-shadow-card-rest);
}

.order-item-modifiers-inline[b-hbd8s41elj] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
    margin: 0 0 0 0.7rem;
    padding: 0;
    list-style: disc inside;
}

.order-item-modifiers-inline li[b-hbd8s41elj] {
    margin: 0;
    padding: 0.2rem 0;
    font-size: 0.9rem;
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
}

.order-item-title[b-hbd8s41elj] {
    font-size: 1rem;
    font-weight: bold;
    color: var(--neutral-foreground-rest);
    margin-right: 0.5rem;
}

.add-product-button[b-hbd8s41elj] {
    margin-left: auto;
}

.loading-container[b-hbd8s41elj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 600px;
    width: 100%;
    background: transparent;
    border-radius: 12px;
    gap: 20px;
    position: relative;
    overflow: hidden;
}

.loading-container[b-hbd8s41elj]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 50% 50%, rgba(var(--accent-fill-rest-rgb), 0.1) 0%, transparent 70%);
    pointer-events: none;
}

.loading-container .fluent-progress-ring[b-hbd8s41elj] {
    color: var(--accent-fill-rest);
    filter: drop-shadow(0 2px 8px rgba(var(--accent-fill-rest-rgb), 0.3));
}

.loading-container fluent-label[b-hbd8s41elj] {
    color: var(--neutral-foreground-rest);
    font-weight: 500;
    text-align: center;
    opacity: 0.8;
}

/* Responsive Design */
@media (max-width: 768px) {
    .update-order-dialog[b-hbd8s41elj] {
        height: calc(100vh - 2rem);
        min-height: 500px;
    }

    .main-content[b-hbd8s41elj] {
        flex-direction: column;
    }

    .menu-section[b-hbd8s41elj],
    .order-details-section[b-hbd8s41elj] {
        height: 50%;
        min-height: 300px;
    }

    .products-grid[b-hbd8s41elj] {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        height: calc(100% - 60px);
    }

    .order-items-list[b-hbd8s41elj] {
        height: calc(100% - 220px);
    }
}

.employee-selection[b-hbd8s41elj] {
    margin-top: 16px;
    margin-bottom:16px;
    gap: 8px;
}

/* Tab Navigation Styles - SplitOrderPaymentDialog style */
.tab-navigation[b-hbd8s41elj] {
    display: flex;
    border-bottom: 1.5px solid #e0e0e0;
    gap: 0.5rem;
}

.tab-navigation .tab[b-hbd8s41elj] {
    background: none;
    border: none;
    outline: none;
    font-weight: 600;
    font-size: 1.08rem;
    color: var(--accent-fill-rest);
    padding: 0.7rem 1.5rem 0.6rem 1.5rem;
    border-radius: 12px 12px 0 0;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.tab-navigation .tab:hover[b-hbd8s41elj] {
    background: var(--accent-fill-hover);
    color: #fff;
}

.tab-navigation .tab.active[b-hbd8s41elj] {
    background: #fff;
    color: var(--accent-fill-rest);
    border: 1.5px solid var(--accent-fill-rest);
    border-bottom: none;
    box-shadow: 0 2px 8px rgba(var(--accent-fill-rest-rgb, 25, 118, 210), 0.04);
    z-index: 2;
}

.tab-navigation .tab.active:hover[b-hbd8s41elj] {
    background: #fff;
    color: var(--accent-fill-rest);
}

/* Customer Info Section Styles */
.customer-info-section[b-hbd8s41elj] {
    background: var(--neutral-layer-1);
    border-radius: 8px;
    height: 100%;
    overflow-y: auto;
}

.customer-info-section .fluent-text-field[b-hbd8s41elj],
.customer-info-section .fluent-text-area[b-hbd8s41elj] {
    width: 100%;
}
/* /Components/Pages/Orders/OrderDetails.razor.rz.scp.css */
.loading-container[b-r8n77cu2g7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 48px;
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}

.error-card[b-r8n77cu2g7] {
    margin: 24px;
    padding: 48px;
    text-align: center;
}

.order-details-container[b-r8n77cu2g7] {
    padding: 0 24px 24px 24px;
    max-width: 1400px;
    margin: 0 auto;
    opacity: 0;
    animation: fadeIn-b-r8n77cu2g7 0.4s ease-in-out forwards;
}

.three-columns[b-r8n77cu2g7] {
    display: grid;
    grid-template-columns: 1fr 0.9fr 1fr;
    gap: 16px;
    align-items: start;
}

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

.order-card[b-r8n77cu2g7] {
    width: fit-content !important;
    height: fit-content !important;
    padding: 12px;
    background-color: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-card-default);
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 16px;
    opacity: 0;
    animation: slideInFromLeft-b-r8n77cu2g7 0.5s ease-out forwards;
    animation-delay: 0.1s;
}

@keyframes slideInFromLeft-b-r8n77cu2g7 {
    from { opacity: 0; transform: translateX(-20px); }
    to { opacity: 1; transform: translateX(0); }
}

.order-basic-info[b-r8n77cu2g7] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.order-meta[b-r8n77cu2g7] {
    color: var(--neutral-foreground-hint);
    font-size: 0.875rem;
}

.order-total[b-r8n77cu2g7] {
    text-align: right;
}

/* Info Sections */
.info-section[b-r8n77cu2g7] {
    padding: 20px;
}

.section-header[b-r8n77cu2g7] {
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
}

.section-header .fluent-icon[b-r8n77cu2g7] {
    color: var(--accent-foreground-rest);
}

.section-header .fluent-label[b-r8n77cu2g7] {
    font-weight: 900 !important;
    font-size: 1.2rem !important;
    color: var(--neutral-foreground-rest) !important;
}

.section-title[b-r8n77cu2g7] {
    margin-bottom: 0px;
    font-weight: 700 !important;
    font-size: 1.1rem !important;
    color: var(--accent-fill-rest) !important;
}

/* Compact fonts for medium screens */
@media (max-width: 1400px) {
    .section-title[b-r8n77cu2g7] { font-size: 1rem !important; }
    .order-meta[b-r8n77cu2g7] { font-size: 0.8rem; }
}

/* More compact on tablets/phones */
@media (max-width: 1000px) {
    .section-title[b-r8n77cu2g7] { font-size: 0.95rem !important; }
    .order-card[b-r8n77cu2g7], .delivery-section-card[b-r8n77cu2g7], .payment-section-card[b-r8n77cu2g7] { padding: 10px; }
    .order-items-header[b-r8n77cu2g7], .order-item[b-r8n77cu2g7] { gap: 8px; }
}

.customer-details[b-r8n77cu2g7] {
    margin-top: 12px;
    padding: 12px;
    background-color: var(--neutral-layer-2);
    border-radius: 8px;
}

.customer-details .fluent-stack[b-r8n77cu2g7] {
    width: 100%;
}

.customer-details[b-r8n77cu2g7]  .fluent-icon {
    flex-shrink: 0;
    color: var(--accent-foreground-rest);
}

.customer-details[b-r8n77cu2g7]  .fluent-label {
    word-break: break-word;
    flex: 1;
}

.order-items[b-r8n77cu2g7] {
    margin-top: 16px;
}

.order-items-header[b-r8n77cu2g7] {
    display: grid;
    grid-template-columns: 2fr 2fr 1fr 1fr 1fr;
    gap: 16px;
    padding: 12px 16px;
    background-color: var(--neutral-layer-2);
    border-radius: 8px;
    margin-bottom: 12px;
    font-weight: 600;
}

.order-item[b-r8n77cu2g7] {
    display: grid;
    grid-template-columns: 2fr 2fr 1fr 1fr 1fr;
    gap: 16px;
    padding: 16px;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
    align-items: start;
}

.order-item:last-child[b-r8n77cu2g7] {
    border-bottom: none;
}

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

.item-modifiers[b-r8n77cu2g7] {
    display: flex;
    flex-direction: column;
}

.order-item-modifiers[b-r8n77cu2g7] {
    margin: 0;
    padding: 0;
    list-style: none;
}

.order-item-modifiers li[b-r8n77cu2g7] {
    margin: 0;
    font-size: 0.875rem;
    color: var(--neutral-foreground-hint);
}

.no-modifiers[b-r8n77cu2g7] {
    color: var(--neutral-foreground-hint);
    font-style: italic;
}

.summary-section[b-r8n77cu2g7] {
    display: flex;
    flex-direction: column;
    padding: 12px;
    gap: 8px;
    width: fit-content;
    justify-self: end;
    text-align: end;
}

/* Payment Details Styles */
.payment-section-card[b-r8n77cu2g7] {
    background-color: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-card-default);
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 12px;
    margin-bottom: 16px;
}

.payment-details[b-r8n77cu2g7] {
    margin-top: 16px;
}

.payments-header[b-r8n77cu2g7] {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 16px;
    padding: 12px 16px;
    background-color: var(--neutral-layer-2);
    border-radius: 8px;
    margin-bottom: 12px;
    font-weight: 600;
}

.payment-item[b-r8n77cu2g7] {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 16px;
    padding: 16px;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
    align-items: center;
}

.payment-item:last-child[b-r8n77cu2g7] {
    border-bottom: none;
}

.payment-method[b-r8n77cu2g7] {
    display: flex;
    align-items: center;
}

.payment-method[b-r8n77cu2g7]  .fluent-icon {
    color: var(--accent-foreground-rest);
    flex-shrink: 0;
}

.payment-summary[b-r8n77cu2g7] {
    background-color: var(--neutral-layer-2);
    border-radius: 8px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.actions-section[b-r8n77cu2g7],
.delivery-section[b-r8n77cu2g7] {
    padding: 20px;
}

.delivery-section-card[b-r8n77cu2g7] {
    background-color: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-card-default);
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 12px;
    margin-bottom: 16px;
}

.delivery-details[b-r8n77cu2g7] {
    margin-top: 16px;
    padding-top: 12px;
}

.map-container[b-r8n77cu2g7] {
    border: 1px solid var(--neutral-stroke-card-default);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 16px;
    min-height: 280px;
}

/* Delivery Details Grid Layouts */
.delivery-info-grid[b-r8n77cu2g7] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.delivery-info-section[b-r8n77cu2g7] {
    background-color: var(--neutral-layer-2);
    border-radius: 8px;
    padding: 12px;
    display: grid;
    gap: 8px;
}

/* Remove extra vertical whitespace between stacked rows */
.delivery-info-section > *:last-child[b-r8n77cu2g7] { margin-bottom: 0; }
.delivery-info-section > *:first-child[b-r8n77cu2g7] { margin-top: 0; }

/* Badge and label wrapping fix */
.delivery-info-section[b-r8n77cu2g7]  .fluent-badge {
    white-space: nowrap;
}

.delivery-addresses-grid[b-r8n77cu2g7] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.address-section[b-r8n77cu2g7] {
    background-color: var(--neutral-layer-2);
    border-radius: 8px;
    padding: 12px;
}

.delivery-extra-info[b-r8n77cu2g7] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.courier-section[b-r8n77cu2g7],
.note-section[b-r8n77cu2g7] {
    background-color: var(--neutral-layer-2);
    border-radius: 8px;
    padding: 12px;
}

.note-section[b-r8n77cu2g7] {
    grid-column: 1 / -1; /* Note section spans full width when alone */
}

/* When there's both courier and note, they share the row */
.delivery-extra-info:has(.courier-section) .note-section[b-r8n77cu2g7] {
    grid-column: auto;
}

@media (max-width: 768px) {
    .order-details-container[b-r8n77cu2g7] {
        padding: 0 12px 16px 12px;
    }
    
    .page-header[b-r8n77cu2g7] {
        padding: 8px 12px;
        margin-bottom: 12px;
    }
    
    .order-card[b-r8n77cu2g7] {
        margin-bottom: 12px;
        padding: 12px;
    }
    
    .main-content[b-r8n77cu2g7] {
        gap: 16px;
    }
    
    .info-section[b-r8n77cu2g7],
    .summary-section[b-r8n77cu2g7],
    .actions-section[b-r8n77cu2g7],
    .delivery-section[b-r8n77cu2g7],
    .delivery-section-card[b-r8n77cu2g7] {
        padding: 16px;
    }

    .three-columns[b-r8n77cu2g7] {
        grid-template-columns: 1fr; /* Stack columns on small screens */
        gap: 12px;
    }
    
    .payment-section-card[b-r8n77cu2g7] {
        padding: 16px;
        margin-bottom: 12px;
    }
    
    .order-items-header[b-r8n77cu2g7],
    .order-item[b-r8n77cu2g7] {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 12px;
    }
    
    .order-items-header[b-r8n77cu2g7] {
        display: none;
    }
    
    .order-item[b-r8n77cu2g7] {
        border: 1px solid var(--neutral-stroke-divider-rest);
        border-radius: 8px;
        margin-bottom: 8px;
    }
    
    /* Mobile responsive for payment section */
    .payments-header[b-r8n77cu2g7],
    .payment-item[b-r8n77cu2g7] {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 12px;
    }
    
    .payments-header[b-r8n77cu2g7] {
        display: none;
    }
    
    .payment-item[b-r8n77cu2g7] {
        border: 1px solid var(--neutral-stroke-divider-rest);
        border-radius: 8px;
        margin-bottom: 8px;
    }
    
    .payment-method[b-r8n77cu2g7] {
        margin-bottom: 8px;
    }
    
    .payment-summary[b-r8n77cu2g7] {
        padding: 12px;
    }
    
    /* Mobile responsive for delivery grids */
    .delivery-info-grid[b-r8n77cu2g7],
    .delivery-addresses-grid[b-r8n77cu2g7],
    .delivery-extra-info[b-r8n77cu2g7] {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-bottom: 16px;
    }
    
    .delivery-info-section[b-r8n77cu2g7],
    .address-section[b-r8n77cu2g7],
    .courier-section[b-r8n77cu2g7],
    .note-section[b-r8n77cu2g7] {
        padding: 12px;
    }
    
    .note-section[b-r8n77cu2g7] {
        grid-column: auto; /* Reset grid column for mobile */
    }
    
    .customer-details[b-r8n77cu2g7] {
        padding: 12px;
        margin-top: 8px;
    }
    
    .customer-details .fluent-stack[data-orientation="horizontal"][b-r8n77cu2g7] {
        flex-wrap: wrap;
        gap: 6px;
    }
    
    .section-header[b-r8n77cu2g7] {
        margin-bottom: 12px;
        padding-bottom: 6px;
    }
}

/* 1800px altında: 2 sütuna düş */
@media (max-width: 1800px) {
    .three-columns[b-r8n77cu2g7] { grid-template-columns: 1fr 1fr; }
}

/* Daha dar masaüstü: 2 sütun */
@media (max-width: 1400px) {
    .three-columns[b-r8n77cu2g7] { grid-template-columns: 1fr 1fr; gap: 16px; }
    .page-title[b-r8n77cu2g7] { font-size: 1.6rem !important; }
    .delivery-info-section[b-r8n77cu2g7], .address-section[b-r8n77cu2g7] { font-size: 0.95rem; }
}

/* Tablet breakpoint: 2 sütun altı 1 sütun */
@media (max-width: 1000px) {
    .three-columns[b-r8n77cu2g7] { grid-template-columns: 1fr; gap: 12px; }
    .page-title[b-r8n77cu2g7] { font-size: 1.4rem !important; }
    .delivery-info-section[b-r8n77cu2g7], .address-section[b-r8n77cu2g7] { font-size: 0.9rem; }
    /* Ensure map remains visible on small screens */
    .map-container[b-r8n77cu2g7] { min-height: 320px; }
}

/* Prevent icons from shrinking when labels are long in delivery cards */
.delivery-info-section[b-r8n77cu2g7]  .fluent-stack[data-orientation="horizontal"] .fluent-icon,
.address-section[b-r8n77cu2g7]  .fluent-stack[data-orientation="horizontal"] .fluent-icon,
.courier-section[b-r8n77cu2g7]  .fluent-stack[data-orientation="horizontal"] .fluent-icon,
.note-section[b-r8n77cu2g7]  .fluent-stack[data-orientation="horizontal"] .fluent-icon {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
}

.delivery-info-section[b-r8n77cu2g7]  .fluent-stack[data-orientation="horizontal"],
.address-section[b-r8n77cu2g7]  .fluent-stack[data-orientation="horizontal"],
.courier-section[b-r8n77cu2g7]  .fluent-stack[data-orientation="horizontal"],
.note-section[b-r8n77cu2g7]  .fluent-stack[data-orientation="horizontal"] {
    align-items: center;
    gap: 8px;
}

.delivery-info-section[b-r8n77cu2g7]  .fluent-stack[data-orientation="horizontal"] .fluent-label,
.address-section[b-r8n77cu2g7]  .fluent-stack[data-orientation="horizontal"] .fluent-label,
.courier-section[b-r8n77cu2g7]  .fluent-stack[data-orientation="horizontal"] .fluent-label,
.note-section[b-r8n77cu2g7]  .fluent-stack[data-orientation="horizontal"] .fluent-label {
    flex: 1 1 auto;
    min-width: 0;
    word-break: break-word;
}

/* /Components/Pages/Orders/Orders.razor.rz.scp.css */
/* /Components/Pages/Orders/OrdersGrid.razor.rz.scp.css */
/* Loading States */
.grid-wrapper[b-pdsmepgh0g] {
    min-height: 400px;
    position: relative;
    overflow: hidden;
    transition: height 0.5s ease-out;
}

.loading-container[b-pdsmepgh0g] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 80px 20px;
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--neutral-layer-1);
    z-index: 10;
}

/* Grid Content Animation */
.scrollable-container[b-pdsmepgh0g] {
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
    min-height: 300px;
}

.scrollable-container.hidden[b-pdsmepgh0g] {
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
}

.scrollable-container.visible[b-pdsmepgh0g] {
    opacity: 1;
    transform: translateY(0);
    animation: expandHeight-b-pdsmepgh0g 0.6s ease-out forwards;
}

/* Loading State Transitions */
.grid-wrapper.loading .loading-container[b-pdsmepgh0g] {
    opacity: 1;
    pointer-events: auto;
}

.grid-wrapper.loaded .loading-container[b-pdsmepgh0g] {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease-out;
}

/* Keyframe Animations */
@keyframes expandHeight-b-pdsmepgh0g {
    from { 
        max-height: 0; 
        opacity: 0.5;
    }
    to { 
        max-height: 2000px; 
        opacity: 1;
    }
}

/* Clickable ReadableId */
.clickable-readable-id[b-pdsmepgh0g] {
    cursor: pointer;
    font-weight: 500;
    transition: color 0.2s ease-in-out;
}

.clickable-readable-id:hover[b-pdsmepgh0g] {
    color: var(--accent-foreground-hover);
}

.clickable-readable-id:active[b-pdsmepgh0g] {
    color: var(--accent-foreground-pressed);
}

/* Responsive */
@media (max-width: 768px) {
    .loading-container[b-pdsmepgh0g] {
        padding: 40px 20px;
    }
}
/* /Components/Pages/Recipes/Recipes.razor.rz.scp.css */
.recipes-container[b-bwil7psyld] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background: var(--neutral-layer-1);
}

.recipes-toolbar[b-bwil7psyld] {
    background: white;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--neutral-stroke-layer-rest);
    flex-shrink: 0;
}

.recipes-content[b-bwil7psyld] {
    flex: 1;
    display: flex;
    gap: 1px;
    overflow: hidden;
    background: var(--neutral-stroke-layer-rest);
}

.recipes-grid-container[b-bwil7psyld] {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: white;
    overflow: hidden;
}

.recipes-grid[b-bwil7psyld] {
    flex: 1;
    overflow: auto;
}

    .recipes-grid[b-bwil7psyld]::part(grid) {
        border: none;
    }

    .recipes-grid[b-bwil7psyld]::part(header-cell) {
        background: var(--neutral-layer-2);
        font-weight: 600;
        border-bottom: 2px solid var(--neutral-stroke-layer-rest);
        padding: 0.75rem 1rem;
    }

    .recipes-grid[b-bwil7psyld]::part(row) {
        border-bottom: 1px solid var(--neutral-stroke-layer-rest);
    }

        .recipes-grid[b-bwil7psyld]::part(row):hover {
            background: var(--neutral-layer-2);
        }

    .recipes-grid[b-bwil7psyld]::part(cell) {
        padding: 0.75rem 1rem;
    }

.pagination-container[b-bwil7psyld] {
    padding: 1rem;
    border-top: 1px solid var(--neutral-stroke-layer-rest);
    background: white;
}

/* Detail Panel */
.recipe-detail-panel[b-bwil7psyld] {
    width: 550px;
    background: white;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-left: 1px solid var(--neutral-stroke-layer-rest);
    transition: transform 0.3s ease;
}

    .recipe-detail-panel.hidden[b-bwil7psyld] {
        transform: translateX(100%);
        width: 0;
    }

.detail-header[b-bwil7psyld] {
    padding: 1.5rem;
    border-bottom: 1px solid var(--neutral-stroke-layer-rest);
    background: var(--neutral-layer-2);
}

.detail-content[b-bwil7psyld] {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
}

.detail-footer[b-bwil7psyld] {
    padding: 1.25rem 1.5rem;
    border-top: 1px solid var(--neutral-stroke-layer-rest);
    background: var(--neutral-layer-2);
}

.detail-section[b-bwil7psyld] {
    padding: 1.25rem;
    background: var(--neutral-layer-1);
    border-radius: 8px;
    border: 1px solid var(--neutral-stroke-layer-rest);
}

/* Recipe Items */
.recipe-items-list[b-bwil7psyld] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.recipe-item-card[b-bwil7psyld] {
    padding: 1rem;
    background: white;
    border: 1px solid var(--neutral-stroke-layer-rest);
    border-radius: 6px;
    cursor: move;
    transition: all 0.2s ease;
}

    .recipe-item-card:hover[b-bwil7psyld] {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        border-color: var(--accent-fill-rest);
    }

    .recipe-item-card:active[b-bwil7psyld] {
        opacity: 0.7;
        cursor: grabbing;
    }

/* Drag & Drop Effects */
.recipe-item-card[draggable="true"][b-bwil7psyld] {
    user-select: none;
}

.recipe-item-card.dragging[b-bwil7psyld] {
    opacity: 0.5;
    background: var(--neutral-layer-2);
}

.recipe-item-card.drag-over[b-bwil7psyld] {
    border-top: 3px solid var(--accent-fill-rest);
}

/* Scrollbar Styling */
.detail-content[b-bwil7psyld]::-webkit-scrollbar,
.recipes-grid[b-bwil7psyld]::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.detail-content[b-bwil7psyld]::-webkit-scrollbar-thumb,
.recipes-grid[b-bwil7psyld]::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

    .detail-content[b-bwil7psyld]::-webkit-scrollbar-thumb:hover,
    .recipes-grid[b-bwil7psyld]::-webkit-scrollbar-thumb:hover {
        background: rgba(0, 0, 0, 0.3);
    }

.detail-content[b-bwil7psyld]::-webkit-scrollbar-track,
.recipes-grid[b-bwil7psyld]::-webkit-scrollbar-track {
    background: transparent;
}

/* Responsive Design */
@media (max-width: 1400px) {
    .recipe-detail-panel[b-bwil7psyld] {
        width: 500px;
    }
}

@media (max-width: 1200px) {
    .recipes-content[b-bwil7psyld] {
        flex-direction: column;
    }

    .recipe-detail-panel[b-bwil7psyld] {
        width: 100%;
        border-left: none;
        border-top: 1px solid var(--neutral-stroke-layer-rest);
    }

        .recipe-detail-panel.hidden[b-bwil7psyld] {
            transform: translateY(100%);
            height: 0;
        }
}

@media (max-width: 768px) {
    .recipes-toolbar[b-bwil7psyld] {
        padding: 1rem;
    }

    .recipes-grid[b-bwil7psyld] {
        font-size: 0.9rem;
    }

    .recipe-item-card[b-bwil7psyld] {
        padding: 0.75rem;
    }
}
/* /Components/Pages/Reports/Components/DailyEarningsReport.razor.rz.scp.css */
.report-card[b-nb1qx9aquf] {
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15);
    background-color: var(--neutral-layer-1, #ffffff);
    border: 1px solid var(--neutral-stroke-divider, #e0e0e0);
    position: relative;
    transition: width 0.3s ease-in-out, box-shadow 0.2s ease;
}

.report-card:not(.expanded):hover[b-nb1qx9aquf] {
    box-shadow: 0px 6px 20px rgba(0, 0, 0, 0.1);
}

.report-card.expanded[b-nb1qx9aquf] {
    /* Genişlemiş durumda hover efekti yok */
}

.loading-overlay[b-nb1qx9aquf] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    border-radius: 8px;
}

.total-highlight-box[b-nb1qx9aquf] {
    text-align: center;
    margin-bottom: 15px;
    padding: 10px;
    background-color: rgba(2, 132, 199, 0.1);
    border-radius: 8px;
}

.summary-item[b-nb1qx9aquf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #eee;
}

.summary-item-content[b-nb1qx9aquf] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
}

.summary-text[b-nb1qx9aquf] {
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--neutral-foreground-rest, #424242);
    flex: 1;
    min-width: 0;
}

.summary-value[b-nb1qx9aquf] {
    font-weight: bold;
    font-size: 14px;
    white-space: nowrap;
    flex-shrink: 0;
} 
/* /Components/Pages/Reports/Components/EarningsDistributionReport.razor.rz.scp.css */
.report-card[b-iur2jujw4w] {
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15);
    background-color: var(--neutral-layer-1, #ffffff);
    border: 1px solid var(--neutral-stroke-divider, #e0e0e0);
    position: relative;
    transition: width 0.3s ease-in-out, box-shadow 0.2s ease;
}

.report-card:not(.expanded):hover[b-iur2jujw4w] {
    box-shadow: 0px 6px 20px rgba(0, 0, 0, 0.1);
}

.report-card.expanded[b-iur2jujw4w] {
    /* Genişlemiş durumda hover efekti yok */
}

.loading-overlay[b-iur2jujw4w] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    border-radius: 8px;
}

.total-highlight-box[b-iur2jujw4w] {
    text-align: center;
    margin-bottom: 15px;
    padding: 10px;
    background-color: rgba(37, 99, 235, 0.1);
    border-radius: 8px;
}

.summary-item[b-iur2jujw4w] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #eee;
}

.summary-item-content[b-iur2jujw4w] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
}

.color-indicator[b-iur2jujw4w] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.summary-text[b-iur2jujw4w] {
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--neutral-foreground-rest, #424242);
}

.summary-value[b-iur2jujw4w] {
    font-weight: bold;
    font-size: 14px;
    white-space: nowrap;
    flex-shrink: 0;
} 
/* /Components/Pages/Reports/Components/OrdersReport.razor.rz.scp.css */
.report-card[b-ojdegobepm] {
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15);
    background-color: var(--neutral-layer-1, #ffffff);
    border: 1px solid var(--neutral-stroke-divider, #e0e0e0);
    position: relative;
    transition: width 0.3s ease-in-out, box-shadow 0.2s ease;
}

.report-card:not(.expanded):hover[b-ojdegobepm] {
    box-shadow: 0px 6px 20px rgba(0, 0, 0, 0.1);
}

.report-card.expanded[b-ojdegobepm] {
    /* Genişlemiş durumda hover efekti yok */
}

.loading-overlay[b-ojdegobepm] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    border-radius: 8px;
}

.total-highlight-box[b-ojdegobepm] {
    text-align: center;
    margin-bottom: 15px;
    padding: 10px;
    background-color: rgba(16, 185, 129, 0.1);
    border-radius: 8px;
}

.summary-item[b-ojdegobepm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #eee;
}

.summary-item-content[b-ojdegobepm] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
}

.color-indicator[b-ojdegobepm] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.summary-text[b-ojdegobepm] {
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--neutral-foreground-rest, #424242);
}

.summary-value[b-ojdegobepm] {
    font-weight: bold;
    font-size: 14px;
    white-space: nowrap;
    flex-shrink: 0;
} 
/* /Components/Pages/Reports/MainReports.razor.rz.scp.css */
.reports-container[b-6ah3gwqjka] {
    display: grid;
    gap: 20px;
    justify-items: center;
    grid-template-columns: 1fr;
}

@media (min-width: 1600px) {
    .reports-container[b-6ah3gwqjka] {
        grid-template-columns: 1fr 1fr;
    }
}

.report-item[b-6ah3gwqjka] {
    width: 100%;
}
/* /Components/Pages/Stores/CreateStoreDialog.razor.rz.scp.css */
.map-container[b-stsd9povmh] {
    width: 100%;
    height: 300px;
    margin: 8px 0;
}

[b-stsd9povmh] .fluent-card {
    background-color: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
}

[b-stsd9povmh] fluent-text-field,
[b-stsd9povmh] fluent-text-area,
[b-stsd9povmh] fluent-select {
    width: 100%;
}

[b-stsd9povmh] .fluent-validation-summary {
    color: var(--error-fill-color);
}

[b-stsd9povmh] fluent-button {
    min-width: 100px;
}

[b-stsd9povmh] fluent-button fluent-icon {
    margin-right: 4px;
}

[b-stsd9povmh] .icon-text {
    display: flex;
    align-items: center;
    gap: 8px;
} 
/* /Components/Pages/Stores/StoreDetails.razor.rz.scp.css */
.dashboard-container[b-3jgk4x3f4y] {
    padding: 20px;
}

.dashboard-card[b-3jgk4x3f4y] {
    height: 100%;
    transition: all 0.3s ease;
    border-radius: 8px;
    overflow: hidden;
}

    .dashboard-card:hover[b-3jgk4x3f4y] {
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
        transform: translateY(-2px);
    }

.metric-card[b-3jgk4x3f4y] {
    text-align: center;
    padding: 16px;
}

.metric-value[b-3jgk4x3f4y] {
    font-size: 2.5rem;
    font-weight: bold;
    margin: 10px 0;
    color: var(--accent-fill-rest);
}

.metric-label[b-3jgk4x3f4y] {
    font-size: 1rem;
    color: var(--neutral-foreground-rest);
}

.metric-icon[b-3jgk4x3f4y] {
    font-size: 2rem;
    margin-bottom: 10px;
    color: var(--accent-fill-rest);
}

.section-title[b-3jgk4x3f4y] {
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.map-container[b-3jgk4x3f4y] {
    border-radius: 8px;
    overflow: hidden;
    height: 350px;
}

.form-container[b-3jgk4x3f4y] {
    padding: 16px;
}

.action-buttons[b-3jgk4x3f4y] {
    display: flex;
    gap: 8px;
    margin-top: 16px;
}

.tab-content[b-3jgk4x3f4y] {
    padding: 16px 0;
}

.custom-grid[b-3jgk4x3f4y] {
    margin-top: 16px;
}

.status-badge[b-3jgk4x3f4y] {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: bold;
}

.status-active[b-3jgk4x3f4y] {
    background-color: #e6f7e6;
    color: #2e7d32;
}

.status-inactive[b-3jgk4x3f4y] {
    background-color: #ffebee;
    color: #c62828;
}
/* /Components/Pages/TableManagement/TablesGrid.razor.rz.scp.css */
.tables-container[b-nazttkhfgs] {
    width: 100%;
    overflow-y: auto;
}

.floor-header[b-nazttkhfgs] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 12px;
}

.floor-icon[b-nazttkhfgs] {
    font-size: 1.5rem;
    color: var(--accent-fill-rest);
}

.floor-title[b-nazttkhfgs] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.floor-count[b-nazttkhfgs] {
    font-size: 0.9rem;
    color: var(--neutral-foreground-hint);
    font-weight: 500;
}

.loading-state[b-nazttkhfgs] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    text-align: center;
}

    .loading-state p[b-nazttkhfgs] {
        margin-top: 16px;
        color: #666;
    }

.tables-grid[b-nazttkhfgs] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    padding: 1rem;
}

.table-card[b-nazttkhfgs] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: end;
    border-radius: 18px;
    border: none;
    border-left: 3px solid #bdbdbd;
    background: var(--neutral-layer-1);
    color: var(--neutral-foreground-rest);
    transition: border 0.2s, background 0.2s, color 0.2s;
    padding: 1.8rem 1rem;
    min-height: 160px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    position: relative;
}

.table-card:hover[b-nazttkhfgs] {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.08);
}

.table-card.available[b-nazttkhfgs] {
    border-left: 3px solid #1ecb4f;
}

.table-card.occupied[b-nazttkhfgs] {
    border-left: 3px solid #ff3b3b;
    transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}

[data-theme="dark"] .table-card.occupied[b-nazttkhfgs] {
    background: #2a1818;
}

.table-card.occupied:hover[b-nazttkhfgs] {
    box-shadow: 0 4px 16px rgba(255,59,59,0.10);
    filter: brightness(1.05);
}

.table-card.reserved[b-nazttkhfgs] {
    border-left: 3px solid #ffb300;
}

.table-card.out-of-service[b-nazttkhfgs] {
    border-left: 3px solid #bdbdbd;
    opacity: 0.5;
    cursor: not-allowed;
}

.table-card .table-icon[b-nazttkhfgs] {
    font-size: 2.2rem;
    margin-bottom: 0.5rem;
}

.table-card .table-number[b-nazttkhfgs] {
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: 0.2rem;
    color: inherit;
}

.table-card .table-status[b-nazttkhfgs] {
    font-size: 0.95rem;
    color: var(--neutral-foreground-hint);
    opacity: 1;
    text-align: center;
}

.table-card .table-employee[b-nazttkhfgs] {
    font-size: 0.85rem;
    margin-top: 0.4rem;
    opacity: 1;
    text-align: center;
    color: var(--neutral-foreground-rest);
    font-weight: 500;
    max-width: 90%;
    word-wrap: break-word;
}

.table-actions-left[b-nazttkhfgs] {
    position: absolute;
    top: 12px;
    left: 12px;
    display: flex;
    gap: 8px;
    opacity: 1;
}

.table-actions-right[b-nazttkhfgs] {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    gap: 8px;
    opacity: 1;
}

.table-actions-left fluent-button[b-nazttkhfgs],
.table-actions-right fluent-button[b-nazttkhfgs] {
    min-width: 36px;
    height: 36px;
    padding: 8px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.load-more-container[b-nazttkhfgs] {
    display: flex;
    justify-content: center;
    padding: 20px;
}

.empty-state[b-nazttkhfgs] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    text-align: center;
}

    .empty-state fluent-icon[b-nazttkhfgs] {
        font-size: 48px;
        margin-bottom: 16px;
        opacity: 0.5;
    }

    .empty-state h3[b-nazttkhfgs] {
        margin: 16px 0 8px 0;
        color: var(--neutral-foreground-rest);
    }

    .empty-state p[b-nazttkhfgs] {
        margin-bottom: 24px;
        color: var(--neutral-foreground-hint);
    }

.filters-container[b-nazttkhfgs] {
    background: var(--neutral-layer-2);
    padding: 16px;
    border-radius: 8px;
    border: 1px solid var(--neutral-stroke-rest);
}

@media (max-width: 768px) {
    .floor-header[b-nazttkhfgs] {
        padding: 10px 12px;
        gap: 10px;
    }

    .floor-title[b-nazttkhfgs] {
        font-size: 1.1rem;
    }

    .floor-count[b-nazttkhfgs] {
        font-size: 0.85rem;
    }

    .tables-grid[b-nazttkhfgs] {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: 12px;
    }

    .table-card[b-nazttkhfgs] {
        padding: 1.5rem 0.8rem;
        min-height: 150px;
    }

    .table-actions-left[b-nazttkhfgs] {
        gap: 6px;
        top: 10px;
        left: 10px;
    }

    .table-actions-right[b-nazttkhfgs] {
        gap: 6px;
        top: 10px;
        right: 10px;
    }

    .table-actions-left fluent-button[b-nazttkhfgs],
    .table-actions-right fluent-button[b-nazttkhfgs] {
        min-width: 34px;
        height: 34px;
        padding: 6px;
    }
}

@media (max-width: 480px) {
    .floor-section[b-nazttkhfgs] {
        margin-bottom: 1.5rem;
    }

    .floor-header[b-nazttkhfgs] {
        padding: 8px 10px;
        gap: 8px;
    }

    .floor-title[b-nazttkhfgs] {
        font-size: 1rem;
    }

    .floor-count[b-nazttkhfgs] {
        font-size: 0.8rem;
    }

    .tables-grid[b-nazttkhfgs] {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 10px;
    }

    .table-card[b-nazttkhfgs] {
        cursor: pointer;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        padding: 1.3rem 0.7rem;
        min-height: 140px;
    }

}

.table-card:hover[b-nazttkhfgs] {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

    .table-actions-left fluent-button[b-nazttkhfgs],
    .table-actions-right fluent-button[b-nazttkhfgs] {
        min-width: 32px;
        height: 32px;
        padding: 5px;
        z-index: 10;
        position: relative;
    }
/* /Components/Pages/Wallet/TokenPurchase.razor.rz.scp.css */
.package-list-lean[b-cdn1e0ael0] {
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-top: 12px;
}

.package-lean-card[b-cdn1e0ael0] {
    background: var(--neutral-layer-1);
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(80, 80, 120, 0.07);
    border: 1.5px solid var(--accent-stroke-rest);
    min-width: 240px;
    max-width: 270px;
    flex: 1 1 240px;
    padding: 32px 24px 24px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    transition: box-shadow 0.18s, border-color 0.18s, transform 0.15s;
}

    .package-lean-card:hover[b-cdn1e0ael0] {
        box-shadow: 0 8px 32px rgba(80, 80, 120, 0.13);
        border-color: var(--accent-stroke-hover, var(--accent-stroke-rest));
        transform: translateY(-2px) scale(1.01);
    }

.package-icon[b-cdn1e0ael0] {
    font-size: 2.5rem;
    margin-bottom: 12px;
    color: var(--accent-foreground-rest);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
}

.package-title[b-cdn1e0ael0] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--neutral-foreground-rest);
    margin-bottom: 4px;
    text-align: center;
}

.package-desc[b-cdn1e0ael0] {
    font-size: 0.98rem;
    color: var(--neutral-foreground-hint);
    margin-bottom: 18px;
    text-align: center;
    min-height: 36px;
}

.package-price[b-cdn1e0ael0] {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--accent-foreground-rest);
    margin-bottom: 12px;
}

.package-details[b-cdn1e0ael0] {
    font-size: 0.98rem;
    color: var(--neutral-foreground-rest);
    margin-bottom: 18px;
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.main-detail b[b-cdn1e0ael0],
.bonus-detail b[b-cdn1e0ael0],
.total-detail b[b-cdn1e0ael0] {
    color: var(--accent-foreground-rest);
    font-weight: 600;
}

.bonus-detail[b-cdn1e0ael0] {
    color: var(--success-foreground-rest);
}

.total-detail[b-cdn1e0ael0] {
    color: var(--success-foreground-rest);
}

.buy-btn[b-cdn1e0ael0] {
    background: var(--accent-fill-rest);
    color: var(--foreground-on-accent-rest);
    border: none;
    border-radius: 8px;
    padding: 10px 32px;
    font-size: 1.08rem;
    font-weight: 700;
    cursor: pointer;
    margin-top: auto;
    transition: background 0.15s;
    box-shadow: 0 2px 8px rgba(80, 80, 120, 0.06);
}

    .buy-btn:hover[b-cdn1e0ael0] {
        background: var(--accent-fill-hover, #233b8b);
    }

.bonus-detail[b-cdn1e0ael0],
.total-detail[b-cdn1e0ael0],
.bonus-detail b[b-cdn1e0ael0],
.total-detail b[b-cdn1e0ael0] {
    color: var(--success-foreground-rest, #16a34a);
    font-weight: 600;
}

.popular-badge-fixed[b-cdn1e0ael0] {
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    background: #ffe066;
    color: #222;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 8px;
    padding: 6px 18px;
    box-shadow: 0 2px 8px rgba(80, 80, 120, 0.06);
    z-index: 2;
    border: 1.5px solid #ffe066;
    white-space: nowrap;
}

.package-lean-card.popular[b-cdn1e0ael0] {
    border: 2.5px solid #ffe066;
}
/* /Components/Pages/Wallet/WalletDashboard.razor.rz.scp.css */
.wallet-card-clean[b-0a53yc6hey] {
    background: var(--neutral-layer-1);
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(80, 80, 120, 0.07);
    border: 1.5px solid var(--accent-stroke-rest);
    padding: 32px 24px 24px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 180px;
    margin-bottom: 8px;
    transition: box-shadow 0.18s, border-color 0.18s, transform 0.15s;
}

    .wallet-card-clean:hover[b-0a53yc6hey] {
        box-shadow: 0 8px 32px rgba(80, 80, 120, 0.13);
        border-color: var(--accent-stroke-hover, var(--accent-stroke-rest));
        transform: translateY(-2px) scale(1.01);
    }

.wallet-card-icon[b-0a53yc6hey] {
    font-size: 2.2rem;
    color: var(--accent-foreground-rest);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wallet-card-title[b-0a53yc6hey] {
    font-size: 1.08rem;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin-bottom: 6px;
    text-align: center;
}

.wallet-card-value[b-0a53yc6hey] {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--accent-foreground-rest);
    margin-bottom: 0;
    text-align: center;
}
/* /Components/Shared/CourierDetailMarkerPopup.razor.rz.scp.css */
.courier-popup-container[b-qe6kiwdi93] {
    width: 320px;
    max-width: 90vw;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    border: 1px solid #e1e5e9;
}

.courier-popup-header[b-qe6kiwdi93] {
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    color: white;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
}

.courier-avatar[b-qe6kiwdi93] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 18px;
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.courier-info[b-qe6kiwdi93] {
    flex: 1;
}

.courier-name-status[b-qe6kiwdi93] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.courier-name[b-qe6kiwdi93] {
    font-size: 16px;
    font-weight: 600;
    color: white;
    cursor: pointer;
    text-decoration: none;
    transition: opacity 0.2s;
}

.courier-name:hover[b-qe6kiwdi93] {
    opacity: 0.8;
    text-decoration: underline;
}

.courier-status[b-qe6kiwdi93] {
    font-size: 12px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    display: inline-block;
    width: fit-content;
}

.status-indicator[b-qe6kiwdi93] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid white;
}

.status-indicator.online[b-qe6kiwdi93] {
    background: #10b981;
}

.status-indicator.offline[b-qe6kiwdi93] {
    background: #ef4444;
}

.status-indicator.busy[b-qe6kiwdi93] {
    background: #f59e0b;
}

.courier-popup-body[b-qe6kiwdi93] {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.courier-detail-row[b-qe6kiwdi93] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #374151;
}

.courier-detail-row i[b-qe6kiwdi93] {
    width: 16px;
    height: 16px;
    color: #6b7280;
}

.courier-detail-row .label[b-qe6kiwdi93] {
    font-weight: 500;
    color: #6b7280;
    min-width: 120px;
}

.courier-detail-row .value[b-qe6kiwdi93] {
    font-weight: 600;
    color: #111827;
    flex: 1;
}

.badge[b-qe6kiwdi93] {
    background: #dbeafe;
    color: #1e40af;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    width: fit-content;
}

.courier-popup-actions[b-qe6kiwdi93] {
    padding: 12px 16px 16px;
    display: flex;
    gap: 8px;
}

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

.action-btn.primary[b-qe6kiwdi93] {
    background: #4f46e5;
    color: white;
}

.action-btn.primary:hover[b-qe6kiwdi93] {
    background: #4338ca;
    transform: translateY(-1px);
}

.action-btn.secondary[b-qe6kiwdi93] {
    background: #f97316;
    color: white;
}

.action-btn.secondary:hover[b-qe6kiwdi93] {
    background: #ea580c;
    transform: translateY(-1px);
}

.action-btn i[b-qe6kiwdi93] {
    width: 16px;
    height: 16px;
}

/* Icon styles */
.icon-phone[b-qe6kiwdi93]::before { content: "📞"; }
.icon-orders[b-qe6kiwdi93]::before { content: "📦"; }
.icon-time[b-qe6kiwdi93]::before { content: "🕒"; }
.icon-user[b-qe6kiwdi93]::before { content: "👤"; }
.icon-route[b-qe6kiwdi93]::before { content: "🗺️"; }

/* Status classes */
.online[b-qe6kiwdi93] {
    background: #10b981 !important;
}

.offline[b-qe6kiwdi93] {
    background: #ef4444 !important;
}

.busy[b-qe6kiwdi93] {
    background: #f59e0b !important;
}
/* /Components/Shared/LoadingOverlay.razor.rz.scp.css */
.loading-fullscreen[b-uid3x3fxii] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.95);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.loading-fullscreen h3[b-uid3x3fxii] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: #333;
}

.loading-fullscreen p[b-uid3x3fxii] {
    margin: 0;
    font-size: 0.875rem;
    color: #666;
}

.loading-overlay[b-uid3x3fxii] {
    position: absolute;
    z-index: 100;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    padding: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}
/* /Components/Shared/MetricCard.razor.rz.scp.css */
.wallet-card-icon[b-6om4j7i0yl] {
    font-size: 2.2rem;
    color: var(--accent-foreground-rest);
    display: flex;
    align-items: center;
    justify-content: center;
}

.wallet-card-title[b-6om4j7i0yl] {
    font-size: 1.08rem;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin-bottom: 6px;
}

.wallet-card-value[b-6om4j7i0yl] {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--accent-foreground-rest);
    margin-bottom: 0;
}
/* /Components/Shared/TourOverlay.razor.rz.scp.css */
/* Overlay pieces - 4 divs around highlighted element */
.tour-overlay-piece[b-vmts4meq0n] {
    position: fixed;
    background: rgba(0, 0, 0, 0.75);
    z-index: 9998;
    pointer-events: none;
    animation: fadeIn-b-vmts4meq0n 0.3s ease;
}

/* Tooltip container */
.tour-tooltip[b-vmts4meq0n],
#tour-tooltip-container[b-vmts4meq0n] {
    position: fixed;
    z-index: 10002; /* Above everything */
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    max-width: 400px;
    min-width: 320px;
    animation: slideIn-b-vmts4meq0n 0.3s ease;
}

.tour-tooltip-header[b-vmts4meq0n] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 20px 12px;
    border-bottom: 1px solid #e5e7eb;
}

.tour-progress[b-vmts4meq0n] {
    font-size: 12px;
    color: #6b7280;
    background: #f3f4f6;
    padding: 4px 10px;
    border-radius: 12px;
    font-weight: 600;
}

.tour-tooltip-body[b-vmts4meq0n] {
    padding: 16px 20px;
    color: #4b5563;
    line-height: 1.6;
}

.tour-tooltip-footer[b-vmts4meq0n] {
    padding: 12px 20px 20px;
}

@keyframes fadeIn-b-vmts4meq0n {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideIn-b-vmts4meq0n {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Note: tour-pulse animation is defined globally in app.css */