/* Shared filter chip bar styles — used by index.html and meal-prep.html */

/* a11y — visible keyboard focus for all interactive elements */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent, #C4653A);
  outline-offset: 2px;
  border-radius: 4px;
}

.filter-chip-bar-wrap { position:relative; margin-bottom:16px; }
.filter-chip-bar-wrap::after { content:''; position:absolute; top:0; right:0; bottom:8px; width:40px; background:linear-gradient(to right,transparent,var(--cream,#faf8f3)); pointer-events:none; z-index:1; transition:opacity 0.2s; }
.filter-chip-bar-wrap.scrolled-end::after { opacity:0; }
.filter-chip-bar-wrap::before { content:''; position:absolute; top:0; left:0; bottom:8px; width:40px; background:linear-gradient(to left,transparent,var(--cream,#faf8f3)); pointer-events:none; z-index:1; opacity:0; transition:opacity 0.2s; }
.filter-chip-bar-wrap.scrolled-start::before { opacity:1; }
.filter-chip-bar { display:flex; gap:8px; align-items:center; overflow-x:auto; padding-bottom:8px; -webkit-overflow-scrolling:touch; scrollbar-width:none; animation:chipBarIn 0.2s ease-out; }
.filter-chip-bar::-webkit-scrollbar { display:none; }
@keyframes chipBarIn { from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:translateY(0)} }

.filter-cat-chip {
  flex-shrink:0; padding:0 18px; height:40px; border:none; border-radius:10px;
  color:white; font-family:'Lora',Georgia,serif; font-size:0.8rem; font-weight:600;
  cursor:pointer; transition:transform 0.15s, filter 0.15s;
  display:inline-flex; align-items:center; justify-content:center; gap:5px; white-space:nowrap;
}
.filter-cat-chip:hover { transform:scale(1.03); }
.filter-cat-chip:active { transform:scale(0.97); }
.filter-cat-chip.has-active { filter:brightness(0.85); font-weight:700; box-shadow: inset 0 0 0 2px rgba(0,0,0,0.25); }

.filter-cat-chip[data-cat="meal"] { background:#c4653a; }
.filter-cat-chip[data-cat="protein"] { background:#5b8a5a; }
.filter-cat-chip[data-cat="source"] { background:#d4a853; }
.filter-cat-chip[data-cat="cuisine"] { background:#3d7a5f; }
.filter-cat-chip[data-cat="method"] { background:#d4724e; }
.filter-cat-chip[data-cat="timestyle"] { background:#8b9e6b; }
.filter-cat-chip[data-cat="dietary"] { background:#8b7355; }
.filter-cat-chip[data-cat="inseason"] { background:#5f8f8a; }

.filter-cat-chip .cat-badge { font-size:0.7rem; background:rgba(255,255,255,0.3); color:white; border-radius:8px; padding:1px 6px; }

.filter-clear-link { color:var(--accent); text-decoration:none; font-size:0.82rem; font-family:'Lora',Georgia,serif; font-weight:600; white-space:nowrap; flex-shrink:0; display:none; cursor:pointer; height:40px; line-height:40px; }
.filter-clear-link:hover { text-decoration:underline; }
.filter-clear-link.visible { display:inline; }

/* Popover */
.fp-popover { position:fixed; min-width:200px; max-width:320px; max-height:300px; overflow-y:auto; background:var(--cream,#faf8f3); border:1px solid var(--border); border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,0.12); z-index:1001; padding:8px; display:flex; flex-wrap:wrap; gap:5px; }
.fp-popover::before { content:''; position:absolute; top:-6px; left:16px; width:10px; height:10px; background:var(--cream,#faf8f3); border-left:1px solid var(--border); border-top:1px solid var(--border); transform:rotate(45deg); }
.fp-popover.right-align::before { left:auto; right:16px; }

.fp-chip { padding:4px 11px; border:1px solid #ccc; border-radius:16px; background:var(--cream,#fff); color:#666; font-size:0.8rem; font-family:inherit; cursor:pointer; transition:all 0.12s; white-space:nowrap; }
.fp-chip:hover { border-color:var(--accent); color:var(--accent); }
.fp-chip.active { background:var(--accent); border-color:var(--accent); color:white; font-weight:700; }

@media (max-width:767px) {
  .filter-cat-chip { padding:0 14px; height:44px; font-size:0.8rem; border-radius:10px; }
  .filter-clear-link { height:44px; line-height:44px; }
  .fp-chip { min-height:36px; padding:6px 12px; display:inline-flex; align-items:center; }
}