/*!
 * Vendors archive page (/vendors/) — restaurants listing.
 * Reference: baly-design-system/preview/components-vendors-page.html
 *
 * Page title + in-page search, sticky controls (quick chips + filter/sort
 * popovers + active-filter pills), result count, 4-col card grid and
 * client-side pagination. Vendors come from the `vendors` CPT; all
 * filtering / sorting / search / paging runs client-side.
 *
 * Scoped under .baly-vpage. Resolves --bf-* tokens from baly-food-tokens.css
 * (loaded as a dependency). Design --color-*/--radius-*/--shadow-* tokens are
 * translated to their --bf-* equivalents; --text-*/--font-* become literals.
 */

/* Self-contained @font-face so the page renders Graphik Arabic even if the
   token sheet's font declarations don't reach this page. Paths are relative to
   this file (asset/css/), pointing at the plugin's bundled weights. */
@font-face { font-family:"GraphikArabic"; font-display:swap; font-weight:400; font-style:normal; src:url("../fonts/GraphikArabic-Regular.ttf")  format("truetype"); }
@font-face { font-family:"GraphikArabic"; font-display:swap; font-weight:500; font-style:normal; src:url("../fonts/GraphikArabic-Medium.ttf")   format("truetype"); }
@font-face { font-family:"GraphikArabic"; font-display:swap; font-weight:600; font-style:normal; src:url("../fonts/GraphikArabic-Semibold.ttf") format("truetype"); }
@font-face { font-family:"GraphikArabic"; font-display:swap; font-weight:700; font-style:normal; src:url("../fonts/GraphikArabic-Bold.ttf")     format("truetype"); }
@font-face { font-family:"GraphikArabic"; font-display:swap; font-weight:900; font-style:normal; src:url("../fonts/GraphikArabic-Black.ttf")    format("truetype"); }

.baly-vpage{ font-family:"GraphikArabic","SF Arabic","Segoe UI","Tajawal","Helvetica Neue","Tahoma",Arial,sans-serif; color:var(--bf-fg); direction:rtl; -webkit-font-smoothing:antialiased; }
.baly-vpage *{ box-sizing:border-box; }
.baly-vpage .num{ direction:ltr; unicode-bidi:isolate; font-feature-settings:"tnum" 1; }

/* ── Page shell ─────────────────────────────────────── */
.baly-vpage .page{ max-width:1280px; margin:0 auto; padding:0 24px 96px; }

/* ── Page title block ───────────────────────────────── */
.baly-vpage .page-head{ padding:36px 4px 20px; }
.baly-vpage .title-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.baly-vpage h1.title{ margin:0; font-size:30px; font-weight:900; line-height:1.1; letter-spacing:-.01em; color:var(--bf-grey-900); }

/* in-page search */
.baly-vpage .search{ position:relative; flex:0 0 auto; min-width:280px; }
.baly-vpage .search svg{ position:absolute; right:14px; top:50%; transform:translateY(-50%); width:17px; height:17px; color:var(--bf-grey-600); pointer-events:none; }
.baly-vpage .search input{
	width:100%; height:46px; border:1px solid var(--bf-border); background:#fff; border-radius:var(--bf-radius-pill);
	font-family:inherit; font-size:14px; font-weight:500; color:var(--bf-fg);
	padding:0 44px 0 18px; outline:none; transition:border-color .15s, box-shadow .15s;
}
.baly-vpage .search input::placeholder{ color:var(--bf-grey-600); font-weight:400; }
.baly-vpage .search input:focus{ border-color:var(--bf-brand); box-shadow:0 0 0 4px var(--bf-brand-10); }

/* ── Sticky controls ────────────────────────────────── */
.baly-vpage .controls{ position:sticky; top:var(--baly-header-h, 0px); z-index:30; background:var(--bf-white); padding:8px 0 14px; margin:0 -24px; padding-inline:24px; transition:box-shadow .18s ease, background .18s ease; }
.baly-vpage .controls.stuck{ box-shadow:0 8px 24px rgba(10,10,10,.06); background:rgba(255,255,255,.92); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }

.baly-vpage .controls-row{ display:flex; align-items:center; gap:10px; }
.baly-vpage .chips{ display:flex; align-items:center; gap:8px; overflow-x:auto; scrollbar-width:none; flex:1 1 auto; padding:2px; }
.baly-vpage .chips::-webkit-scrollbar{ display:none; }
.baly-vpage .fchip{
	flex:0 0 auto; height:40px; padding:0 15px; border-radius:var(--bf-radius-pill);
	font-family:inherit; font-size:13.5px; font-weight:700;
	border:1px solid var(--bf-border); background:#fff; color:var(--bf-grey-700);
	cursor:pointer; transition:all .12s ease; white-space:nowrap;
	display:inline-flex; align-items:center; gap:7px; line-height:1;
}
.baly-vpage .fchip:hover{ color:var(--bf-fg); background:var(--bf-grey-50); border-color:var(--bf-grey-300); }
.baly-vpage .fchip svg{ width:15px; height:15px; flex:none; }
.baly-vpage .fchip.active{ background:var(--bf-brand); color:#fff; border-color:var(--bf-brand); box-shadow:0 4px 12px rgba(0,67,255,.18); }
.baly-vpage .fchip .pro-mark{ display:inline-flex; align-items:center; background:var(--bf-pro); padding:4px 9px; border-radius:var(--bf-radius-pill); line-height:1; }
.baly-vpage .fchip .pro-mark img{ height:14px; display:block; }
.baly-vpage .fchip.active .pro-mark{ background:rgba(255,255,255,.2); }

/* trailing buttons */
.baly-vpage .tools{ display:flex; align-items:center; gap:8px; flex:0 0 auto; }
.baly-vpage .tool-btn{
	height:40px; padding:0 16px; border-radius:var(--bf-radius-pill);
	font-family:inherit; font-size:13.5px; font-weight:700;
	border:1px solid var(--bf-border); background:#fff; color:var(--bf-grey-800);
	cursor:pointer; display:inline-flex; align-items:center; gap:8px; line-height:1; white-space:nowrap;
	transition:background .12s, border-color .12s; position:relative;
}
.baly-vpage .tool-btn:hover{ background:var(--bf-grey-50); border-color:var(--bf-grey-300); }
.baly-vpage .tool-btn svg{ width:16px; height:16px; }
.baly-vpage .tool-btn.has-value{ border-color:var(--bf-brand); color:var(--bf-brand); background:var(--bf-brand-lighter); }
.baly-vpage .tool-btn .pill-count{ background:var(--bf-brand); color:#fff; font-size:11px; font-weight:700; min-width:18px; height:18px; padding:0 5px; border-radius:var(--bf-radius-pill); display:inline-flex; align-items:center; justify-content:center; }
.baly-vpage .tool-btn .sort-val{ color:var(--bf-brand); font-weight:700; }

/* ── Popover (filters + sort share base) ────────────── */
.baly-vpage .pop-wrap{ position:relative; }
.baly-vpage .pop{
	position:absolute; top:calc(100% + 10px); z-index:60;
	background:#fff; border:1px solid var(--bf-border); border-radius:var(--bf-radius-xl);
	box-shadow:var(--bf-shadow-3); padding:6px; min-width:240px;
	opacity:0; transform:translateY(-6px) scale(.98); pointer-events:none; transform-origin:top left;
	transition:opacity .14s var(--bf-ease-out), transform .14s var(--bf-ease-out);
}
.baly-vpage .pop.open{ opacity:1; transform:none; pointer-events:auto; }
.baly-vpage .pop-left{ left:0; }
.baly-vpage .sort-item{
	display:flex; align-items:center; gap:10px; width:100%; text-align:start;
	padding:11px 12px; border:none; background:none; border-radius:var(--bf-radius-md);
	font-family:inherit; font-size:14px; font-weight:600; color:var(--bf-grey-800); cursor:pointer;
}
.baly-vpage .sort-item:hover{ background:var(--bf-grey-50); }
.baly-vpage .sort-item .ic{ width:18px; height:18px; color:var(--bf-grey-600); flex:none; }
.baly-vpage .sort-item .check{ margin-inline-start:auto; width:18px; height:18px; color:var(--bf-brand); opacity:0; }
.baly-vpage .sort-item.active{ color:var(--bf-brand); }
.baly-vpage .sort-item.active .ic{ color:var(--bf-brand); }
.baly-vpage .sort-item.active .check{ opacity:1; }

/* filters panel */
.baly-vpage .filters{ min-width:330px; max-width:330px; padding:0; }
.baly-vpage .filters-head{ display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid var(--bf-border-subtle); }
.baly-vpage .filters-head h3{ margin:0; font-size:16px; font-weight:700; }
.baly-vpage .filters-head .clear{ background:none; border:none; font-family:inherit; font-size:13px; font-weight:700; color:var(--bf-brand); cursor:pointer; padding:4px; }
.baly-vpage .filters-body{ padding:18px; display:flex; flex-direction:column; gap:20px; max-height:60vh; overflow-y:auto; }
.baly-vpage .fgroup-label{ font-size:13px; font-weight:700; color:var(--bf-grey-900); margin-bottom:10px; display:block; }
.baly-vpage .opt-row{ display:flex; flex-wrap:wrap; gap:8px; }
.baly-vpage .opt{
	height:38px; padding:0 14px; border-radius:var(--bf-radius-pill); border:1px solid var(--bf-border);
	background:#fff; color:var(--bf-grey-700); font-family:inherit; font-size:13px; font-weight:700;
	cursor:pointer; display:inline-flex; align-items:center; gap:6px; line-height:1; transition:all .12s;
}
.baly-vpage .opt:hover{ border-color:var(--bf-grey-300); background:var(--bf-grey-50); }
.baly-vpage .opt svg{ width:14px; height:14px; }
.baly-vpage .opt.active{ background:var(--bf-brand); border-color:var(--bf-brand); color:#fff; }
.baly-vpage .opt .star{ color:#FFB800; }
.baly-vpage .opt.active .star{ color:#fff; }
.baly-vpage .filters-foot{ display:flex; gap:10px; padding:14px 18px; border-top:1px solid var(--bf-border-subtle); }
.baly-vpage .btn{ flex:1; height:46px; border-radius:var(--bf-radius-pill); font-family:inherit; font-size:14px; font-weight:700; cursor:pointer; border:1px solid var(--bf-border); background:#fff; color:var(--bf-grey-800); }
.baly-vpage .btn.primary{ background:var(--bf-brand); border-color:var(--bf-brand); color:#fff; flex:2; }
.baly-vpage .btn:hover{ background:var(--bf-grey-50); }
.baly-vpage .btn.primary:hover{ background:var(--bf-brand-hover); }

/* active-filter summary pills */
.baly-vpage .active-pills{ display:flex; flex-wrap:wrap; gap:8px; padding:2px 2px 0; min-height:0; }
.baly-vpage .active-pills:empty{ display:none; }
.baly-vpage .apill{ display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 6px 0 12px; border-radius:var(--bf-radius-pill); background:var(--bf-brand-lighter); color:var(--bf-brand); font-size:12.5px; font-weight:700; border:1px solid var(--bf-brand-light); }
.baly-vpage .apill button{ display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border:none; background:rgba(0,67,255,.12); color:var(--bf-brand); border-radius:50%; cursor:pointer; padding:0; }
.baly-vpage .apill button svg{ width:11px; height:11px; }
/* clear-all is a <button> (the other pills are <span>s, which inherit the
   page font); buttons reset to the UA font, so set it explicitly. */
.baly-vpage .apill.clear-all{ background:none; border:1px dashed var(--bf-grey-300); color:var(--bf-grey-600); padding:0 14px; cursor:pointer; font-family:inherit; font-size:12.5px; font-weight:700; }
.baly-vpage .apill.clear-all:hover{ border-color:var(--bf-grey-600); color:var(--bf-grey-800); }

/* ── Grid + cards ───────────────────────────────────── */
.baly-vpage .listing{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
@media (max-width:1080px){ .baly-vpage .listing{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:760px){ .baly-vpage .listing{ grid-template-columns:repeat(2,1fr); gap:12px; } }

.baly-vpage .card{ background:#fff; border-radius:var(--bf-radius-lg); overflow:hidden; display:flex; flex-direction:column; box-shadow:0 1px 3px rgba(10,10,10,.04),0 1px 2px rgba(10,10,10,.03); text-decoration:none; color:inherit; transition:transform .2s var(--bf-ease-out), box-shadow .2s var(--bf-ease-out); }
.baly-vpage .card:hover{ transform:translateY(-3px); box-shadow:0 14px 30px rgba(10,10,10,.10),0 4px 8px rgba(10,10,10,.06); }
.baly-vpage .card.is-closed{ opacity:.62; }
.baly-vpage .hero{ position:relative; aspect-ratio:2/1; background-size:cover; background-position:center; background-color:var(--bf-grey-100); }
.baly-vpage .hero::after{ content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,rgba(0,0,0,.16) 0%,rgba(0,0,0,0) 34%,rgba(0,0,0,0) 60%,rgba(0,0,0,.12) 100%); }
.baly-vpage .closed-tag{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:3; }
.baly-vpage .closed-tag span{ background:rgba(10,10,10,.82); color:#fff; font-size:13px; font-weight:700; padding:7px 16px; border-radius:var(--bf-radius-pill); }
.baly-vpage .pro-ribbon{ position:absolute; top:10px; right:10px; z-index:2; background:var(--bf-pro); color:#fff; font-size:11px; font-weight:700; padding:5px 9px; border-radius:var(--bf-radius-pill); display:inline-flex; align-items:center; gap:6px; line-height:1.1; box-shadow:var(--bf-shadow-1); }
.baly-vpage .pro-ribbon img{ height:13px; display:block; }
.baly-vpage .badge{ position:absolute; top:10px; left:10px; z-index:2; background:var(--bf-brand); color:#fff; font-size:12.5px; font-weight:700; padding:5px 11px; border-radius:var(--bf-radius-pill); line-height:1.1; direction:ltr; box-shadow:var(--bf-shadow-1); }
.baly-vpage .new-badge{ position:absolute; top:10px; left:10px; z-index:2; background:var(--bf-grey-900); color:#fff; font-size:11px; font-weight:700; padding:5px 10px; border-radius:var(--bf-radius-pill); line-height:1.1; box-shadow:var(--bf-shadow-1); }
.baly-vpage .card.has-discount .new-badge{ left:auto; right:10px; }
.baly-vpage .rating{ position:absolute; bottom:10px; left:10px; z-index:2; background:#FFF8E1; border:1px solid #F5E3A6; color:var(--bf-grey-900); font-size:12px; font-weight:700; padding:4px 9px; border-radius:var(--bf-radius-pill); display:inline-flex; align-items:center; gap:4px; box-shadow:var(--bf-shadow-1); direction:ltr; line-height:1.1; }
.baly-vpage .rating svg{ width:12px; height:12px; color:#FFB800; }
.baly-vpage .rating .rc{ color:var(--bf-grey-600); font-weight:600; font-size:10.5px; }
.baly-vpage .vlogo{ position:absolute; bottom:10px; right:10px; z-index:2; width:46px; height:46px; border-radius:var(--bf-radius-md); background:#fff center/cover no-repeat; box-shadow:0 2px 10px rgba(0,0,0,.16); border:2px solid #fff; }
.baly-vpage .body{ padding:11px 13px 12px; display:flex; flex-direction:column; gap:6px; }
.baly-vpage .name{ margin:0; font-size:15px; font-weight:900; line-height:1.25; letter-spacing:-.01em; color:var(--bf-grey-900); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:right; }
.baly-vpage .tags{ font-size:12px; font-weight:600; color:var(--bf-grey-600); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.baly-vpage .meta{ display:flex; align-items:center; gap:12px; font-size:12px; font-weight:700; color:var(--bf-grey-800); margin-top:1px; }
.baly-vpage .meta .cell{ display:inline-flex; align-items:center; gap:5px; }
.baly-vpage .meta .ic{ width:14px; height:14px; flex:none; }
.baly-vpage .meta .ic.t{ color:var(--bf-success); }
.baly-vpage .meta .ic.b{ color:var(--bf-brand); }
.baly-vpage .meta .free{ color:var(--bf-success); }

/* empty state */
.baly-vpage .empty{ display:none; flex-direction:column; align-items:center; text-align:center; padding:70px 20px; color:var(--bf-grey-700); }
.baly-vpage .empty.show{ display:flex; }
.baly-vpage .empty .ec{ width:74px; height:74px; border-radius:50%; background:var(--bf-grey-200); display:flex; align-items:center; justify-content:center; margin-bottom:18px; }
.baly-vpage .empty .ec svg{ width:34px; height:34px; color:var(--bf-grey-600); }
.baly-vpage .empty h3{ margin:0 0 6px; font-size:19px; font-weight:700; color:var(--bf-grey-900); }
.baly-vpage .empty p{ margin:0 0 18px; font-size:14px; max-width:340px; line-height:1.5; }
.baly-vpage .empty .btn{ flex:none; padding:0 22px; background:var(--bf-brand); border-color:var(--bf-brand); color:#fff; }
.baly-vpage .empty .btn:hover{ background:var(--bf-brand-hover); }

/* ── Pagination ─────────────────────────────────────── */
.baly-vpage .pager{ display:flex; align-items:center; justify-content:center; gap:8px; padding:40px 0 8px; flex-wrap:wrap; }
.baly-vpage .pager[hidden]{ display:none; }
.baly-vpage .pg-num,.baly-vpage .pg-arrow{ min-width:44px; height:44px; padding:0 8px; border-radius:var(--bf-radius-md); border:1px solid var(--bf-border); background:#fff; color:var(--bf-grey-800); font-family:inherit; font-size:14.5px; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:all .12s; direction:ltr; text-decoration:none; }
.baly-vpage .pg-num:hover,.baly-vpage .pg-arrow:not([disabled]):not([aria-disabled="true"]):hover{ border-color:var(--bf-grey-300); background:var(--bf-grey-50); }
.baly-vpage .pg-num.active{ background:var(--bf-brand); border-color:var(--bf-brand); color:#fff; box-shadow:0 4px 12px rgba(0,67,255,.2); }
.baly-vpage .pg-arrow svg{ width:18px; height:18px; }
.baly-vpage .pg-arrow[disabled],.baly-vpage .pg-arrow[aria-disabled="true"]{ opacity:.38; cursor:default; pointer-events:none; }
.baly-vpage .pg-gap{ min-width:26px; text-align:center; color:var(--bf-grey-600); font-weight:700; }

/* scrim for mobile sheet */
.baly-vpage .scrim{ position:fixed; inset:0; background:rgba(10,10,10,.4); z-index:55; opacity:0; pointer-events:none; transition:opacity .2s; }
.baly-vpage .scrim.show{ opacity:1; pointer-events:auto; }

/* ── Mobile ─────────────────────────────────────────── */
@media (max-width:680px){
	.baly-vpage .page{ padding:0 14px 80px; }
	.baly-vpage .controls{ margin:0 -14px; padding-inline:14px; }
	.baly-vpage .page-head{ padding:24px 2px 14px; }
	.baly-vpage h1.title{ font-size:24px; }
	.baly-vpage .title-row{ align-items:stretch; }
	.baly-vpage .search{ min-width:0; width:100%; }
	.baly-vpage .hero{ aspect-ratio:1.6/1; }
	/* filters as bottom sheet */
	.baly-vpage .filters{ position:fixed; left:0; right:0; bottom:0; top:auto; min-width:0; max-width:none; width:100%; border-radius:var(--bf-radius-2xl) var(--bf-radius-2xl) 0 0; transform:translateY(100%); transition:transform .26s var(--bf-ease-out); max-height:88vh; }
	.baly-vpage .filters.open{ transform:none; }
	.baly-vpage .filters-body{ max-height:none; }
}