/*
 * OrderSnap — Frontend Styles
 *
 * Uses CSS custom properties fed from plugin settings:
 *   --os-primary   (button / float button background)
 *   --os-secondary (price colour, cart header, secondary accents)
 *
 * Font: Cairo — assumed to be loaded by the active theme.
 * Zero external frameworks. RTL layout via dir="rtl" on #ordersnap-shop.
 */

/* ── Fallback custom-property defaults ─────────────────────────────────────── */
#ordersnap-shop {
	--os-primary:   #F5C518;
	--os-secondary: #6B21A8;
	/* Overridden by the inline style written by PHP. */

	font-family: 'Cairo', sans-serif;
	direction: rtl;
	unicode-bidi: embed;
	box-sizing: border-box;
}

#ordersnap-shop *,
#ordersnap-shop *::before,
#ordersnap-shop *::after {
	box-sizing: inherit;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Products Grid
   ═══════════════════════════════════════════════════════════════════════════ */

.os-products-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	padding: 24px 0;
}

@media (max-width: 900px) {
	.os-products-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 14px;
	}
	.os-product-image {
		height: 140px;
	}
}

@media (max-width: 480px) {
	.os-products-grid {
		gap: 10px;
	}
	.os-product-image {
		height: 110px;
	}
}

/* ── Empty shop notice ───────────────────────────────────────────────────── */
.os-empty-shop {
	padding: 32px;
	text-align: center;
	color: #888;
	font-size: 16px;
	font-family: 'Cairo', sans-serif;
}

/* ── Product card ─────────────────────────────────────────────────────────── */
.os-product-card {
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: box-shadow .2s ease;
}

.os-product-card:hover {
	box-shadow: 0 6px 20px rgba(0, 0, 0, .13);
}

/* Unavailable card — greyscale + muted state */
.os-product-card.os-unavailable {
	opacity: .88;
}

/* ── Product image ────────────────────────────────────────────────────────── */
.os-product-image {
	position: relative;
	height: 200px;
	overflow: hidden;
	background: #f3f3f3;
}

.os-product-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: filter .3s;
}

.os-product-card.os-unavailable .os-product-image img {
	filter: grayscale(100%);
	opacity: .65;
}

/* Placeholder when no thumbnail is set */
.os-product-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ccc;
	background: #f7f7f7;
}

/* "غير متوفر" badge overlaid on image */
.os-unavailable-badge {
	position: absolute;
	top: 10px;
	right: 10px;
	background: rgba(0, 0, 0, .68);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	padding: 3px 10px;
	border-radius: 20px;
	font-family: 'Cairo', sans-serif;
	letter-spacing: .02em;
}

/* ── Product info panel ───────────────────────────────────────────────────── */
.os-product-info {
	padding: 14px 14px 16px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.os-product-name {
	font-size: 14px;
	font-weight: 700;
	color: #1a1a1a;
	margin: 0 0 8px;
	line-height: 1.5;
	font-family: 'Cairo', sans-serif;
}

.os-product-price {
	font-size: 17px;
	font-weight: 800;
	color: var(--os-secondary);
	margin: 0 0 12px;
	font-family: 'Cairo', sans-serif;
}

/* ── Quantity stepper (available products only) ───────────────────────────── */
.os-product-qty-wrap {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 12px;
}

/* Numeric display between the − and + buttons on a product card */
.os-card-qty-display {
	font-size: 15px;
	font-weight: 700;
	font-family: 'Cairo', sans-serif;
	min-width: 28px;
	text-align: center;
	color: #222;
}

/* ── Add-to-cart button ───────────────────────────────────────────────────── */
.os-add-to-cart {
	margin-top: auto;
	width: 100%;
	padding: 10px 12px;
	background: var(--os-primary);
	color: #1a1a1a;
	border: none;
	border-radius: 9px;
	font-size: 14px;
	font-weight: 700;
	font-family: 'Cairo', sans-serif;
	cursor: pointer;
	transition: opacity .2s, transform .1s;
}

.os-add-to-cart:hover:not(:disabled) {
	opacity: .85;
}

.os-add-to-cart:active:not(:disabled) {
	transform: scale(.97);
}

.os-add-to-cart:disabled {
	background: #e0e0e0;
	color: #999;
	cursor: not-allowed;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Cart Overlay (backdrop)
   ═══════════════════════════════════════════════════════════════════════════ */

.os-cart-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, .52);
	z-index: 9998;
	cursor: pointer;
	animation: osFadeIn .25s ease;
}

.os-cart-overlay.os-active {
	display: block;
}

@keyframes osFadeIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Cart Sidebar Drawer
   ═══════════════════════════════════════════════════════════════════════════ */

.os-cart-sidebar {
	position: fixed;
	top: 0;
	right: -440px;
	width: 420px;
	max-width: 96vw;
	height: 100dvh;
	background: #fff;
	z-index: 9999;
	display: flex;
	flex-direction: column;
	transition: right .3s cubic-bezier(.4, 0, .2, 1);
	box-shadow: -6px 0 30px rgba(0, 0, 0, .18);
	direction: rtl;
	font-family: 'Cairo', sans-serif;
}

.os-cart-sidebar.os-open {
	right: 0;
}

/* ── Cart header ─────────────────────────────────────────────────────────── */
.os-cart-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 20px;
	background: var(--os-secondary);
	color: #fff;
	flex-shrink: 0;
}

.os-cart-title {
	margin: 0;
	font-size: 19px;
	font-weight: 700;
	font-family: 'Cairo', sans-serif;
}

.os-cart-close {
	background: transparent;
	border: none;
	color: #fff;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .2s;
	padding: 0;
	font-family: 'Cairo', sans-serif;
}

.os-cart-close:hover {
	background: rgba(255, 255, 255, .2);
}

/* ── Cart items list ─────────────────────────────────────────────────────── */
.os-cart-items {
	flex: 1;
	overflow-y: auto;
	padding: 4px 0;
	overscroll-behavior: contain;
}

.os-cart-items::-webkit-scrollbar { width: 6px; }
.os-cart-items::-webkit-scrollbar-track { background: transparent; }
.os-cart-items::-webkit-scrollbar-thumb { background: #d0d0d0; border-radius: 3px; }

.os-cart-empty {
	text-align: center;
	padding: 48px 20px;
	color: #aaa;
	font-size: 15px;
	font-family: 'Cairo', sans-serif;
}

/* ── Single cart item ────────────────────────────────────────────────────── */
.os-cart-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 18px;
	border-bottom: 1px solid #f2f2f2;
	animation: osSlideIn .2s ease;
}

@keyframes osSlideIn {
	from { opacity: 0; transform: translateX(10px); }
	to   { opacity: 1; transform: translateX(0); }
}

/* Thumbnail shown on the right side of each cart row */
.os-cart-item-thumb {
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	border-radius: 6px;
	overflow: hidden;
	background: #f3f3f3;
	order: -1; /* RTL: visually rightmost = DOM-first = order -1 inside flex row */
}

.os-cart-item-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.os-cart-item-info {
	flex: 1;
	min-width: 0;
}

.os-cart-item-name {
	font-size: 14px;
	font-weight: 700;
	color: #222;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-bottom: 3px;
	font-family: 'Cairo', sans-serif;
}

.os-cart-item-unit-price {
	font-size: 12px;
	color: #888;
	font-family: 'Cairo', sans-serif;
}

/* +/- qty controls */
.os-cart-item-controls {
	display: flex;
	align-items: center;
	gap: 6px;
}

.os-qty-btn {
	width: 28px;
	height: 28px;
	background: #f0f0f0;
	border: 1px solid #ddd;
	border-radius: 7px;
	cursor: pointer;
	font-size: 17px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .15s;
	padding: 0;
	font-family: 'Cairo', sans-serif;
	color: #333;
	line-height: 1;
}

.os-qty-btn:hover {
	background: var(--os-primary);
	border-color: var(--os-primary);
}

.os-item-qty {
	font-size: 15px;
	font-weight: 700;
	min-width: 22px;
	text-align: center;
	color: #222;
	font-family: 'Cairo', sans-serif;
}

/* Line total */
.os-item-total {
	font-size: 14px;
	font-weight: 700;
	color: var(--os-secondary);
	min-width: 56px;
	text-align: left;
	white-space: nowrap;
	font-family: 'Cairo', sans-serif;
}

/* Remove button */
.os-remove-item {
	background: transparent;
	border: none;
	color: #cc3333;
	font-size: 22px;
	cursor: pointer;
	padding: 0 2px;
	line-height: 1;
	flex-shrink: 0;
	opacity: .7;
	transition: opacity .15s;
	font-family: 'Cairo', sans-serif;
}

.os-remove-item:hover {
	opacity: 1;
}

/* ── Cart footer ─────────────────────────────────────────────────────────── */
.os-cart-footer {
	padding: 18px 20px 22px;
	border-top: 1px solid #ececec;
	background: #fafafa;
	flex-shrink: 0;
}

.os-cart-totals {
	margin-bottom: 14px;
}

.os-cart-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 5px 0;
	font-size: 14px;
	color: #555;
	font-family: 'Cairo', sans-serif;
}

.os-grand-total-row {
	font-size: 17px;
	font-weight: 800;
	color: #111;
	border-top: 2px solid #e8e8e8;
	margin-top: 6px;
	padding-top: 10px;
}

/* Minimum order warning */
.os-min-order-warning {
	background: #fffae6;
	color: #7a5c00;
	border: 1px solid #f5c518;
	border-radius: 8px;
	padding: 9px 13px;
	font-size: 13px;
	font-family: 'Cairo', sans-serif;
	margin-bottom: 14px;
	line-height: 1.5;
}

/* WhatsApp send button */
.os-send-order-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	width: 100%;
	padding: 15px 12px;
	background: #25D366;
	color: #fff;
	border: none;
	border-radius: 12px;
	font-size: 16px;
	font-weight: 700;
	font-family: 'Cairo', sans-serif;
	cursor: pointer;
	transition: opacity .2s, transform .1s;
	letter-spacing: .01em;
}

.os-send-order-btn:hover:not(:disabled) {
	opacity: .9;
}

.os-send-order-btn:active:not(:disabled) {
	transform: scale(.98);
}

.os-send-order-btn:disabled {
	background: #9bd4b0;
	cursor: not-allowed;
	opacity: .7;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Floating Cart Button
   ═══════════════════════════════════════════════════════════════════════════ */

.os-float-cart {
	position: fixed;
	bottom: 24px;
	left: 24px;
	width: 62px;
	height: 62px;
	background: var(--os-primary);
	color: #1a1a1a;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	box-shadow: 0 4px 18px rgba(0, 0, 0, .22);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9997;
	transition: transform .2s ease, box-shadow .2s ease;
	padding: 0;
}

.os-float-cart:hover {
	transform: scale(1.1);
	box-shadow: 0 6px 24px rgba(0, 0, 0, .28);
}

.os-float-cart:active {
	transform: scale(.96);
}

/* Item count badge */
.os-cart-count {
	position: absolute;
	top: -4px;
	right: -4px;
	background: var(--os-secondary);
	color: #fff;
	min-width: 22px;
	height: 22px;
	border-radius: 11px;
	font-size: 11px;
	font-weight: 800;
	font-family: 'Cairo', sans-serif;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 4px;
	border: 2px solid #fff;
	line-height: 1;
}

/* ── Prevent body scroll while cart drawer is open ────────────────────────── */
body.os-cart-open {
	overflow: hidden;
}