/* ==========================================================================
   Cart drawer — WABAR mini-cart
   RTL: the panel slides in from the INLINE-START edge (visually the left on an
   Arabic page) using logical properties, so it follows the document direction
   instead of being pinned to a physical side.
   ========================================================================== */

body.wabar-drawer-open{overflow:hidden;}
.wabar-drawer[hidden]{display:none;}
.wabar-drawer{position:fixed;inset:0;z-index:99995;}

.wabar-drawer-backdrop{
	position:absolute;inset:0;
	background:rgba(29,22,17,.55);backdrop-filter:blur(3px);
	opacity:0;transition:opacity .28s ease;
}
.wabar-drawer.is-open .wabar-drawer-backdrop{opacity:1;}

.wabar-drawer-panel{
	position:absolute;inset-block:0;inset-inline-start:0;
	width:min(420px,100%);
	display:flex;flex-direction:column;
	background:#fff;
	box-shadow:0 0 60px rgba(29,22,17,.28);
	transform:translateX(var(--slide,-100%));
	transition:transform .3s cubic-bezier(.22,.7,.24,1);
}
/* `inset-inline-start` is the RIGHT edge in RTL and the LEFT edge in LTR, so
   the off-screen offset has to flip sign with the direction — otherwise the
   panel animates in across the whole viewport from the far side. */
[dir="rtl"] .wabar-drawer-panel{--slide:100%;}
[dir="ltr"] .wabar-drawer-panel{--slide:-100%;}
.wabar-drawer.is-open .wabar-drawer-panel{transform:translateX(0);}
.wabar-drawer.is-busy .wabar-drawer-panel{opacity:.6;pointer-events:none;}

/* ---- head ---------------------------------------------------------------- */
.wabar-drawer-head{
	flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
	gap:12px;padding:18px 20px;border-bottom:1px solid var(--line,#eee);
}
.wabar-drawer-head h2{margin:0;font-size:19px;font-weight:800;color:var(--ink,#2D2D2D);}
.wabar-drawer-x{
	width:34px;height:34px;border-radius:50%;
	border:1px solid rgba(45,45,45,.14);background:transparent;cursor:pointer;
	font-size:23px;line-height:1;color:var(--ink,#2D2D2D);
	display:grid;place-items:center;transition:background .2s;
}
.wabar-drawer-x:hover{background:rgba(45,45,45,.06);}

.wabar-drawer-added{
	flex:0 0 auto;margin:0;padding:11px 20px;
	background:rgba(145,95,65,.09);color:var(--primary-dark,#744B34);
	font-size:13.5px;font-weight:700;
}
.wabar-drawer-added::before{content:"✓";margin-inline-end:7px;font-weight:800;}

/* ---- body ---------------------------------------------------------------- */
.wabar-drawer-body{flex:1 1 auto;display:flex;flex-direction:column;min-height:0;}

.wabar-drawer-items{
	flex:1 1 auto;overflow-y:auto;min-height:0;
	list-style:none;margin:0;padding:6px 20px;
}
.wabar-drawer-item{
	position:relative;
	display:grid;grid-template-columns:74px 1fr 22px;gap:12px;
	align-items:start;
	padding:16px 0;border-bottom:1px solid var(--line,#f0ece8);
}
.wabar-drawer-item:last-child{border-bottom:0;}

/* line-height:0 + margin:0 — WooCommerce's `.woocommerce img{margin-bottom:1em}`
   otherwise adds 20px under every thumbnail. Same trap as the cart page. */
.wabar-drawer-thumb{display:block;border-radius:12px;overflow:hidden;background:#f8f5f3;line-height:0;}
.wabar-drawer-thumb img{width:100%;height:auto;display:block;margin:0 !important;aspect-ratio:4/5;object-fit:cover;}

.wabar-drawer-info{min-width:0;display:flex;flex-direction:column;gap:5px;}
.wabar-drawer-name{
	font-size:14.5px;font-weight:700;line-height:1.5;
	color:var(--ink,#2D2D2D) !important;text-decoration:none;
}
.wabar-drawer-name:hover{color:var(--primary,#915F41) !important;}
.wabar-drawer-meta{font-size:12.5px;color:var(--muted,#6b625c);}
.wabar-drawer-meta p{margin:0;}

.wabar-drawer-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:6px;}
.wabar-drawer-price{font-size:14px;font-weight:800;color:var(--ink,#2D2D2D);white-space:nowrap;}

.wabar-qty{
	display:inline-flex;align-items:center;
	border:1px solid var(--line,#e6e0da);border-radius:999px;overflow:hidden;
}
.wabar-qty button{
	width:28px;height:28px;border:0;background:transparent;cursor:pointer;
	font-size:15px;line-height:1;color:var(--ink,#2D2D2D);
	display:grid;place-items:center;transition:background .18s;
}
.wabar-qty button:hover{background:rgba(145,95,65,.09);}
.wabar-qty span{min-width:26px;text-align:center;font-size:13.5px;font-weight:700;}

.wabar-drawer-remove{
	border:0;background:transparent;cursor:pointer;padding:0;
	font-size:19px;line-height:1;color:var(--muted,#a89e97);
	transition:color .2s;
}
.wabar-drawer-remove:hover{color:var(--ink,#2D2D2D);}

/* ---- foot ---------------------------------------------------------------- */
.wabar-drawer-foot{
	flex:0 0 auto;padding:18px 20px calc(18px + env(safe-area-inset-bottom));
	border-top:1px solid var(--line,#eee);background:var(--cream-soft,#FDF4E8);
}
.wabar-drawer-sum{display:flex;align-items:baseline;justify-content:space-between;gap:12px;}
.wabar-drawer-sum span{font-size:14px;font-weight:600;color:var(--muted,#6b625c);}
.wabar-drawer-sum strong{font-size:20px;font-weight:800;color:var(--ink,#2D2D2D);}
/* المجموع / الخصم / الإجمالي stack (عرض التيشيرتات fee) */
.wabar-drawer-fee{margin-top:2px;}
.wabar-drawer-fee strong{font-size:15px;font-weight:700;color:var(--primary,#173F53);}
.wabar-drawer-total{margin-top:2px;padding-top:8px;border-top:1px solid var(--line,#e8e2d9);}
.wabar-drawer-total strong{font-size:22px;}
.wabar-drawer-note{margin:4px 0 14px;font-size:12px;color:var(--muted,#6b625c);}
/* عرض التيشيرتات nudge («أضف تيشيرت ثاني…» / «وفّرت…») — drawer + cart page. */
.oso-bundle-note{
	margin:0 0 12px;padding:9px 12px;border-radius:10px;
	background:rgba(199,154,74,.14);border:1px solid rgba(199,154,74,.35);
	font-size:13px;font-weight:700;line-height:1.55;color:var(--primary,#173F53);
}

.wabar-drawer-cta{
	display:block;width:100%;padding:14px 18px;border-radius:999px;
	background:var(--primary,#915F41);color:#fff !important;
	font-size:15px;font-weight:800;text-align:center;text-decoration:none;
	transition:background .25s;
}
.wabar-drawer-cta:hover{background:var(--primary-dark,#744B34);}
.wabar-drawer-link{
	display:block;margin-top:10px;text-align:center;
	font-size:13.5px;font-weight:600;color:var(--muted,#6b625c) !important;
	text-decoration:underline;text-underline-offset:3px;
}
.wabar-drawer-link:hover{color:var(--ink,#2D2D2D) !important;}

/* ---- empty --------------------------------------------------------------- */
.wabar-drawer-empty{
	flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;
	gap:12px;padding:40px 24px;text-align:center;
}
.wabar-drawer-empty span{font-size:42px;line-height:1;}
.wabar-drawer-empty p{margin:0;font-size:15px;font-weight:700;color:var(--muted,#6b625c);}
.wabar-drawer-empty .wabar-drawer-cta{width:auto;padding:12px 28px;}

@media(max-width:520px){
	.wabar-drawer-panel{width:100%;}
	.wabar-drawer-item{grid-template-columns:64px 1fr 22px;gap:10px;}
}
@media (prefers-reduced-motion:reduce){
	.wabar-drawer-panel,.wabar-drawer-backdrop{transition:none;}
}