/* /Components/AddressForm.razor.rz.scp.css */
/* TalkFood - Address Form Component Styles (Grid Layout) */

/* Container CSS Grid */
.address-grid[b-emsxfivu6y] {
    display: grid;
    gap: var(--tf-space-md);
    width: 100%;
    /* Desktop: 3 columns */
    /* Col 1 (Should be smaller for CEP/Num), Col 2 & 3 Flexible */
    grid-template-columns: 130px 100px 1fr;
    grid-template-areas:
        "cep street street"
        "number comp comp"
        "bairro bairro city";
}

/* Assign areas */
.area-cep[b-emsxfivu6y] {
    grid-area: cep;
}

.area-street[b-emsxfivu6y] {
    grid-area: street;
}

.area-number[b-emsxfivu6y] {
    grid-area: number;
}

.area-comp[b-emsxfivu6y] {
    grid-area: comp;
}

.area-neighborhood[b-emsxfivu6y] {
    grid-area: bairro;
}

.area-city[b-emsxfivu6y] {
    grid-area: city;
}

/* ===== COMMON STYLES ===== */
.form-group[b-emsxfivu6y] {
    width: 100%;
}

.form-group label[b-emsxfivu6y] {
    display: block;
    margin-bottom: var(--tf-space-xs);
    font-weight: var(--tf-font-medium);
    color: var(--tf-text);
    font-size: var(--tf-text-sm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.form-group label .required[b-emsxfivu6y] {
    color: #DC2626;
}

/* ===== INPUTS ===== */
.input-wrapper[b-emsxfivu6y] {
    position: relative;
    display: flex;
    align-items: center;
}

.input-wrapper input[b-emsxfivu6y] {
    padding-right: var(--tf-space-xl);
}

.form-input[b-emsxfivu6y] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--tf-border);
    border-radius: var(--tf-radius-md);
    font-size: var(--tf-text-base);
    /* 1rem = 16px usually, good for mobile */
    font-family: var(--tf-font);
    background-color: white;
    box-sizing: border-box;
    transition: all var(--tf-transition-fast);
}

.form-input:focus[b-emsxfivu6y] {
    outline: none;
    border-color: var(--tf-primary);
    box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.1);
}

.form-input:disabled[b-emsxfivu6y] {
    background-color: var(--tf-bg-secondary);
    cursor: not-allowed;
    color: var(--tf-text-secondary);
    opacity: 0.8;
}

/* Readonly fields slightly different bg */
.readonly-group .form-input[b-emsxfivu6y] {
    background-color: #f3f4f6;
    color: var(--tf-text-secondary);
}

/* ===== ICONS ===== */
.field-icon[b-emsxfivu6y] {
    position: absolute;
    right: 12px;
    font-size: var(--tf-text-base);
    pointer-events: none;
}

.valid-icon[b-emsxfivu6y] {
    color: var(--tf-accent);
}

.invalid-icon[b-emsxfivu6y] {
    color: #DC2626;
}

.field-valid .form-input[b-emsxfivu6y] {
    border-color: var(--tf-accent);
}

.field-invalid .form-input[b-emsxfivu6y] {
    border-color: #DC2626;
}

/* ===== SPINNER ===== */
.spinner-small[b-emsxfivu6y] {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--tf-border);
    border-top-color: var(--tf-primary);
    border-radius: 50%;
    animation: spin-b-emsxfivu6y 0.8s linear infinite;
}

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

/* ===== VALIDATION MSG ===== */
.validation-message[b-emsxfivu6y] {
    display: block;
    margin-top: 4px;
    font-size: 0.75rem;
    /* Small text */
    color: #DC2626;
}


/* ===== RESPONSIVE ===== */
@media (max-width: 500px) {
    .address-grid[b-emsxfivu6y] {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "cep cep"
            "street street"
            "number comp"
            "bairro city";
    }
}
/* /Components/AddressSelector.razor.rz.scp.css */
/* TalkFood - Address Selector Component Styles */

.address-selector[b-y49nv8xa20] {
    margin-bottom: var(--tf-space-md);
}

/* ===== HEADER ===== */
.saved-addresses-header[b-y49nv8xa20] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--tf-space-sm);
}

.header-label[b-y49nv8xa20] {
    font-size: var(--tf-text-sm);
    font-weight: var(--tf-font-medium);
    color: var(--tf-text-secondary);
}

.manage-button[b-y49nv8xa20] {
    background: none;
    border: none;
    color: var(--tf-primary);
    font-size: var(--tf-text-sm);
    font-weight: var(--tf-font-medium);
    cursor: pointer;
    padding: var(--tf-space-xs) var(--tf-space-sm);
    border-radius: var(--tf-radius-sm);
    transition: background-color var(--tf-transition-fast);
}

.manage-button:hover[b-y49nv8xa20] {
    background-color: var(--tf-gradient-subtle);
}

/* ===== ADDRESSES LIST ===== */
.saved-addresses-list[b-y49nv8xa20] {
    display: flex;
    flex-direction: column;
    gap: var(--tf-space-xs);
}

/* ===== ADDRESS ITEM ===== */
.saved-address-item[b-y49nv8xa20] {
    border: 2px solid var(--tf-border);
    border-radius: var(--tf-radius-md);
    overflow: hidden;
    transition: border-color var(--tf-transition-fast);
}

.saved-address-item.selected[b-y49nv8xa20] {
    border-color: var(--tf-primary);
    background-color: var(--tf-gradient-subtle);
}

.saved-address-item:hover:not(.manage-mode)[b-y49nv8xa20] {
    border-color: var(--tf-primary-light);
}

/* ===== SELECT BUTTON ===== */
.address-select-button[b-y49nv8xa20] {
    width: 100%;
    background: none;
    border: none;
    padding: var(--tf-space-sm) var(--tf-space-md);
    text-align: left;
    cursor: pointer;
}

.address-label-row[b-y49nv8xa20] {
    display: flex;
    align-items: center;
    gap: var(--tf-space-sm);
    margin-bottom: 2px;
}

.address-label[b-y49nv8xa20] {
    font-size: var(--tf-text-sm);
    font-weight: var(--tf-font-semibold);
    color: var(--tf-text);
}

.default-badge[b-y49nv8xa20] {
    font-size: var(--tf-text-xs);
    color: var(--tf-primary);
    background-color: var(--tf-gradient-subtle);
    padding: 2px 6px;
    border-radius: var(--tf-radius-sm);
}

.address-text[b-y49nv8xa20] {
    font-size: var(--tf-text-xs);
    color: var(--tf-text-secondary);
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ===== MANAGE MODE ===== */
.address-manage-row[b-y49nv8xa20] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--tf-space-sm) var(--tf-space-md);
}

.address-info[b-y49nv8xa20] {
    flex: 1;
    min-width: 0;
}

.manage-actions[b-y49nv8xa20] {
    display: flex;
    gap: var(--tf-space-xs);
    margin-left: var(--tf-space-sm);
}

.action-button[b-y49nv8xa20] {
    background: none;
    border: 1px solid var(--tf-border);
    border-radius: var(--tf-radius-sm);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--tf-transition-fast);
}

.default-action:hover[b-y49nv8xa20] {
    border-color: var(--tf-secondary);
    background-color: rgba(255, 184, 0, 0.1);
    color: var(--tf-secondary);
}

.delete-action:hover[b-y49nv8xa20] {
    border-color: #DC2626;
    background-color: #FEE2E2;
    color: #DC2626;
}

.default-star[b-y49nv8xa20] {
    color: var(--tf-secondary);
    font-size: var(--tf-text-lg);
    width: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ===== DIVIDER ===== */
.address-divider[b-y49nv8xa20] {
    display: flex;
    align-items: center;
    margin: var(--tf-space-md) 0;
    color: var(--tf-text-muted);
    font-size: var(--tf-text-xs);
}

.address-divider[b-y49nv8xa20]::before,
.address-divider[b-y49nv8xa20]::after {
    content: '';
    flex: 1;
    height: 1px;
    background-color: var(--tf-border);
}

.address-divider span[b-y49nv8xa20] {
    padding: 0 var(--tf-space-sm);
}
/* /Components/CartItem.razor.rz.scp.css */
/* TalkFood - Cart Item Component Styles */

.cart-item[b-1cgsryi4f2] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: var(--tf-space-md) var(--tf-space-lg);
    border-bottom: 1px solid var(--tf-border);
    transition: transform 250ms ease-out, opacity 250ms ease-out, background-color 300ms ease-out;
    transform: translateX(0);
    opacity: 1;
}

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

/* Slide-out animation when removing */
.cart-item.removing[b-1cgsryi4f2] {
    transform: translateX(100%);
    opacity: 0;
}

/* Highlight animation when quantity changes */
.cart-item.highlighting[b-1cgsryi4f2] {
    background-color: var(--tf-gradient-subtle);
}

/* ===== ITEM INFO ===== */
.item-info[b-1cgsryi4f2] {
    flex: 1;
    min-width: 0;
}

.item-name[b-1cgsryi4f2] {
    margin: 0 0 var(--tf-space-xs) 0;
    font-size: var(--tf-text-base);
    font-weight: var(--tf-font-medium);
    color: var(--tf-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.item-price[b-1cgsryi4f2] {
    font-size: var(--tf-text-sm);
    color: var(--tf-text-secondary);
}

.item-observations[b-1cgsryi4f2] {
    margin: var(--tf-space-sm) 0 0 0;
    font-size: var(--tf-text-xs);
    color: var(--tf-text-muted);
    font-style: italic;
}

/* ===== ITEM CONTROLS ===== */
.item-controls[b-1cgsryi4f2] {
    display: flex;
    align-items: center;
    gap: var(--tf-space-sm);
}

/* ===== QUANTITY CONTROLS ===== */
.quantity-controls[b-1cgsryi4f2] {
    display: flex;
    align-items: center;
    gap: var(--tf-space-sm);
    background-color: var(--tf-bg-secondary);
    border-radius: var(--tf-radius-full);
    padding: 4px;
}

.quantity-button[b-1cgsryi4f2] {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background-color: var(--tf-bg);
    color: var(--tf-primary);
    font-size: var(--tf-text-base);
    font-weight: var(--tf-font-bold);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--tf-transition-fast);
}

.quantity-button:hover:not(:disabled)[b-1cgsryi4f2] {
    background: var(--tf-gradient);
    color: white;
}

.quantity-button:disabled[b-1cgsryi4f2] {
    color: var(--tf-border);
    cursor: not-allowed;
}

.quantity-value[b-1cgsryi4f2] {
    min-width: 24px;
    text-align: center;
    font-weight: var(--tf-font-semibold);
    color: var(--tf-text);
    transition: transform 200ms ease-out, color 200ms ease-out;
}

/* Quantity highlight animation */
.quantity-value.highlight[b-1cgsryi4f2] {
    transform: scale(1.3);
    color: var(--tf-primary);
}

/* ===== SUBTOTAL ===== */
.item-subtotal[b-1cgsryi4f2] {
    font-weight: var(--tf-font-semibold);
    color: var(--tf-text);
    min-width: 80px;
    text-align: right;
}

/* ===== REMOVE BUTTON ===== */
.remove-button[b-1cgsryi4f2] {
    background: none;
    border: none;
    color: var(--tf-text-muted);
    font-size: var(--tf-text-base);
    cursor: pointer;
    padding: var(--tf-space-xs);
    transition: color var(--tf-transition-fast);
    border-radius: 50%;
}

.remove-button:hover[b-1cgsryi4f2] {
    color: #DC2626;
    background-color: #FEE2E2;
}
/* /Components/CartPanel.razor.rz.scp.css */
/* TalkFood - Cart Panel Component Styles */

.cart-panel[b-lqdnl3pkzw] {
    position: fixed;
    top: 0;
    right: 0;
    width: 400px;
    max-width: 100vw;
    height: 100vh;
    background-color: var(--tf-bg);
    box-shadow: var(--tf-shadow-xl);
    display: flex;
    flex-direction: column;
    z-index: var(--tf-z-modal);
    transform: translateX(100%);
    transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

.cart-panel.open[b-lqdnl3pkzw] {
    transform: translateX(0);
}

/* ===== OVERLAY ===== */
.cart-overlay[b-lqdnl3pkzw] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: calc(var(--tf-z-modal) - 1);
    animation: fadeIn-b-lqdnl3pkzw var(--tf-transition-fast);
}

@keyframes fadeIn-b-lqdnl3pkzw {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ===== HEADER ===== */
.cart-header[b-lqdnl3pkzw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--tf-space-md) var(--tf-space-lg);
    border-bottom: 1px solid var(--tf-border);
}

.cart-header h3[b-lqdnl3pkzw] {
    margin: 0;
    font-size: var(--tf-text-xl);
    font-weight: var(--tf-font-semibold);
    color: var(--tf-text);
}

.close-button[b-lqdnl3pkzw] {
    background: none;
    border: none;
    font-size: var(--tf-text-xl);
    color: var(--tf-text-secondary);
    cursor: pointer;
    padding: var(--tf-space-sm);
    line-height: 1;
    transition: color var(--tf-transition-fast);
    border-radius: 50%;
}

.close-button:hover[b-lqdnl3pkzw] {
    color: var(--tf-text);
    background-color: var(--tf-bg-secondary);
}

/* ===== EMPTY STATE ===== */
.cart-empty[b-lqdnl3pkzw] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--tf-space-xl);
    text-align: center;
    color: var(--tf-text-muted);
}

.empty-icon[b-lqdnl3pkzw] {
    font-size: 4rem;
    margin-bottom: var(--tf-space-md);
    opacity: 0.5;
}

.cart-empty p[b-lqdnl3pkzw] {
    margin: var(--tf-space-xs) 0;
    color: var(--tf-text-secondary);
}

.empty-hint[b-lqdnl3pkzw] {
    font-size: var(--tf-text-sm);
}

/* ===== ESTABLISHMENT BANNER ===== */
.cart-establishment[b-lqdnl3pkzw] {
    display: flex;
    align-items: center;
    gap: var(--tf-space-sm);
    padding: var(--tf-space-md) var(--tf-space-lg);
    background: var(--tf-gradient-subtle);
    color: var(--tf-primary);
    font-weight: var(--tf-font-medium);
}

.establishment-icon[b-lqdnl3pkzw] {
    font-size: var(--tf-text-xl);
}

/* ===== ITEMS LIST ===== */
.cart-items[b-lqdnl3pkzw] {
    flex: 1;
    overflow-y: auto;
    padding: var(--tf-space-sm) 0;
}

/* Custom scrollbar */
.cart-items[b-lqdnl3pkzw]::-webkit-scrollbar {
    width: 6px;
}

.cart-items[b-lqdnl3pkzw]::-webkit-scrollbar-track {
    background: transparent;
}

.cart-items[b-lqdnl3pkzw]::-webkit-scrollbar-thumb {
    background: var(--tf-border);
    border-radius: var(--tf-radius-full);
}

/* ===== FOOTER ===== */
.cart-footer[b-lqdnl3pkzw] {
    padding: var(--tf-space-md) var(--tf-space-lg);
    border-top: 1px solid var(--tf-border);
    background-color: var(--tf-bg-secondary);
}

/* ===== DELIVERY ESTIMATE ===== */
.cart-delivery-estimate[b-lqdnl3pkzw] {
    display: flex;
    align-items: center;
    gap: var(--tf-space-sm);
    padding: var(--tf-space-sm) var(--tf-space-md);
    background-color: var(--tf-bg);
    border-radius: var(--tf-radius-md);
    margin-bottom: var(--tf-space-md);
    font-size: var(--tf-text-sm);
    color: var(--tf-text-secondary);
}

.estimate-icon[b-lqdnl3pkzw] {
    font-size: var(--tf-text-base);
}

.cart-total[b-lqdnl3pkzw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--tf-space-md);
    font-size: var(--tf-text-lg);
    color: var(--tf-text-secondary);
}

.total-value[b-lqdnl3pkzw] {
    font-size: var(--tf-text-2xl);
    font-weight: var(--tf-font-bold);
    color: var(--tf-text);
}

/* ===== ACTION BUTTONS ===== */
.confirm-button[b-lqdnl3pkzw] {
    width: 100%;
    padding: var(--tf-space-md);
    background: var(--tf-gradient);
    color: white;
    border: none;
    border-radius: var(--tf-radius-md);
    font-size: var(--tf-text-base);
    font-weight: var(--tf-font-semibold);
    cursor: pointer;
    transition: all var(--tf-transition-fast);
    margin-bottom: var(--tf-space-sm);
    box-shadow: var(--tf-shadow-primary);
}

.confirm-button:hover[b-lqdnl3pkzw] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 107, 53, 0.4);
}

.confirm-button:active[b-lqdnl3pkzw] {
    transform: translateY(0);
}

.clear-button[b-lqdnl3pkzw] {
    width: 100%;
    padding: var(--tf-space-sm);
    background-color: transparent;
    color: var(--tf-text-muted);
    border: 1px solid var(--tf-border);
    border-radius: var(--tf-radius-md);
    font-size: var(--tf-text-sm);
    cursor: pointer;
    transition: all var(--tf-transition-fast);
}

.clear-button:hover[b-lqdnl3pkzw] {
    border-color: var(--tf-primary);
    color: var(--tf-primary);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 480px) {
    .cart-panel[b-lqdnl3pkzw] {
        width: 100vw;
    }
}
/* /Components/ChatContainer.razor.rz.scp.css */
/* TalkFood - Chat Container Component Styles */

.chat-container[b-lxlporm48t] {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: 100vh;
    background-color: var(--tf-bg-secondary);
}

/* ===== MESSAGES AREA ===== */
.chat-messages[b-lxlporm48t] {
    flex: 1;
    overflow-y: auto;
    padding: var(--tf-space-md);
    display: flex;
    flex-direction: column;
    gap: var(--tf-space-sm);
    scroll-behavior: smooth;
}

/* Custom scrollbar */
.chat-messages[b-lxlporm48t]::-webkit-scrollbar {
    width: 6px;
}

.chat-messages[b-lxlporm48t]::-webkit-scrollbar-track {
    background: transparent;
}

.chat-messages[b-lxlporm48t]::-webkit-scrollbar-thumb {
    background: var(--tf-border);
    border-radius: var(--tf-radius-full);
}

.chat-messages[b-lxlporm48t]::-webkit-scrollbar-thumb:hover {
    background: var(--tf-text-muted);
}

/* ===== SUGGESTIONS ===== */
.suggestions-container[b-lxlporm48t] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tf-space-sm);
    padding: var(--tf-space-sm) 0;
}

/* ===== INPUT AREA ===== */
.chat-input-container[b-lxlporm48t] {
    display: flex;
    gap: var(--tf-space-sm);
    padding: var(--tf-space-md);
    background-color: var(--tf-bg);
    border-top: 1px solid var(--tf-border);
}

.chat-input[b-lxlporm48t] {
    flex: 1;
    padding: var(--tf-space-sm) var(--tf-space-md);
    border: 2px solid var(--tf-border);
    border-radius: var(--tf-radius-full);
    font-size: var(--tf-text-base);
    font-family: var(--tf-font);
    outline: none;
    transition: border-color var(--tf-transition-fast), box-shadow var(--tf-transition-fast);
}

.chat-input:focus[b-lxlporm48t] {
    border-color: var(--tf-primary);
    box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.15);
}

.chat-input:disabled[b-lxlporm48t] {
    background-color: var(--tf-bg-secondary);
}

.chat-input[b-lxlporm48t]::placeholder {
    color: var(--tf-text-muted);
}

/* ===== SEND BUTTON ===== */
.send-button[b-lxlporm48t] {
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 50%;
    background: var(--tf-gradient);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--tf-transition-fast);
    box-shadow: var(--tf-shadow-primary);
    flex-shrink: 0;
}

.send-button:hover:not(:disabled)[b-lxlporm48t] {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(255, 107, 53, 0.4);
}

.send-button:active:not(:disabled)[b-lxlporm48t] {
    transform: scale(0.95);
}

.send-button:disabled[b-lxlporm48t] {
    background: var(--tf-border);
    cursor: not-allowed;
    box-shadow: none;
}

.send-icon[b-lxlporm48t] {
    font-size: var(--tf-text-xl);
}

/* ===== TYPING INDICATOR ===== */
.typing-indicator-wrapper[b-lxlporm48t] {
    padding: var(--tf-space-sm) 0;
    animation: fadeIn-b-lxlporm48t var(--tf-transition-fast);
}

@keyframes fadeIn-b-lxlporm48t {
    from { opacity: 0; }
    to { opacity: 1; }
}

.typing-indicator[b-lxlporm48t] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: var(--tf-space-md);
    background-color: var(--tf-bg);
    border-radius: var(--tf-radius-lg);
    border-bottom-left-radius: var(--tf-radius-sm);
    width: fit-content;
    box-shadow: var(--tf-shadow-sm);
}

.typing-dot[b-lxlporm48t] {
    width: 8px;
    height: 8px;
    background-color: var(--tf-text-muted);
    border-radius: 50%;
    animation: typingBounce-b-lxlporm48t 1.4s infinite ease-in-out both;
}

.typing-dot:nth-child(1)[b-lxlporm48t] {
    animation-delay: -0.32s;
}

.typing-dot:nth-child(2)[b-lxlporm48t] {
    animation-delay: -0.16s;
}

.typing-dot:nth-child(3)[b-lxlporm48t] {
    animation-delay: 0s;
}

@keyframes typingBounce-b-lxlporm48t {
    0%, 80%, 100% {
        transform: scale(0.8);
        opacity: 0.5;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}
/* /Components/ChatDemo.razor.rz.scp.css */
/* ChatDemo - Preview animado do chat */

.chat-demo[b-eigzlzu1ww] {
    width: 100%;
    max-width: 380px;
    background: var(--tf-bg);
    border-radius: var(--tf-radius-xl);
    box-shadow: var(--tf-shadow-xl);
    overflow: hidden;
    margin: 0 auto;
}

/* Header */
.chat-demo-header[b-eigzlzu1ww] {
    display: flex;
    align-items: center;
    gap: var(--tf-space-sm);
    padding: var(--tf-space-md);
    background: var(--tf-gradient);
    color: white;
}

.chat-demo-avatar[b-eigzlzu1ww] {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--tf-font-bold);
    font-size: var(--tf-text-lg);
}

.chat-demo-title[b-eigzlzu1ww] {
    display: flex;
    flex-direction: column;
}

.chat-demo-name[b-eigzlzu1ww] {
    font-weight: var(--tf-font-semibold);
    font-size: var(--tf-text-base);
}

.chat-demo-status[b-eigzlzu1ww] {
    font-size: var(--tf-text-xs);
    opacity: 0.9;
}

/* Messages */
.chat-demo-messages[b-eigzlzu1ww] {
    padding: var(--tf-space-md);
    min-height: 280px;
    max-height: 280px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: var(--tf-space-sm);
    background: var(--tf-bg-secondary);
}

.chat-demo-message[b-eigzlzu1ww] {
    max-width: 85%;
    padding: var(--tf-space-sm) var(--tf-space-md);
    border-radius: var(--tf-radius-lg);
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
}

.chat-demo-message.visible[b-eigzlzu1ww] {
    opacity: 1;
    transform: translateY(0);
}

.chat-demo-message.user[b-eigzlzu1ww] {
    background: var(--tf-gradient);
    color: white;
    align-self: flex-end;
    border-bottom-right-radius: 4px;
}

.chat-demo-message.bot[b-eigzlzu1ww] {
    background: var(--tf-bg);
    color: var(--tf-text);
    align-self: flex-start;
    border-bottom-left-radius: 4px;
    box-shadow: var(--tf-shadow-sm);
}

.chat-demo-message p[b-eigzlzu1ww] {
    margin: 0;
    font-size: var(--tf-text-sm);
    line-height: 1.4;
}

/* Products */
.chat-demo-products[b-eigzlzu1ww] {
    display: flex;
    flex-direction: column;
    gap: var(--tf-space-xs);
}

.chat-demo-product[b-eigzlzu1ww] {
    display: flex;
    align-items: center;
    gap: var(--tf-space-sm);
    padding: var(--tf-space-xs) var(--tf-space-sm);
    background: var(--tf-bg-secondary);
    border-radius: var(--tf-radius-sm);
    font-size: var(--tf-text-sm);
}

.product-icon[b-eigzlzu1ww] {
    font-size: var(--tf-text-lg);
}

.product-name[b-eigzlzu1ww] {
    flex: 1;
    font-weight: var(--tf-font-medium);
}

.product-price[b-eigzlzu1ww] {
    color: var(--tf-primary);
    font-weight: var(--tf-font-semibold);
}

/* Typing indicator */
.typing-indicator[b-eigzlzu1ww] {
    display: flex;
    gap: 4px;
    padding: var(--tf-space-xs) 0;
}

.typing-indicator span[b-eigzlzu1ww] {
    width: 8px;
    height: 8px;
    background: var(--tf-text-muted);
    border-radius: 50%;
    animation: typing-b-eigzlzu1ww 1.4s infinite;
}

.typing-indicator span:nth-child(2)[b-eigzlzu1ww] {
    animation-delay: 0.2s;
}

.typing-indicator span:nth-child(3)[b-eigzlzu1ww] {
    animation-delay: 0.4s;
}

@keyframes typing-b-eigzlzu1ww {
    0%, 60%, 100% {
        transform: translateY(0);
        opacity: 0.4;
    }
    30% {
        transform: translateY(-4px);
        opacity: 1;
    }
}

/* Input */
.chat-demo-input[b-eigzlzu1ww] {
    display: flex;
    align-items: center;
    gap: var(--tf-space-sm);
    padding: var(--tf-space-md);
    border-top: 1px solid var(--tf-border);
    background: var(--tf-bg);
}

.input-placeholder[b-eigzlzu1ww] {
    flex: 1;
    color: var(--tf-text-muted);
    font-size: var(--tf-text-sm);
}

.send-btn[b-eigzlzu1ww] {
    width: 36px;
    height: 36px;
    border: none;
    background: var(--tf-gradient);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: not-allowed;
    opacity: 0.7;
}

/* Responsive */
@media (max-width: 640px) {
    .chat-demo[b-eigzlzu1ww] {
        max-width: 320px;
    }

    .chat-demo-messages[b-eigzlzu1ww] {
        min-height: 240px;
        max-height: 240px;
    }
}
/* /Components/ConfirmationForm.razor.rz.scp.css */
/* TalkFood - Confirmation Panel (Drawer) Styles */

/* ===== PAINEL PRINCIPAL (DRAWER) ===== */
.confirmation-panel[b-fdgcti6go0] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 480px;
    /* Largura padrão de drawer */
    background-color: var(--tf-bg);
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    animation: slideInRight-b-fdgcti6go0 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slideInRight-b-fdgcti6go0 {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0);
    }
}

/* ===== HEADER ===== */
.confirmation-header[b-fdgcti6go0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--tf-space-md) var(--tf-space-lg);
    background: var(--tf-bg);
    border-bottom: 1px solid var(--tf-border);
    flex-shrink: 0;
    z-index: 1;
}

.confirmation-header h3[b-fdgcti6go0] {
    margin: 0;
    color: var(--tf-text);
    font-size: var(--tf-text-lg);
    font-weight: var(--tf-font-semibold);
}

.close-button[b-fdgcti6go0] {
    background: transparent;
    border: none;
    color: var(--tf-text-secondary);
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color var(--tf-transition-fast);
}

.close-button:hover[b-fdgcti6go0] {
    background-color: var(--tf-bg-secondary);
    color: var(--tf-text);
}

/* ===== BODY (SCROLLABLE) ===== */
.confirmation-body[b-fdgcti6go0] {
    flex: 1;
    overflow-y: auto;
    padding: var(--tf-space-lg);
    background-color: #fafafa;
    /* Fundo levemente cinza para destacar inputs brancos */
    scrollbar-width: thin;
    scrollbar-color: var(--tf-border) transparent;
}

.confirmation-body[b-fdgcti6go0]::-webkit-scrollbar {
    width: 6px;
}

.confirmation-body[b-fdgcti6go0]::-webkit-scrollbar-thumb {
    background-color: var(--tf-border);
    border-radius: 3px;
}

/* ===== FOOTER (FIXED ACTIONS) ===== */
.confirmation-footer[b-fdgcti6go0] {
    padding: var(--tf-space-md) var(--tf-space-lg);
    background: var(--tf-bg);
    border-top: 1px solid var(--tf-border);
    display: flex;
    flex-direction: column;
    gap: var(--tf-space-md);
    flex-shrink: 0;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.05);
}

.footer-buttons[b-fdgcti6go0] {
    display: flex;
    gap: var(--tf-space-md);
    width: 100%;
}

/* ===== VALIDATION SUMMARY ===== */
.validation-summary[b-fdgcti6go0] {
    width: 100%;
    padding: var(--tf-space-sm) var(--tf-space-md);
    background-color: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: var(--tf-radius-md);
    margin-bottom: var(--tf-space-sm);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.validation-item[b-fdgcti6go0] {
    font-size: var(--tf-text-xs);
    color: #dc2626;
    font-weight: var(--tf-font-medium);
}

/* ===== FORM STYLES ===== */
.row-2-cols[b-fdgcti6go0] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--tf-space-md);
    margin-bottom: var(--tf-space-lg);
}

.row-2-cols .form-group[b-fdgcti6go0] {
    margin-bottom: 0;
}

.form-group[b-fdgcti6go0] {
    margin-bottom: var(--tf-space-lg);
}

.form-section[b-fdgcti6go0] {
    margin-bottom: var(--tf-space-lg);
    padding: var(--tf-space-md);
    background-color: white;
    border-radius: var(--tf-radius-md);
    border: 1px solid var(--tf-border);
    box-shadow: var(--tf-shadow-sm);
}

.section-label[b-fdgcti6go0] {
    display: block;
    margin-bottom: var(--tf-space-md);
    font-weight: var(--tf-font-bold);
    color: var(--tf-primary);
    font-size: var(--tf-text-sm);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.form-group label[b-fdgcti6go0] {
    display: block;
    margin-bottom: var(--tf-space-xs);
    font-weight: var(--tf-font-medium);
    color: var(--tf-text);
    font-size: var(--tf-text-sm);
}

/* ===== INPUTS ===== */
.input-wrapper[b-fdgcti6go0] {
    position: relative;
    display: flex;
    align-items: center;
}

.form-input[b-fdgcti6go0] {
    width: 100%;
    padding: 12px 16px;
    /* Mais área de toque */
    border: 1px solid var(--tf-border);
    border-radius: var(--tf-radius-md);
    font-size: var(--tf-text-base);
    font-family: var(--tf-font);
    background-color: white;
    transition: all var(--tf-transition-fast);
    box-sizing: border-box;
}

.form-input:focus[b-fdgcti6go0] {
    outline: none;
    border-color: var(--tf-primary);
    box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.1);
}

.form-textarea[b-fdgcti6go0] {
    resize: vertical;
    min-height: 80px;
}

/* ===== ICONS & VALIDATION ===== */
.field-icon[b-fdgcti6go0] {
    position: absolute;
    right: 12px;
    font-size: var(--tf-text-base);
    pointer-events: none;
}

.valid-icon[b-fdgcti6go0] {
    color: var(--tf-accent);
}

.invalid-icon[b-fdgcti6go0] {
    color: #DC2626;
}

.field-valid .form-input[b-fdgcti6go0] {
    border-color: var(--tf-accent);
}

.field-invalid .form-input[b-fdgcti6go0] {
    border-color: #DC2626;
}

.validation-message[b-fdgcti6go0] {
    display: block;
    margin-top: 4px;
    font-size: var(--tf-text-xs);
    color: #DC2626;
    font-weight: var(--tf-font-medium);
}

.form-hint[b-fdgcti6go0] {
    display: block;
    margin-top: 4px;
    font-size: var(--tf-text-xs);
    color: var(--tf-text-muted);
}

/* ===== BUTTONS ===== */
.cancel-button[b-fdgcti6go0] {
    flex: 1;
    padding: 12px;
    background-color: transparent;
    color: var(--tf-text-secondary);
    border: 1px solid var(--tf-border);
    border-radius: var(--tf-radius-md);
    font-size: var(--tf-text-base);
    font-weight: var(--tf-font-medium);
    cursor: pointer;
    transition: all var(--tf-transition-fast);
}

.cancel-button:hover[b-fdgcti6go0] {
    background-color: var(--tf-bg-secondary);
    border-color: var(--tf-text-secondary);
    color: var(--tf-text);
}

.submit-button[b-fdgcti6go0] {
    flex: 2;
    padding: 12px;
    background: var(--tf-gradient);
    color: white;
    border: none;
    border-radius: var(--tf-radius-md);
    font-size: var(--tf-text-base);
    font-weight: var(--tf-font-bold);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--tf-space-sm);
    transition: all var(--tf-transition-fast);
    box-shadow: var(--tf-shadow-primary);
}

.submit-button:hover:not(:disabled)[b-fdgcti6go0] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 107, 53, 0.3);
}

.submit-button:disabled[b-fdgcti6go0] {
    background: var(--tf-border);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* ===== EXTRAS ===== */
.save-address-option[b-fdgcti6go0] {
    margin-top: var(--tf-space-md);
    padding-top: var(--tf-space-md);
    border-top: 1px solid var(--tf-border-light);
}

.checkbox-label[b-fdgcti6go0] {
    display: flex;
    align-items: center;
    gap: var(--tf-space-sm);
    cursor: pointer;
    font-size: var(--tf-text-sm);
    font-weight: var(--tf-font-medium);
    color: var(--tf-text);
}

.address-label-input[b-fdgcti6go0] {
    margin-top: var(--tf-space-sm);
}

.spinner[b-fdgcti6go0] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-fdgcti6go0 0.8s linear infinite;
}

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

/* ===== RESPONSIVE ===== */
@media (max-width: 480px) {
    .confirmation-panel[b-fdgcti6go0] {
        max-width: 100%;
        /* Full screen on mobile */
    }
}
/* /Components/MessageBubble.razor.rz.scp.css */
/* TalkFood - Message Bubble Component Styles */

.message-bubble[b-o0v7rcbb8d] {
    max-width: 80%;
    padding: var(--tf-space-sm) var(--tf-space-md);
    border-radius: var(--tf-radius-lg);
    position: relative;
    animation: fadeIn-b-o0v7rcbb8d var(--tf-transition-fast);
}

@keyframes fadeIn-b-o0v7rcbb8d {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== USER MESSAGE ===== */
.user-message[b-o0v7rcbb8d] {
    align-self: flex-end;
    background: var(--tf-gradient);
    color: white;
    border-bottom-right-radius: var(--tf-radius-sm);
    box-shadow: var(--tf-shadow-sm);
}

/* ===== ASSISTANT MESSAGE ===== */
.assistant-message[b-o0v7rcbb8d] {
    align-self: flex-start;
    background-color: var(--tf-bg);
    color: var(--tf-text);
    border-bottom-left-radius: var(--tf-radius-sm);
    box-shadow: var(--tf-shadow-sm);
}

/* ===== MESSAGE CONTENT ===== */
.message-content p[b-o0v7rcbb8d] {
    margin: 0;
    line-height: var(--tf-leading-normal);
    word-wrap: break-word;
}

/* ===== TIMESTAMP ===== */
.message-time[b-o0v7rcbb8d] {
    font-size: var(--tf-text-xs);
    opacity: 0.7;
    display: block;
    text-align: right;
    margin-top: var(--tf-space-xs);
}

.user-message .message-time[b-o0v7rcbb8d] {
    color: rgba(255, 255, 255, 0.8);
}

.assistant-message .message-time[b-o0v7rcbb8d] {
    color: var(--tf-text-muted);
}

/* ===== CARD MESSAGE ===== */
.message-card[b-o0v7rcbb8d] {
    background-color: var(--tf-bg-secondary);
    border-radius: var(--tf-radius-md);
    padding: var(--tf-space-sm);
}

/* ===== CONFIRMATION MESSAGE ===== */
.message-confirmation[b-o0v7rcbb8d] {
    display: flex;
    align-items: center;
    gap: var(--tf-space-sm);
}

.confirmation-icon[b-o0v7rcbb8d] {
    color: var(--tf-accent);
    font-size: var(--tf-text-xl);
    font-weight: var(--tf-font-bold);
}
/* /Components/PhoneInput.razor.rz.scp.css */
/* TalkFood - Phone Input Component Styles */

.phone-input-container[b-iu3njl9mju] {
    position: relative;
    display: flex;
    align-items: center;
}

.phone-input-container input[b-iu3njl9mju] {
    padding-right: var(--tf-space-xl);
}

/* Valid/Invalid icons */
.phone-valid-icon[b-iu3njl9mju],
.phone-invalid-icon[b-iu3njl9mju] {
    position: absolute;
    right: var(--tf-space-md);
    font-size: var(--tf-text-base);
    pointer-events: none;
}

.phone-valid-icon[b-iu3njl9mju] {
    color: var(--tf-accent);
}

.phone-invalid-icon[b-iu3njl9mju] {
    color: #DC2626;
}

/* Input validation states */
.phone-input-container input.valid[b-iu3njl9mju] {
    border-color: var(--tf-accent);
}

.phone-input-container input.valid:focus[b-iu3njl9mju] {
    box-shadow: 0 0 0 3px rgba(33, 191, 6, 0.15);
}

.phone-input-container input.invalid[b-iu3njl9mju] {
    border-color: #DC2626;
}

.phone-input-container input.invalid:focus[b-iu3njl9mju] {
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}
/* /Components/ProductCard.razor.rz.scp.css */
/* TalkFood - Product Card Component Styles */

.product-card[b-y4gkg46x28] {
    background-color: var(--tf-bg);
    border-radius: var(--tf-radius-lg);
    overflow: hidden;
    box-shadow: var(--tf-shadow-md);
    width: 280px;
    transition: all var(--tf-transition-base);
    border: 1px solid var(--tf-border);
}

.product-card:hover[b-y4gkg46x28] {
    transform: translateY(-4px);
    box-shadow: var(--tf-shadow-lg);
    border-color: var(--tf-primary-light);
}

/* ===== PRODUCT IMAGE ===== */
.product-image[b-y4gkg46x28] {
    height: 140px;
    overflow: hidden;
    background-color: var(--tf-bg-secondary);
    position: relative;
}

.product-image img[b-y4gkg46x28] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--tf-transition-base), opacity var(--tf-transition-base);
    opacity: 0;
}

.product-image img.loaded[b-y4gkg46x28] {
    opacity: 1;
}

.product-card:hover .product-image img.loaded[b-y4gkg46x28] {
    transform: scale(1.05);
}

/* Image loading state with blur placeholder */
.product-image.loading .image-placeholder-blur[b-y4gkg46x28] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        135deg,
        var(--tf-bg-secondary) 0%,
        #e8e8e8 50%,
        var(--tf-bg-secondary) 100%
    );
    background-size: 200% 200%;
    animation: shimmer-b-y4gkg46x28 1.5s infinite;
}

@keyframes shimmer-b-y4gkg46x28 {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

.product-image.placeholder[b-y4gkg46x28] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--tf-gradient);
}

.placeholder-icon[b-y4gkg46x28] {
    font-size: 3rem;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

/* ===== PRODUCT INFO ===== */
.product-info[b-y4gkg46x28] {
    padding: var(--tf-space-md);
}

.product-name[b-y4gkg46x28] {
    margin: 0 0 var(--tf-space-xs) 0;
    font-size: var(--tf-text-base);
    font-weight: var(--tf-font-semibold);
    color: var(--tf-text);
    line-height: var(--tf-leading-tight);
}

.product-establishment[b-y4gkg46x28] {
    margin: 0 0 var(--tf-space-sm) 0;
    font-size: var(--tf-text-sm);
    color: var(--tf-text-secondary);
}

/* ===== PRODUCT DETAILS ===== */
.product-details[b-y4gkg46x28] {
    display: flex;
    gap: var(--tf-space-md);
    margin-bottom: var(--tf-space-sm);
}

.detail-item[b-y4gkg46x28] {
    font-size: var(--tf-text-xs);
    color: var(--tf-text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}

.detail-icon[b-y4gkg46x28] {
    font-size: var(--tf-text-sm);
}

/* ===== PRODUCT STATUS ===== */
.product-status[b-y4gkg46x28] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: var(--tf-text-xs);
    color: var(--tf-text-secondary);
    margin-bottom: var(--tf-space-sm);
}

.product-opens[b-y4gkg46x28] {
    color: var(--tf-primary-dark);
    font-weight: var(--tf-font-medium);
}

/* ===== PRODUCT BADGE ===== */
.product-badge[b-y4gkg46x28] {
    display: inline-block;
    background: var(--tf-gradient-subtle);
    color: var(--tf-primary);
    font-size: var(--tf-text-xs);
    font-weight: var(--tf-font-medium);
    padding: 4px 10px;
    border-radius: var(--tf-radius-full);
    margin-bottom: var(--tf-space-sm);
}

/* ===== PRODUCT FOOTER ===== */
.product-footer[b-y4gkg46x28] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--tf-space-sm);
    padding-top: var(--tf-space-sm);
    border-top: 1px solid var(--tf-border);
}

.product-price[b-y4gkg46x28] {
    font-size: var(--tf-text-xl);
    font-weight: var(--tf-font-bold);
    color: var(--tf-text);
}

/* ===== ADD BUTTON ===== */
.add-button[b-y4gkg46x28] {
    background: var(--tf-gradient);
    color: white;
    border: none;
    border-radius: var(--tf-radius-full);
    padding: var(--tf-space-sm) var(--tf-space-md);
    font-size: var(--tf-text-sm);
    font-weight: var(--tf-font-medium);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all var(--tf-transition-fast);
    box-shadow: var(--tf-shadow-primary);
}

.add-button:hover[b-y4gkg46x28] {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(255, 107, 53, 0.4);
}

.add-button:active[b-y4gkg46x28] {
    transform: scale(0.95);
}

.add-button span[b-y4gkg46x28] {
    font-size: var(--tf-text-base);
    font-weight: var(--tf-font-bold);
}

.add-button.adding[b-y4gkg46x28] {
    opacity: 0.8;
    cursor: not-allowed;
}

.add-button:disabled[b-y4gkg46x28] {
    transform: none;
}

/* ===== BUTTON SPINNER ===== */
.button-spinner[b-y4gkg46x28] {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-y4gkg46x28 0.8s linear infinite;
}

@keyframes spin-b-y4gkg46x28 {
    to {
        transform: rotate(360deg);
    }
}
/* /Components/QuickReplyButtons.razor.rz.scp.css */
/* TalkFood - Quick Reply Buttons Component Styles */

.quick-replies[b-7734d6zhsx] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tf-space-sm);
    padding: var(--tf-space-sm) 0;
}

.quick-reply-button[b-7734d6zhsx] {
    background-color: var(--tf-bg);
    border: 2px solid var(--tf-primary);
    color: var(--tf-primary);
    border-radius: var(--tf-radius-full);
    padding: var(--tf-space-sm) var(--tf-space-md);
    font-size: var(--tf-text-sm);
    font-weight: var(--tf-font-medium);
    cursor: pointer;
    transition: all var(--tf-transition-fast);
    white-space: nowrap;
}

.quick-reply-button:hover[b-7734d6zhsx] {
    background: var(--tf-gradient);
    border-color: transparent;
    color: white;
    box-shadow: var(--tf-shadow-primary);
}

.quick-reply-button:active[b-7734d6zhsx] {
    transform: scale(0.95);
}
/* /Components/Skeleton.razor.rz.scp.css */
/* TalkFood - Skeleton Component Styles */

.skeleton[b-9vztikbi1p] {
    --skeleton-base: #e0e0e0;
    --skeleton-shine: #f5f5f5;
}

/* ===== SHIMMER ANIMATION ===== */
@keyframes shimmer-b-9vztikbi1p {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* ===== BASE SKELETON LINE ===== */
.skeleton-line[b-9vztikbi1p] {
    background: linear-gradient(
        90deg,
        var(--skeleton-base) 25%,
        var(--skeleton-shine) 50%,
        var(--skeleton-base) 75%
    );
    background-size: 200% 100%;
    animation: shimmer-b-9vztikbi1p 1.5s infinite;
    border-radius: var(--tf-radius-sm);
    height: 16px;
    width: 100%;
}

.skeleton-line.short[b-9vztikbi1p] {
    width: 60%;
}

/* ===== PRODUCT CARD SKELETON ===== */
.skeleton-product-card[b-9vztikbi1p] {
    width: 280px;
    background-color: var(--tf-bg);
    border-radius: var(--tf-radius-lg);
    overflow: hidden;
    box-shadow: var(--tf-shadow-sm);
}

.skeleton-image[b-9vztikbi1p] {
    height: 140px;
    background: linear-gradient(
        90deg,
        var(--skeleton-base) 25%,
        var(--skeleton-shine) 50%,
        var(--skeleton-base) 75%
    );
    background-size: 200% 100%;
    animation: shimmer-b-9vztikbi1p 1.5s infinite;
}

.skeleton-content[b-9vztikbi1p] {
    padding: var(--tf-space-md);
    display: flex;
    flex-direction: column;
    gap: var(--tf-space-sm);
}

.skeleton-title[b-9vztikbi1p] {
    height: 20px;
    width: 80%;
}

.skeleton-subtitle[b-9vztikbi1p] {
    height: 14px;
    width: 60%;
}

.skeleton-price[b-9vztikbi1p] {
    height: 24px;
    width: 40%;
    margin-top: var(--tf-space-xs);
}

/* ===== CART ITEM SKELETON ===== */
.skeleton-cart-item-wrapper[b-9vztikbi1p] {
    padding: var(--tf-space-md) var(--tf-space-lg);
    border-bottom: 1px solid var(--tf-border);
}

.skeleton-cart-item[b-9vztikbi1p] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.skeleton-info[b-9vztikbi1p] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--tf-space-xs);
}

.skeleton-name[b-9vztikbi1p] {
    height: 18px;
    width: 60%;
}

.skeleton-price-small[b-9vztikbi1p] {
    height: 14px;
    width: 30%;
}

.skeleton-controls[b-9vztikbi1p] {
    width: 100px;
    height: 36px;
    background: linear-gradient(
        90deg,
        var(--skeleton-base) 25%,
        var(--skeleton-shine) 50%,
        var(--skeleton-base) 75%
    );
    background-size: 200% 100%;
    animation: shimmer-b-9vztikbi1p 1.5s infinite;
    border-radius: var(--tf-radius-full);
}

/* ===== MESSAGE SKELETON ===== */
.skeleton-message-wrapper[b-9vztikbi1p] {
    padding: var(--tf-space-sm) var(--tf-space-md);
}

.skeleton-message[b-9vztikbi1p] {
    max-width: 80%;
    padding: var(--tf-space-md);
    border-radius: var(--tf-radius-lg);
    display: flex;
    flex-direction: column;
    gap: var(--tf-space-xs);
}

.skeleton-message.assistant[b-9vztikbi1p] {
    background-color: var(--tf-bg);
    margin-right: auto;
    border-bottom-left-radius: var(--tf-radius-sm);
}

.skeleton-message.user[b-9vztikbi1p] {
    background: var(--tf-gradient-subtle);
    margin-left: auto;
    border-bottom-right-radius: var(--tf-radius-sm);
}

/* ===== TYPING INDICATOR ===== */
.typing-indicator[b-9vztikbi1p] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: var(--tf-space-md);
    background-color: var(--tf-bg);
    border-radius: var(--tf-radius-lg);
    border-bottom-left-radius: var(--tf-radius-sm);
    width: fit-content;
}

.typing-dot[b-9vztikbi1p] {
    width: 8px;
    height: 8px;
    background-color: var(--tf-text-muted);
    border-radius: 50%;
    animation: typingBounce-b-9vztikbi1p 1.4s infinite ease-in-out both;
}

.typing-dot:nth-child(1)[b-9vztikbi1p] {
    animation-delay: -0.32s;
}

.typing-dot:nth-child(2)[b-9vztikbi1p] {
    animation-delay: -0.16s;
}

.typing-dot:nth-child(3)[b-9vztikbi1p] {
    animation-delay: 0s;
}

@keyframes typingBounce-b-9vztikbi1p {
    0%, 80%, 100% {
        transform: scale(0.8);
        opacity: 0.5;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}
/* /Layout/MainLayout.razor.rz.scp.css */
/* MainLayout - CSS limpo, estilos globais em app.css */
/* /Pages/Chat.razor.rz.scp.css */
/* TalkFood - Chat Page Styles */

.chat-page[b-1p2aokjsfn] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color: var(--tf-bg-secondary);
}

/* ===== HEADER ===== */
.chat-header[b-1p2aokjsfn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--tf-space-sm) var(--tf-space-md);
    background: var(--tf-gradient);
    color: white;
    box-shadow: var(--tf-shadow-md);
    z-index: var(--tf-z-sticky);
}

.back-link[b-1p2aokjsfn] {
    color: white;
    text-decoration: none;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color var(--tf-transition-fast);
}

.back-link:hover[b-1p2aokjsfn] {
    background-color: rgba(255, 255, 255, 0.15);
}

.back-link span[b-1p2aokjsfn] {
    font-size: 1.5rem;
}

.header-title[b-1p2aokjsfn] {
    display: flex;
    align-items: center;
    gap: var(--tf-space-sm);
    font-weight: var(--tf-font-semibold);
    font-size: var(--tf-text-lg);
}

.header-icon[b-1p2aokjsfn] {
    font-size: 1.5rem;
}

/* ===== CART BUTTON ===== */
.cart-button[b-1p2aokjsfn] {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    transition: background-color var(--tf-transition-fast);
}

.cart-button:hover[b-1p2aokjsfn] {
    background: rgba(255, 255, 255, 0.3);
}

.cart-icon[b-1p2aokjsfn] {
    font-size: 1.5rem;
}

.cart-badge[b-1p2aokjsfn] {
    position: absolute;
    top: -4px;
    right: -4px;
    background-color: var(--tf-bg);
    color: var(--tf-primary);
    font-size: var(--tf-text-xs);
    font-weight: var(--tf-font-bold);
    min-width: 20px;
    height: 20px;
    border-radius: var(--tf-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--tf-shadow-sm);
    transition: transform var(--tf-transition-fast) ease-out;
}

/* Badge pop animation when item is added */
.cart-badge.pop[b-1p2aokjsfn] {
    animation: badgePop-b-1p2aokjsfn 300ms ease-out;
}

@keyframes badgePop-b-1p2aokjsfn {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.4);
    }

    100% {
        transform: scale(1);
    }
}

/* ===== CONFIRMATION OVERLAY ===== */
.confirmation-overlay[b-1p2aokjsfn] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--tf-space-sm);
    z-index: 9999;
    /* Cover header (z-index: 100) */
    animation: fadeIn-b-1p2aokjsfn var(--tf-transition-fast);
    backdrop-filter: blur(4px);
}

@keyframes fadeIn-b-1p2aokjsfn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ===== CHAT CONTAINER DEEP STYLES ===== */
[b-1p2aokjsfn] .chat-container {
    flex: 1;
    overflow: hidden;
}
/* /Pages/Home.razor.rz.scp.css */
/* TalkFood - Landing Page Styles */

/* ===== LANDING CONTAINER ===== */
.landing[b-qholeyazmd] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ===== HERO SECTION ===== */
.hero[b-qholeyazmd] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--tf-space-xl) var(--tf-space-md);
    background: var(--tf-gradient-subtle);
    min-height: 60vh;
}

.hero-content[b-qholeyazmd] {
    text-align: center;
    max-width: 600px;
}

/* Logo */
.logo[b-qholeyazmd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--tf-space-sm);
    margin-bottom: var(--tf-space-lg);
}

.logo-icon[b-qholeyazmd] {
    filter: drop-shadow(0 4px 12px rgba(255, 107, 53, 0.3));
}

.logo h1[b-qholeyazmd] {
    font-size: var(--tf-text-4xl);
    font-weight: var(--tf-font-bold);
    background: var(--tf-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
}

/* Tagline */
.tagline[b-qholeyazmd] {
    font-size: var(--tf-text-xl);
    color: var(--tf-text-secondary);
    line-height: var(--tf-leading-relaxed);
    margin-bottom: var(--tf-space-xl);
}

.tagline .highlight[b-qholeyazmd] {
    color: var(--tf-primary);
    font-weight: var(--tf-font-semibold);
}

/* CTA Button */
.cta-button[b-qholeyazmd] {
    animation-delay: 0.2s;
}

.cta-button svg[b-qholeyazmd] {
    transition: transform var(--tf-transition-fast);
}

.cta-button:hover svg[b-qholeyazmd] {
    transform: translateX(4px);
}

/* Loading Spinner */
.spinner[b-qholeyazmd] {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-qholeyazmd 0.8s linear infinite;
}

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

/* ===== TRACK ORDER CARD ===== */
.track-order-card[b-qholeyazmd] {
    margin-top: var(--tf-space-xl);
    width: 100%;
    max-width: 380px;
}

.track-order-link[b-qholeyazmd] {
    display: flex;
    align-items: center;
    gap: var(--tf-space-md);
    padding: var(--tf-space-md) var(--tf-space-lg);
    background: var(--tf-bg);
    border: 2px solid var(--tf-border);
    border-radius: var(--tf-radius-xl);
    text-decoration: none;
    transition: all var(--tf-transition-base);
    box-shadow: var(--tf-shadow-sm);
}

.track-order-link:hover[b-qholeyazmd] {
    border-color: var(--tf-primary);
    box-shadow: var(--tf-shadow-md), 0 0 0 3px rgba(255, 107, 53, 0.1);
    transform: translateY(-2px);
}

.track-order-icon[b-qholeyazmd] {
    width: 48px;
    height: 48px;
    background: var(--tf-gradient-subtle);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--tf-primary);
    flex-shrink: 0;
}

.track-order-text[b-qholeyazmd] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
}

.track-order-title[b-qholeyazmd] {
    font-size: var(--tf-text-base);
    font-weight: var(--tf-font-semibold);
    color: var(--tf-text);
}

.track-order-subtitle[b-qholeyazmd] {
    font-size: var(--tf-text-sm);
    color: var(--tf-text-secondary);
}

.track-order-arrow[b-qholeyazmd] {
    color: var(--tf-text-muted);
    transition: all var(--tf-transition-fast);
    flex-shrink: 0;
}

.track-order-link:hover .track-order-arrow[b-qholeyazmd] {
    color: var(--tf-primary);
    transform: translateX(4px);
}

/* ===== LOCATION PROMPT ===== */
.location-prompt[b-qholeyazmd] {
    background: var(--tf-bg);
    border-radius: var(--tf-radius-xl);
    padding: var(--tf-space-xl);
    box-shadow: var(--tf-shadow-lg);
    max-width: 400px;
    margin: 0 auto;
}

.location-icon[b-qholeyazmd] {
    width: 64px;
    height: 64px;
    background: var(--tf-gradient-subtle);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--tf-space-md);
    color: var(--tf-primary);
}

.location-prompt h3[b-qholeyazmd] {
    font-size: var(--tf-text-xl);
    margin-bottom: var(--tf-space-xs);
    color: var(--tf-text);
}

.location-prompt p[b-qholeyazmd] {
    color: var(--tf-text-secondary);
    font-size: var(--tf-text-sm);
    margin-bottom: var(--tf-space-lg);
}

.location-buttons[b-qholeyazmd] {
    display: flex;
    flex-direction: column;
    gap: var(--tf-space-sm);
}

.location-buttons .btn[b-qholeyazmd] {
    width: 100%;
    justify-content: center;
}

/* ===== ERROR TOAST ===== */
.error-toast[b-qholeyazmd] {
    display: flex;
    align-items: center;
    gap: var(--tf-space-sm);
    background: #FEE2E2;
    color: #DC2626;
    padding: var(--tf-space-sm) var(--tf-space-md);
    border-radius: var(--tf-radius-full);
    margin-top: var(--tf-space-md);
    font-size: var(--tf-text-sm);
}

/* ===== FEATURES SECTION ===== */
.features[b-qholeyazmd] {
    padding: var(--tf-space-xl) var(--tf-space-md);
    background: var(--tf-bg);
}

.features-grid[b-qholeyazmd] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--tf-space-lg);
    max-width: 1000px;
    margin: 0 auto;
}

.feature-card[b-qholeyazmd] {
    background: var(--tf-bg);
    border: 1px solid var(--tf-border);
    border-radius: var(--tf-radius-lg);
    padding: var(--tf-space-lg);
    text-align: center;
    transition: all var(--tf-transition-base);
}

.feature-card:hover[b-qholeyazmd] {
    border-color: var(--tf-primary-light);
    box-shadow: var(--tf-shadow-md);
    transform: translateY(-4px);
}

.feature-icon[b-qholeyazmd] {
    width: 56px;
    height: 56px;
    background: var(--tf-gradient-subtle);
    border-radius: var(--tf-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--tf-space-md);
    color: var(--tf-primary);
}

.feature-card h4[b-qholeyazmd] {
    font-size: var(--tf-text-lg);
    margin-bottom: var(--tf-space-xs);
    color: var(--tf-text);
}

.feature-card p[b-qholeyazmd] {
    color: var(--tf-text-secondary);
    font-size: var(--tf-text-sm);
    line-height: var(--tf-leading-relaxed);
    margin: 0;
}

/* ===== DEMO SECTION ===== */
.demo-section[b-qholeyazmd] {
    padding: var(--tf-space-2xl) var(--tf-space-md);
    background: var(--tf-bg-secondary);
}

.demo-content[b-qholeyazmd] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--tf-space-2xl);
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
}

.demo-text h2[b-qholeyazmd] {
    font-size: var(--tf-text-3xl);
    margin-bottom: var(--tf-space-md);
    color: var(--tf-text);
}

.demo-text > p[b-qholeyazmd] {
    color: var(--tf-text-secondary);
    font-size: var(--tf-text-lg);
    line-height: var(--tf-leading-relaxed);
    margin-bottom: var(--tf-space-lg);
}

.demo-steps[b-qholeyazmd] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.demo-steps li[b-qholeyazmd] {
    display: flex;
    align-items: center;
    gap: var(--tf-space-md);
    padding: var(--tf-space-sm) 0;
    font-size: var(--tf-text-base);
    color: var(--tf-text);
}

.step-number[b-qholeyazmd] {
    width: 32px;
    height: 32px;
    background: var(--tf-gradient);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--tf-font-semibold);
    font-size: var(--tf-text-sm);
    flex-shrink: 0;
}

.demo-preview[b-qholeyazmd] {
    display: flex;
    justify-content: center;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .hero[b-qholeyazmd] {
        min-height: auto;
        padding: var(--tf-space-xl) var(--tf-space-md);
    }

    .logo h1[b-qholeyazmd] {
        font-size: var(--tf-text-3xl);
    }

    .tagline[b-qholeyazmd] {
        font-size: var(--tf-text-lg);
    }

    .demo-content[b-qholeyazmd] {
        grid-template-columns: 1fr;
        gap: var(--tf-space-xl);
    }

    .demo-text[b-qholeyazmd] {
        text-align: center;
    }

    .demo-text h2[b-qholeyazmd] {
        font-size: var(--tf-text-2xl);
    }

    .demo-steps li[b-qholeyazmd] {
        justify-content: center;
    }

    .features-grid[b-qholeyazmd] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .logo h1[b-qholeyazmd] {
        font-size: var(--tf-text-2xl);
    }

    .tagline[b-qholeyazmd] {
        font-size: var(--tf-text-base);
    }

    .location-prompt[b-qholeyazmd] {
        padding: var(--tf-space-lg);
    }

    .feature-card[b-qholeyazmd] {
        padding: var(--tf-space-md);
    }
}
/* /Pages/OrderConfirmation.razor.rz.scp.css */
/* TalkFood - Order Confirmation Page Styles */

.order-confirmation-page[b-it9t4i4izr] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--tf-space-md);
    background: var(--tf-gradient-subtle);
}

.confirmation-card[b-it9t4i4izr] {
    background-color: var(--tf-bg);
    border-radius: var(--tf-radius-xl);
    padding: var(--tf-space-2xl);
    max-width: 480px;
    width: 100%;
    text-align: center;
    box-shadow: var(--tf-shadow-lg);
    animation: slideUp-b-it9t4i4izr var(--tf-transition-slow) ease-out;
}

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

/* ===== SUCCESS ICON ===== */
.success-icon[b-it9t4i4izr] {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--tf-accent) 0%, #1DA204 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--tf-space-lg);
    color: white;
    font-size: 2.5rem;
    box-shadow: 0 4px 14px rgba(33, 191, 6, 0.3);
}

.confirmation-card h1[b-it9t4i4izr] {
    margin: 0 0 var(--tf-space-xs) 0;
    color: var(--tf-text);
    font-size: var(--tf-text-2xl);
    font-weight: var(--tf-font-bold);
}

.subtitle[b-it9t4i4izr] {
    color: var(--tf-text-secondary);
    margin: 0 0 var(--tf-space-xl) 0;
    font-size: var(--tf-text-base);
}

/* ===== TICKET SECTION ===== */
.ticket-section[b-it9t4i4izr] {
    background-color: var(--tf-bg-secondary);
    border-radius: var(--tf-radius-lg);
    padding: var(--tf-space-lg);
    margin-bottom: var(--tf-space-xl);
}

.ticket-label[b-it9t4i4izr] {
    display: block;
    font-size: var(--tf-text-sm);
    color: var(--tf-text-secondary);
    margin-bottom: var(--tf-space-sm);
}

.ticket-code[b-it9t4i4izr] {
    font-size: var(--tf-text-4xl);
    font-weight: var(--tf-font-bold);
    color: var(--tf-primary);
    letter-spacing: 4px;
    font-family: var(--tf-font-mono);
    margin-bottom: var(--tf-space-md);
}

.copy-button[b-it9t4i4izr] {
    background-color: transparent;
    border: 2px solid var(--tf-primary);
    color: var(--tf-primary);
    padding: var(--tf-space-sm) var(--tf-space-md);
    border-radius: var(--tf-radius-full);
    font-size: var(--tf-text-sm);
    font-weight: var(--tf-font-medium);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--tf-space-sm);
    transition: all var(--tf-transition-fast);
}

.copy-button:hover[b-it9t4i4izr] {
    background: var(--tf-gradient);
    border-color: transparent;
    color: white;
}

.copy-icon[b-it9t4i4izr] {
    font-size: var(--tf-text-base);
}

/* ===== INFO SECTION ===== */
.info-section[b-it9t4i4izr] {
    text-align: left;
    margin-bottom: var(--tf-space-xl);
}

.info-item[b-it9t4i4izr] {
    display: flex;
    gap: var(--tf-space-md);
    padding: var(--tf-space-md) 0;
    border-bottom: 1px solid var(--tf-border);
}

.info-item:last-child[b-it9t4i4izr] {
    border-bottom: none;
}

.info-icon[b-it9t4i4izr] {
    font-size: 1.5rem;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background: var(--tf-gradient-subtle);
    border-radius: var(--tf-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

.info-item strong[b-it9t4i4izr] {
    display: block;
    color: var(--tf-text);
    font-weight: var(--tf-font-semibold);
    margin-bottom: var(--tf-space-xs);
}

.info-item p[b-it9t4i4izr] {
    margin: 0;
    font-size: var(--tf-text-sm);
    color: var(--tf-text-secondary);
    line-height: var(--tf-leading-relaxed);
}

/* ===== ACTION BUTTONS ===== */
.action-buttons[b-it9t4i4izr] {
    display: flex;
    flex-direction: column;
    gap: var(--tf-space-sm);
}

.track-button[b-it9t4i4izr] {
    display: block;
    padding: var(--tf-space-md);
    background: var(--tf-gradient);
    color: white;
    text-decoration: none;
    border-radius: var(--tf-radius-md);
    font-weight: var(--tf-font-semibold);
    transition: all var(--tf-transition-fast);
    box-shadow: var(--tf-shadow-primary);
}

.track-button:hover[b-it9t4i4izr] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 107, 53, 0.4);
    color: white;
}

.new-order-button[b-it9t4i4izr] {
    display: block;
    padding: var(--tf-space-md);
    background-color: transparent;
    color: var(--tf-text-secondary);
    text-decoration: none;
    border: 1px solid var(--tf-border);
    border-radius: var(--tf-radius-md);
    transition: all var(--tf-transition-fast);
}

.new-order-button:hover[b-it9t4i4izr] {
    border-color: var(--tf-primary);
    color: var(--tf-primary);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 480px) {
    .confirmation-card[b-it9t4i4izr] {
        padding: var(--tf-space-lg);
    }

    .ticket-code[b-it9t4i4izr] {
        font-size: var(--tf-text-3xl);
        letter-spacing: 2px;
    }

    .success-icon[b-it9t4i4izr] {
        width: 64px;
        height: 64px;
        font-size: 2rem;
    }
}
/* /Pages/Tracking.razor.rz.scp.css */
/* TalkFood - Tracking Page Styles */

.tracking-page[b-ozmlfc8wla] {
    min-height: 100vh;
    background: var(--tf-gradient-subtle);
    padding: var(--tf-space-xl) var(--tf-space-md);
}

.tracking-container[b-ozmlfc8wla] {
    max-width: 600px;
    margin: 0 auto;
}

.tracking-container h1[b-ozmlfc8wla] {
    text-align: center;
    color: var(--tf-text);
    margin-bottom: var(--tf-space-xl);
    font-size: var(--tf-text-2xl);
    font-weight: var(--tf-font-bold);
}

/* ===== SEARCH SECTION ===== */
.search-section[b-ozmlfc8wla] {
    background-color: var(--tf-bg);
    border-radius: var(--tf-radius-lg);
    padding: var(--tf-space-xl);
    text-align: center;
    box-shadow: var(--tf-shadow-md);
}

.search-section p[b-ozmlfc8wla] {
    color: var(--tf-text-secondary);
    margin-bottom: var(--tf-space-lg);
}

.search-input-group[b-ozmlfc8wla] {
    display: flex;
    gap: var(--tf-space-sm);
}

.search-input[b-ozmlfc8wla] {
    flex: 1;
    padding: var(--tf-space-md);
    border: 2px solid var(--tf-border);
    border-radius: var(--tf-radius-md);
    font-size: var(--tf-text-xl);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-family: var(--tf-font-mono);
    transition: border-color var(--tf-transition-fast);
}

.search-input:focus[b-ozmlfc8wla] {
    outline: none;
    border-color: var(--tf-primary);
    box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.15);
}

.search-button[b-ozmlfc8wla] {
    padding: var(--tf-space-md) var(--tf-space-lg);
    background: var(--tf-gradient);
    color: white;
    border: none;
    border-radius: var(--tf-radius-md);
    font-size: var(--tf-text-base);
    font-weight: var(--tf-font-semibold);
    cursor: pointer;
    min-width: 100px;
    transition: all var(--tf-transition-fast);
    box-shadow: var(--tf-shadow-primary);
}

.search-button:hover:not(:disabled)[b-ozmlfc8wla] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 107, 53, 0.4);
}

.search-button:disabled[b-ozmlfc8wla] {
    background: var(--tf-border);
    cursor: not-allowed;
    box-shadow: none;
}

.error-message[b-ozmlfc8wla] {
    color: #DC2626;
    margin-top: var(--tf-space-md);
    font-size: var(--tf-text-sm);
}

.search-actions[b-ozmlfc8wla] {
    margin-top: var(--tf-space-xl);
    padding-top: var(--tf-space-lg);
    border-top: 1px solid var(--tf-border);
}

.new-order-link[b-ozmlfc8wla] {
    display: inline-flex;
    align-items: center;
    gap: var(--tf-space-sm);
    padding: var(--tf-space-md) var(--tf-space-lg);
    background: var(--tf-gradient);
    color: white;
    text-decoration: none;
    border-radius: var(--tf-radius-md);
    font-size: var(--tf-text-base);
    font-weight: var(--tf-font-medium);
    transition: all var(--tf-transition-fast);
    box-shadow: var(--tf-shadow-primary);
}

.new-order-link:hover[b-ozmlfc8wla] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 107, 53, 0.4);
}

.new-order-link svg[b-ozmlfc8wla] {
    flex-shrink: 0;
}

/* ===== ORDER DETAILS ===== */
.order-details[b-ozmlfc8wla] {
    background-color: var(--tf-bg);
    border-radius: var(--tf-radius-lg);
    padding: var(--tf-space-xl);
    box-shadow: var(--tf-shadow-md);
    animation: slideUp-b-ozmlfc8wla var(--tf-transition-slow) ease-out;
}

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

.ticket-display[b-ozmlfc8wla] {
    text-align: center;
    margin-bottom: var(--tf-space-lg);
}

.ticket-label[b-ozmlfc8wla] {
    display: block;
    font-size: var(--tf-text-sm);
    color: var(--tf-text-secondary);
    margin-bottom: var(--tf-space-xs);
}

.ticket-value[b-ozmlfc8wla] {
    font-size: var(--tf-text-3xl);
    font-weight: var(--tf-font-bold);
    color: var(--tf-primary);
    letter-spacing: 4px;
    font-family: var(--tf-font-mono);
}

/* ===== STATUS BADGE ===== */
.status-badge[b-ozmlfc8wla] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--tf-space-sm);
    padding: var(--tf-space-md);
    border-radius: var(--tf-radius-md);
    font-weight: var(--tf-font-semibold);
    margin-bottom: var(--tf-space-md);
}

.status-icon[b-ozmlfc8wla] {
    font-size: var(--tf-text-xl);
}

.status-pending[b-ozmlfc8wla] {
    background-color: #FEF3C7;
    color: #92400E;
}

.status-confirmed[b-ozmlfc8wla] {
    background-color: #D1FAE5;
    color: #065F46;
}

.status-preparing[b-ozmlfc8wla] {
    background-color: #FEF3C7;
    color: #D97706;
}

.status-ready[b-ozmlfc8wla] {
    background-color: #DBEAFE;
    color: #1E40AF;
}

.status-delivering[b-ozmlfc8wla] {
    background-color: #D1FAE5;
    color: #059669;
}

.status-delivered[b-ozmlfc8wla] {
    background-color: #A7F3D0;
    color: #047857;
}

.status-cancelled[b-ozmlfc8wla] {
    background-color: #FEE2E2;
    color: #DC2626;
}

/* ===== ORDER SUMMARY ===== */
.order-summary[b-ozmlfc8wla] {
    text-align: center;
    color: var(--tf-text-secondary);
    padding: var(--tf-space-md) 0;
    border-bottom: 1px solid var(--tf-border);
    margin-bottom: var(--tf-space-md);
}

/* ===== AUTO REFRESH INDICATOR ===== */
.auto-refresh-indicator[b-ozmlfc8wla] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--tf-space-sm);
    padding: var(--tf-space-sm) var(--tf-space-md);
    background-color: #F0F9FF;
    border: 1px solid #BAE6FD;
    border-radius: var(--tf-radius-md);
    margin-bottom: var(--tf-space-lg);
    font-size: var(--tf-text-xs);
    color: #0369A1;
}

.refresh-icon[b-ozmlfc8wla] {
    font-size: var(--tf-text-base);
    transition: transform 0.3s ease;
}

.refresh-icon.spinning[b-ozmlfc8wla] {
    animation: spin-b-ozmlfc8wla 1s linear infinite;
}

.refresh-text[b-ozmlfc8wla] {
    font-weight: var(--tf-font-medium);
}

.last-update[b-ozmlfc8wla] {
    color: #0284C7;
    font-weight: var(--tf-font-semibold);
}

/* ===== TIMELINE ===== */
.timeline[b-ozmlfc8wla] {
    margin-bottom: var(--tf-space-xl);
}

.timeline h3[b-ozmlfc8wla] {
    font-size: var(--tf-text-base);
    font-weight: var(--tf-font-semibold);
    color: var(--tf-text);
    margin-bottom: var(--tf-space-md);
}

.timeline-item[b-ozmlfc8wla] {
    display: flex;
    gap: var(--tf-space-md);
    padding-bottom: var(--tf-space-md);
    position: relative;
}

.timeline-item:not(:last-child)[b-ozmlfc8wla]::before {
    content: '';
    position: absolute;
    left: 7px;
    top: 20px;
    bottom: 0;
    width: 2px;
    background-color: var(--tf-border);
}

.timeline-dot[b-ozmlfc8wla] {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 2px;
}

.timeline-content[b-ozmlfc8wla] {
    flex: 1;
}

.timeline-status[b-ozmlfc8wla] {
    display: block;
    font-weight: var(--tf-font-medium);
    color: var(--tf-text);
}

.timeline-time[b-ozmlfc8wla] {
    font-size: var(--tf-text-xs);
    color: var(--tf-text-muted);
}

.timeline-description[b-ozmlfc8wla] {
    margin: var(--tf-space-xs) 0 0 0;
    font-size: var(--tf-text-sm);
    color: var(--tf-text-secondary);
}

/* ===== SHARE SECTION ===== */
.share-section[b-ozmlfc8wla] {
    display: flex;
    flex-direction: column;
    gap: var(--tf-space-sm);
}

.share-button[b-ozmlfc8wla] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--tf-space-sm);
    padding: var(--tf-space-md);
    background: var(--tf-gradient);
    color: white;
    border: none;
    border-radius: var(--tf-radius-md);
    font-size: var(--tf-text-base);
    font-weight: var(--tf-font-medium);
    cursor: pointer;
    transition: all var(--tf-transition-fast);
    box-shadow: var(--tf-shadow-primary);
}

.share-button:hover[b-ozmlfc8wla] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 107, 53, 0.4);
}

.share-icon[b-ozmlfc8wla] {
    font-size: var(--tf-text-lg);
}

.search-again-button[b-ozmlfc8wla] {
    padding: var(--tf-space-md);
    background-color: transparent;
    color: var(--tf-text-secondary);
    border: 1px solid var(--tf-border);
    border-radius: var(--tf-radius-md);
    font-size: var(--tf-text-sm);
    cursor: pointer;
    transition: all var(--tf-transition-fast);
}

.search-again-button:hover[b-ozmlfc8wla] {
    border-color: var(--tf-primary);
    color: var(--tf-primary);
}

/* ===== SPINNER ===== */
.spinner[b-ozmlfc8wla] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-ozmlfc8wla 0.8s linear infinite;
    display: inline-block;
}

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

/* ===== RESPONSIVE ===== */
@media (max-width: 480px) {
    .search-input-group[b-ozmlfc8wla] {
        flex-direction: column;
    }

    .search-button[b-ozmlfc8wla] {
        width: 100%;
    }

    .ticket-value[b-ozmlfc8wla] {
        font-size: var(--tf-text-2xl);
    }
}

/* ===== ESTABLISHMENT INFO ===== */
.establishment-info[b-ozmlfc8wla] {
    text-align: center;
    margin-bottom: var(--tf-space-md);
    background-color: var(--tf-bg-alt);
    padding: var(--tf-space-sm);
    border-radius: var(--tf-radius-md);
}

.establishment-label[b-ozmlfc8wla] {
    font-size: var(--tf-text-sm);
    color: var(--tf-text-secondary);
    margin-right: var(--tf-space-xs);
}

.establishment-name[b-ozmlfc8wla] {
    font-weight: var(--tf-font-bold);
    color: var(--tf-text);
}

/* ===== ORDER ITEMS ===== */
.order-items[b-ozmlfc8wla] {
    margin: var(--tf-space-lg) 0;
    border-top: 1px solid var(--tf-border);
    border-bottom: 1px solid var(--tf-border);
    padding: var(--tf-space-md) 0;
}

.order-items h4[b-ozmlfc8wla] {
    font-size: var(--tf-text-base);
    font-weight: var(--tf-font-semibold);
    color: var(--tf-text);
    margin-bottom: var(--tf-space-md);
}

.items-list[b-ozmlfc8wla] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.order-item[b-ozmlfc8wla] {
    display: flex;
    align-items: flex-start;
    gap: var(--tf-space-sm);
    margin-bottom: var(--tf-space-sm);
}

.order-item:last-child[b-ozmlfc8wla] {
    margin-bottom: 0;
}

.item-quantity[b-ozmlfc8wla] {
    background-color: var(--tf-bg-alt);
    color: var(--tf-primary);
    font-weight: var(--tf-font-bold);
    font-size: var(--tf-text-sm);
    padding: 2px 6px;
    border-radius: var(--tf-radius-sm);
    min-width: 24px;
    text-align: center;
}

.item-details[b-ozmlfc8wla] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.item-name[b-ozmlfc8wla] {
    color: var(--tf-text);
    font-weight: var(--tf-font-medium);
}

.item-obs[b-ozmlfc8wla] {
    font-size: var(--tf-text-xs);
    color: var(--tf-text-muted);
    font-style: italic;
    margin-top: 2px;
}