/* Zakharif Studio — designer, swatches, quote, WhatsApp. Logical properties keep Arabic (RTL) correct. */
:root {
	--zk-aqua: #B7E2E3;
	--zk-grey: #646263;
	--zk-grey-2: #6D6E71;
	--zk-ink: #1f2021;
	--zk-muted: #4a4b4d;
	--zk-line: #dfe3e3;
	--zk-soft: #f4f7f7;
	--zk-radius: 16px;
}

.zk-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	padding: 12px 24px;
	border: 2px solid transparent;
	border-radius: 999px;
	font: inherit;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
}
.zk-btn--accent { background: var(--zk-aqua); color: #000; }
.zk-btn--accent:hover { background: #a3d6d8; color: #000; }
.zk-btn--dark { background: #000; color: #fff; }
.zk-btn--dark:hover { background: #2a2a2a; color: #fff; }
.zk-btn--whatsapp { background: #fff; color: #0b6b3a; border-color: #128C4B; margin-block-start: 12px; }
.zk-btn--whatsapp:hover { background: #effaf3; color: #075a30; }
.zk-btn--block { display: flex; width: 100%; margin-block-start: 12px; }
.zk-btn[disabled] { opacity: .6; cursor: wait; }
form.cart .zk-btn--whatsapp { width: 100%; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* ---------- Swatches ---------- */
.zk-swatch-wrap { position: relative; }
.zk-swatch-wrap select[data-zk-swatched],
.woocommerce div.product form.cart .variations .zk-swatch-wrap select[data-zk-swatched] {
	position: absolute !important;
	inset-block-start: 0; inset-inline-start: 0;
	width: 1px !important; min-width: 0 !important; max-width: 1px !important;
	height: 1px !important; padding: 0 !important; border: 0 !important;
	opacity: 0; pointer-events: none;
}
.zk-swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.zk-swatch {
	--zk-swatch: #ccc;
	position: relative;
	min-width: 44px;
	min-height: 44px;
	padding: 0 14px;
	border: 1px solid #b9bdbd;
	border-radius: 999px;
	background: #fff;
	color: var(--zk-ink);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}
.zk-swatches--color .zk-swatch,
.zk-swatch--sm {
	width: 40px; height: 40px; min-width: 40px; min-height: 40px;
	padding: 0;
	background: var(--zk-swatch);
	border: 1px solid rgba(0, 0, 0, .25);
	box-shadow: inset 0 0 0 3px #fff;
}
.zk-swatch--sm { width: 32px; height: 32px; min-width: 32px; min-height: 32px; }
.zk-swatch.is-selected { outline: 2px solid #000; outline-offset: 2px; }
.zk-swatches--size .zk-swatch.is-selected { background: #000; color: #fff; border-color: #000; outline: 0; }
.zk-swatch.is-disabled { opacity: .3; cursor: not-allowed; }
.zk-swatch:focus-visible { outline: 3px solid #0b57d0; outline-offset: 2px; }
.zk-swatch-name { margin-block-start: 6px; font-size: 14px; color: var(--zk-muted); min-height: 1.2em; }
.variations td.value { padding-block-end: 12px; }

.zk-dots { display: flex; align-items: center; gap: 4px; margin: 6px 0 4px; flex-wrap: wrap; }
.zk-dot { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .2); display: inline-block; }
.zk-dots__more { font-size: 12px; color: var(--zk-muted); margin-inline-start: 2px; }

/* ---------- Designer ---------- */
.woocommerce div.product div.zk-designer.images,
.zk-designer {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.zk-designer__stage {
	background: var(--zk-soft);
	border-radius: var(--zk-radius);
	padding: 16px;
}
.zk-designer__tabs { display: flex; gap: 8px; margin-block-end: 12px; flex-wrap: wrap; }
.zk-tab {
	min-height: 40px;
	padding: 8px 18px;
	border-radius: 999px;
	border: 1px solid #c8cccc;
	background: #fff;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	color: var(--zk-ink);
}
.zk-tab[aria-selected="true"] { background: #000; color: #fff; border-color: #000; }
.zk-designer__areas { display: flex; gap: 6px; flex-wrap: wrap; margin-block-end: 12px; }
.zk-designer__areas[hidden] { display: none; }
.zk-area-chip {
	min-height: 36px; padding: 6px 14px; border-radius: 999px;
	border: 1px dashed #8a8d8d; background: #fff; color: var(--zk-ink);
	font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.zk-area-chip.is-selected { border-style: solid; border-color: #000; background: var(--zk-aqua); color: #000; }
.zk-designer__canvas { width: 100%; display: flex; justify-content: center; }
.zk-designer__canvas .canvas-container { margin: 0 auto; border-radius: 12px; overflow: hidden; }
.zk-designer__side[hidden] { display: none; }
.zk-designer__hint { margin: 10px 0 0; font-size: 13px; color: var(--zk-muted); text-align: center; }

.zk-designer__tools {
	border: 1px solid var(--zk-line);
	border-radius: var(--zk-radius);
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.zk-designer__title { margin: 0; font-size: 22px; font-weight: 800; }
.zk-tool { display: flex; flex-direction: column; gap: 10px; }
.zk-tool__label { font-weight: 700; font-size: 15px; margin: 0; }
.zk-tool__msg { margin: 0; font-size: 14px; color: var(--zk-muted); min-height: 1em; }
.zk-tool__msg.is-error { color: #b3261e; }
.zk-tool__fee:empty { display: none; }
.zk-tool__fee { border-top: 1px solid var(--zk-line); padding-top: 14px; }
.zk-breakdown { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.zk-breakdown li { display: flex; justify-content: space-between; gap: 12px; }
.zk-breakdown span { color: var(--zk-muted); }
.zk-breakdown strong { white-space: nowrap; }
.zk-breakdown__total { margin: 10px 0 0; font-weight: 800; }
.zk-size-guide-btn { display: inline-flex; align-items: center; gap: 6px; margin: 4px 0 8px; font-weight: 600; }
.zk-size-guide { max-width: min(1000px, 94vw); width: 100%; padding: 16px; border: 0; border-radius: 16px; }
.zk-size-guide::backdrop { background: rgba(0, 0, 0, .6); }
.zk-size-guide-row { margin: 4px 0 18px; }
.zk-size-guide__title { margin: 0 48px 4px 0; font-size: 22px; font-weight: 800; }
.zk-size-guide__note { margin: 0 0 14px; font-size: 14px; color: var(--zk-muted); }
.zk-size-guide__scroll { overflow-x: auto; }
.zk-size-table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 420px; }
.zk-size-table th, .zk-size-table td { padding: 10px 12px; border-bottom: 1px solid var(--zk-line); text-align: center; }
.zk-size-table thead th { background: var(--zk-grey); color: #fff; font-weight: 700; }
.zk-size-table tbody th { text-align: start; font-weight: 800; white-space: nowrap; }
.zk-size-table tbody tr:nth-child(even) { background: var(--zk-soft); }
.zk-size-table__age { display: block; font-weight: 500; font-size: 12px; color: var(--zk-muted); }
/* Keep the quantity box and add-to-cart button consistent whatever loads after us. */
.woocommerce div.product form.cart div.quantity { float: none; display: inline-block; margin-inline-end: 8px; vertical-align: middle; }
.woocommerce div.product form.cart div.quantity input.qty { width: 80px !important; min-height: 52px !important; font-size: 17px !important; font-weight: 700; border-radius: 12px; border: 1px solid #b9bdbd; text-align: center; }
.woocommerce div.product form.cart button.single_add_to_cart_button.button.alt { background: #000 !important; color: #fff !important; vertical-align: middle; }
.woocommerce div.product form.cart button.single_add_to_cart_button.button.alt.disabled { opacity: .45; }
.woocommerce div.product form.cart .zk-btn--whatsapp { display: flex; width: 100%; }
.zk-size-guide__close {
	position: absolute; inset-block-start: 8px; inset-inline-end: 8px;
	width: 44px; height: 44px; border-radius: 50%; border: 0; background: #000; color: #fff;
	font-size: 26px; line-height: 1; cursor: pointer;
}
.zk-size-guide form { margin: 0; }
.zk-upload { width: 100%; }
.zk-row { display: flex; gap: 10px; align-items: center; }
.zk-row--wrap { flex-wrap: wrap; }
.zk-row--between { justify-content: space-between; flex-wrap: wrap; }
.zk-row input[type="text"], .zk-row select {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 48px;
	padding: 10px 14px;
	border: 1px solid #b9bdbd;
	border-radius: 12px;
	font: inherit;
	background: #fff;
}
.zk-methods { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.zk-method {
	display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: start;
	min-height: 64px; padding: 12px 14px; border-radius: 14px;
	border: 1px solid #b9bdbd; background: #fff; color: var(--zk-ink); font: inherit; cursor: pointer;
}
.zk-method span { font-size: 13px; color: var(--zk-muted); }
.zk-method.is-selected { border: 2px solid #000; background: var(--zk-soft); }
.zk-textcolors { display: flex; flex-wrap: wrap; gap: 8px; }
.zk-icon-btn {
	min-height: 40px;
	padding: 8px 14px;
	border-radius: 10px;
	border: 1px solid #c8cccc;
	background: #fff;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}
.zk-icon-btn:hover { border-color: #000; }
.zk-icon-btn--danger { color: #b3261e; }
.zk-link { background: none; border: 0; padding: 8px 0; font: inherit; text-decoration: underline; cursor: pointer; color: var(--zk-ink); }
.zk-designer__note { margin: 0; font-size: 13px; color: var(--zk-muted); }
.zk-cart-thumb { border-radius: 8px; background: var(--zk-soft); object-fit: contain; }

/* ---------- Quote ---------- */
.zk-quote { display: flex; flex-direction: column; gap: 32px; }
.zk-notice { padding: 14px 18px; border-radius: 12px; font-weight: 600; }
.zk-notice--ok { background: #e7f6ec; color: #0b5a2c; }
.zk-notice--err { background: #fdeceb; color: #8c1d18; }
.zk-estimator {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	align-items: center;
	background: #000;
	color: #fff;
	border-radius: 28px;
	padding: clamp(24px, 4vw, 56px);
}
.zk-estimator__pick { flex: 1 1 380px; min-width: 0; }
.zk-estimator__card {
	flex: 1 1 320px;
	min-width: 0;
	background: #fff;
	color: var(--zk-ink);
	border-radius: 20px;
	padding: 28px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.zk-estimator__label { margin: 0; font-weight: 700; font-size: 15px; }
.zk-estimator__pick .zk-estimator__label { color: var(--zk-aqua); margin-block-end: 14px; font-size: 18px; }
.zk-estimator__total { margin: 0; font-size: clamp(32px, 4vw, 44px); font-weight: 900; line-height: 1.1; }
.zk-estimator__line, .zk-estimator__tiers { margin: 0; font-size: 14px; color: var(--zk-muted); }
.zk-estimator__card .zk-btn { margin-block-start: 12px; }
.zk-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.zk-chip {
	min-height: 44px;
	padding: 10px 18px;
	border-radius: 999px;
	border: 2px solid var(--zk-aqua);
	background: transparent;
	color: #fff;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}
.zk-chip[aria-checked="true"] { background: var(--zk-aqua); color: #000; }
.zk-qty { display: flex; gap: 10px; align-items: center; margin-block-end: 12px; }
.zk-qty input {
	width: 100px; min-height: 48px; text-align: center;
	font: inherit; font-size: 20px; font-weight: 800;
	border: 1px solid #b9bdbd; border-radius: 12px;
}
.zk-qty__btn {
	width: 48px; height: 48px; border-radius: 12px;
	border: 1px solid #b9bdbd; background: #fff;
	font-size: 22px; cursor: pointer; color: var(--zk-ink);
}

.zk-quote-form {
	border: 1px solid var(--zk-line);
	border-radius: 24px;
	padding: clamp(20px, 4vw, 40px);
}
.zk-quote-form__title { margin: 0 0 16px; font-size: 26px; font-weight: 800; }
.zk-quote-form label { display: block; font-weight: 600; margin-block-end: 6px; }
.zk-quote-form input:not([type="file"]):not([type="checkbox"]), .zk-quote-form select, .zk-quote-form textarea {
	width: 100%; box-sizing: border-box;
	min-height: 48px; padding: 10px 14px;
	border: 1px solid #b9bdbd; border-radius: 12px;
	font: inherit; background: #fff;
}
.zk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 20px; }
.zk-hp { position: absolute !important; inset-inline-start: -9999px; }