/* Tallasa Food — custom utilities on top of Tailwind CDN */

html { scroll-behavior: smooth; }

.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* ============ STANDARDIZED BUTTONS ============ */
/* Pakai class ini untuk konsistensi proporsional:
   - tf-btn (base)            → flex inline, pill rounded, font-medium
   - tf-btn-primary           → hijau solid
   - tf-btn-outline           → outline (white bg + primary border)
   - tf-btn-danger            → merah solid
   - tf-btn-danger-outline    → outline merah
   - tf-btn-sm | tf-btn-md | tf-btn-lg
*/
.tf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    font-weight: 600;
    border-radius: 9999px;
    transition: background-color 0.15s, color 0.15s, transform 0.05s, box-shadow 0.15s;
    cursor: pointer;
    text-decoration: none;
    border: 1px solid transparent;
    white-space: nowrap;
    user-select: none;
}
.tf-btn:active { transform: translateY(1px); }
.tf-btn:disabled, .tf-btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Variants */
.tf-btn-primary {
    background-color: #00AA13;
    color: #fff;
    box-shadow: 0 1px 2px rgba(0, 170, 19, 0.15);
}
.tf-btn-primary:hover { background-color: #007A0E; color: #fff; }

.tf-btn-outline {
    background-color: #fff;
    color: #00AA13;
    border-color: #A7E5AE;
}
.tf-btn-outline:hover { background-color: #E6F7E8; color: #007A0E; }

.tf-btn-danger {
    background-color: #DC2626;
    color: #fff;
}
.tf-btn-danger:hover { background-color: #B91C1C; color: #fff; }

.tf-btn-danger-outline {
    background-color: #fff;
    color: #DC2626;
    border-color: #FCA5A5;
}
.tf-btn-danger-outline:hover { background-color: #DC2626; color: #fff; }

.tf-btn-success {
    background-color: #16A34A;
    color: #fff;
}
.tf-btn-success:hover { background-color: #15803D; color: #fff; }

.tf-btn-neutral {
    background-color: #F3F4F6;
    color: #374151;
}
.tf-btn-neutral:hover { background-color: #E5E7EB; }

/* Sizes (mobile-friendly: minimum 36px height) */
.tf-btn-xs { font-size: 0.7rem; padding: 0.25rem 0.7rem; min-height: 26px; }
.tf-btn-sm { font-size: 0.78rem; padding: 0.4rem 1rem; min-height: 32px; }
.tf-btn-md { font-size: 0.85rem; padding: 0.55rem 1.25rem; min-height: 40px; }
.tf-btn-lg { font-size: 0.95rem; padding: 0.7rem 1.75rem; min-height: 48px; }
.tf-btn-full { width: 100%; }

.btn-wa {
    background-color: #25D366;
    color: #fff;
    font-weight: 600;
    border-radius: 9999px;
    padding: 0.55rem 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: background-color 0.15s ease;
}
.btn-wa:hover { background-color: #1DA851; }

.badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.18rem 0.55rem;
    border-radius: 9999px;
}
.badge-available { background: #DCFCE7; color: #166534; }
.badge-out       { background: #F3F4F6; color: #6B7280; }
.badge-po        { background: #FEF3C7; color: #92400E; }
.badge-promo     { background: #FFEDD5; color: #C2410C; }  /* orange — pops against blue theme */

/* ============ CATEGORY ICON (image atau emoji) ============ */
/* Base: align dengan baseline text, line-height 1 supaya tidak menambah tinggi baris */
.cat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1;
    vertical-align: middle;
    object-fit: contain;
}
/* Ukuran — match dengan ukuran text yg umum, jadi proporsional */
.cat-icon-xs { width: 0.95em; height: 0.95em; font-size: 0.95em; }   /* untuk filter chip text-xs/sm */
.cat-icon-sm { width: 1.1em; height: 1.1em; font-size: 1.1em; }      /* untuk card item */
.cat-icon-md { width: 1.5rem; height: 1.5rem; font-size: 1.5rem; }   /* untuk badge medium */
.cat-icon-lg { width: 2rem; height: 2rem; font-size: 2rem; }         /* untuk grid kategori beranda */