/* QB - Fahwa Services — widget (grid + slider)
 * QB Studio — qusai.dev
 */
.qb-fs{
	--qb-fs-accent:#C8973B;
	--qb-fs-ink:#1A1A1A;
	--qb-fs-muted:#7A7A7A;
	--qb-fs-card-bg:#fff;
	--qb-fs-cols:4;
	--qb-fs-gap:28px;
	--qb-fs-radius:18px;
	--qb-fs-ratio:78%;
	position:relative;
	width:100%;
}

/* ---------- Header ---------- */
.qb-fs__head{
	display:flex;
	flex-direction:column;
	gap:14px;
	max-width:820px;
	margin:0 auto 46px;
}
.qb-fs__mark{
	width:46px;height:6px;border-radius:6px;
	background:var(--qb-fs-accent);
	position:relative;
}
.qb-fs__mark::before{
	content:"";position:absolute;top:0;inset-inline-start:-16px;
	width:10px;height:6px;border-radius:6px;background:var(--qb-fs-accent);opacity:.55;
}
.qb-fs__title{
	margin:0;
	font-size:46px;
	line-height:1.08;
	font-weight:800;
	letter-spacing:-.02em;
	color:var(--qb-fs-ink);
}
.qb-fs__title-hl{
	color:var(--qb-fs-accent);
	font-family:Georgia,"Times New Roman",serif;
	font-style:italic;
	font-weight:600;
}
.qb-fs__subtitle{
	margin:0;
	color:var(--qb-fs-muted);
	font-size:17px;
	line-height:1.7;
	max-width:640px;
}

/* ---------- Viewport / track ---------- */
.qb-fs__viewport{position:relative;}
.qb-fs--grid .qb-fs__track{
	display:grid;
	grid-template-columns:repeat(var(--qb-fs-cols),minmax(0,1fr));
	gap:var(--qb-fs-gap);
}
.qb-fs--grid .qb-fs__slide{min-width:0;}

.qb-fs--slider .qb-fs__track{
	display:flex;
	gap:var(--qb-fs-gap);
	overflow-x:auto;
	scroll-snap-type:x mandatory;
	scroll-behavior:smooth;
	padding-bottom:6px;
	scrollbar-width:none;
}
.qb-fs--slider .qb-fs__track::-webkit-scrollbar{display:none;}
.qb-fs--slider .qb-fs__slide{
	flex:0 0 calc((100% - (var(--qb-fs-cols) - 1) * var(--qb-fs-gap)) / var(--qb-fs-cols));
	scroll-snap-align:start;
}

/* ---------- Nav arrows ---------- */
.qb-fs__nav{
	position:absolute;top:50%;transform:translateY(-50%);
	z-index:5;
	width:48px;height:48px;border:0;border-radius:50%;
	background:var(--qb-fs-accent);color:#fff;
	display:flex;align-items:center;justify-content:center;
	cursor:pointer;
	box-shadow:0 10px 24px rgba(200,151,59,.35);
	transition:transform .2s ease,filter .2s ease,opacity .2s ease;
}
.qb-fs__nav:hover{filter:brightness(1.06);transform:translateY(-50%) scale(1.06);}
.qb-fs__nav:disabled{opacity:.4;cursor:default;}
.qb-fs__nav--prev{inset-inline-start:-24px;}
.qb-fs__nav--next{inset-inline-end:-24px;}
[dir="rtl"] .qb-fs__nav--prev svg,
[dir="rtl"] .qb-fs__nav--next svg{transform:scaleX(-1);}

/* ---------- Card ---------- */
.qb-fs-card{
	background:var(--qb-fs-card-bg);
	border-radius:var(--qb-fs-radius);
	overflow:hidden;
	box-shadow:0 8px 30px rgba(20,20,20,.08);
	display:flex;flex-direction:column;
	height:100%;
	transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease;
}
.qb-fs-card:hover{transform:translateY(-8px);box-shadow:0 22px 48px rgba(20,20,20,.16);}

.qb-fs-card__media{
	position:relative;
	margin:12px 12px 0;
	border-radius:calc(var(--qb-fs-radius) - 4px);
	overflow:hidden;
	padding-top:var(--qb-fs-ratio);
	background:#efeae0;
}
.qb-fs-card__img{
	position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
	transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
.qb-fs-card__img--ph{
	background:linear-gradient(135deg,#efe8d8,#d9cdb2);
}
.qb-fs-card:hover .qb-fs-card__img{transform:scale(1.07);}

.qb-fs-card__badge{
	position:absolute;top:12px;inset-inline-start:12px;
	display:inline-flex;align-items:center;gap:7px;
	background:rgba(255,255,255,.94);
	backdrop-filter:blur(4px);
	padding:6px 12px;border-radius:10px;
	font-size:11px;letter-spacing:.14em;
	color:var(--qb-fs-ink);
	box-shadow:0 4px 12px rgba(0,0,0,.12);
}
.qb-fs-card__badge b{font-weight:800;}
.qb-fs-card__badge i{color:var(--qb-fs-accent);font-style:normal;opacity:.7;}
.qb-fs-card__badge span{font-weight:600;opacity:.75;}

.qb-fs-card__icon{
	position:absolute;bottom:-2px;inset-inline-end:14px;
	width:52px;height:52px;border-radius:14px;
	background:#f6efe0;
	display:flex;align-items:center;justify-content:center;
	box-shadow:0 8px 20px rgba(200,151,59,.28);
	transition:transform .35s ease,background .35s ease;
}
.qb-fs-card__icon img,.qb-fs-card__icon svg{width:26px;height:26px;object-fit:contain;}
.qb-fs-card:hover .qb-fs-card__icon{transform:translateY(-4px) scale(1.05);background:var(--qb-fs-accent);}
.qb-fs-card:hover .qb-fs-card__icon img{filter:brightness(0) invert(1);}

.qb-fs-card__body{padding:26px 22px 24px;display:flex;flex-direction:column;gap:12px;flex:1;}
.qb-fs-card__title{margin:0;font-size:20px;font-weight:800;color:var(--qb-fs-ink);letter-spacing:-.01em;}
.qb-fs-card__desc{
	margin:0;color:var(--qb-fs-muted);font-size:14.5px;line-height:1.65;
	display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.qb-fs-card__btn{
	margin-top:auto;align-self:flex-start;
	display:inline-flex;align-items:center;gap:8px;
	padding:11px 22px;border-radius:999px;
	border:2px solid var(--qb-fs-accent);
	color:var(--qb-fs-accent);
	font-size:13px;font-weight:700;letter-spacing:.02em;
	text-decoration:none;
	transition:all .25s ease;
}
.qb-fs-card__btn-ar{transition:transform .25s ease;}
[dir="rtl"] .qb-fs-card__btn-ar{transform:scaleX(-1);}
.qb-fs-card__btn:hover{background:var(--qb-fs-accent);color:#fff;box-shadow:0 10px 22px rgba(200,151,59,.32);}
.qb-fs-card__btn:hover .qb-fs-card__btn-ar{transform:translateX(3px);}
[dir="rtl"] .qb-fs-card__btn:hover .qb-fs-card__btn-ar{transform:scaleX(-1) translateX(3px);}
/* Solid button variant */
.qb-fs-btn-solid .qb-fs-card__btn{background:var(--qb-fs-accent);color:#fff;border-color:var(--qb-fs-accent);}
.qb-fs-btn-solid .qb-fs-card__btn:hover{filter:brightness(1.06);}

/* ---------- Entrance animation ---------- */
.qb-fs-anim{opacity:0;transform:translateY(26px);}
.qb-fs-anim.is-in{
	opacity:1;transform:none;
	transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1);
	transition-delay:calc(var(--i,0) * 90ms);
}

.qb-fs-empty{padding:40px;text-align:center;color:#888;border:1px dashed #ccc;border-radius:12px;}

/* ---------- Responsive ---------- */
@media(max-width:1024px){
	.qb-fs__title{font-size:36px;}
	.qb-fs__nav--prev{inset-inline-start:-8px;}
	.qb-fs__nav--next{inset-inline-end:-8px;}
}
@media(max-width:767px){
	.qb-fs__title{font-size:29px;}
	.qb-fs__subtitle{font-size:15px;}
	.qb-fs__nav{width:42px;height:42px;}
}
@media (prefers-reduced-motion: reduce){
	.qb-fs-anim{opacity:1;transform:none;transition:none;}
	.qb-fs-card,.qb-fs-card__img,.qb-fs-card__icon{transition:none;}
}