/* ═══════════════════════════════════════════════════════════════
   Cart / Checkout flow — pixel-perfect implementation.

   Layout: 2-column grid (main + sidebar) with the sidebar visually
   on the right in RTL. Each sub-step lives in its own panel and is
   toggled via `hidden` from JS.
═══════════════════════════════════════════════════════════════ */

/* ── Hide parent theme's own cart UI ────────────────────────────────── */
.dt-the7-checkout-progress,
.dt-checkout-progress,
.dt-checkout-steps,
.the7-cart-steps,
.the7-checkout-steps,
.woocommerce-checkout-progress,
.woocommerce-cart-progress,
.checkout-progress,
.checkout-progress-bar,
.dt-cart-progress,
.dt-shop-steps,
.shop-steps,
.woocommerce-cart .return-to-shop,
.woocommerce-cart .woocommerce-notices-wrapper {
	display: none !important;
}

/* The parent shop page sometimes injects flex container around cart — neutralise. */
.woocommerce-cart .woocommerce-cart-wrap,
.woocommerce-cart .woocommerce-cart-wrap > .woocommerce {
	display: block !important;
	width: 100% !important;
	max-width: none !important;
	float: none !important;
	flex: none !important;
}

/* ── Page wrap ──────────────────────────────────────────────────────── */
.hs-co-wrap {
	font-family: var(--font-fa);
	color: var(--hs-ink);
	width: 100%;
	max-width: var(--hs-site-width);
	margin-left: auto;
	margin-right: auto;
}

/* Force the cart page's parent containers to 1224px AND zero out
   any horizontal padding/gutter they inherit from The7 / WooCommerce. */
body.woocommerce-cart .wf-wrap,
body.woocommerce-cart .entry-content,
body.woocommerce-cart .entry-content > .woocommerce,
body.woocommerce-cart .woocommerce-cart-wrap,
body.woocommerce-cart .woocommerce-cart-wrap > .woocommerce {
	max-width: var(--hs-site-width) !important;
	width: 100% !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.hs-co-layout {
	display: grid;
	grid-template-columns: 400px 1fr;
	gap: 24px;
	align-items: stretch;
	direction: rtl;
	width: 100%;
	margin: 0 auto;
	max-width: var(--hs-site-width);
}

.hs-co-main {
	min-width: 0;
	display: flex;
	flex-direction: column;
}

/* ── Sidebar ────────────────────────────────────────────────────────── */
.hs-co-sidebar {
	width: 100%;
	max-width: 400px;
	background: #FAFAFA;
	border-radius: 16px;
	padding: 30px 16px;
	box-sizing: border-box;
	align-self: stretch;
	min-height: 100vh;
}

.hs-co-sidebar__inner {
	position: sticky;
	top: 24px;
}

.hs-co-sidebar__heading {
	font-family: var(--font-fa);
	font-size: 13px;
	color: var(--hs-muted);
	font-weight: 500;
	margin: 0 4px 20px;
	padding: 0 0 12px;
	border-bottom: 1px solid #ECECEC;
	box-sizing: border-box;
}

.hs-co-progress {
	list-style: none !important;
	list-style-type: none !important;
	margin: 0;
	padding: 0;
	counter-reset: none;
}

.hs-co-progress > li,
.hs-co-progress__item {
	list-style: none !important;
	list-style-type: none !important;
}

/* Defeat parent-theme counter content injected via ::before */
.hs-co-progress > li::before,
.hs-co-progress > li::marker,
.hs-co-progress__item::before,
.hs-co-progress__item::marker {
	content: none !important;
	display: none !important;
	counter-increment: none !important;
}

.hs-co-progress__item {
	position: relative;
	padding-bottom: 28px;
}

.hs-co-progress__item:last-child {
	padding-bottom: 0;
}

.hs-co-progress__row {
	position: relative;
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr) 22px;
	gap: 14px;
	align-items: center;
	padding: 8px 4px;
}

.hs-co-progress__icon-box {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #F3F3F3;
	color: #B5B5B5;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
	flex: none;
}

.hs-co-progress__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
}

.hs-co-progress__icon--check {
	display: none;
}

.hs-co-progress__text {
	display: flex;
	flex-direction: column;
	gap: 4px;
	text-align: right;
	min-width: 0;
}

.hs-co-progress__title {
	font-family: var(--font-fa);
	font-size: 14px;
	font-weight: 700;
	color: var(--hs-ink);
	line-height: 1.4;
}

.hs-co-progress__subtitle {
	font-family: var(--font-fa);
	font-size: 11.5px;
	color: var(--hs-muted);
	line-height: 1.55;
	font-weight: 400;
}

.hs-co-progress__radio {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 1.5px solid #D9D9D9;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: border-color 0.2s, background-color 0.2s;
	flex: none;
}

/* Inner dot is intentionally hidden in all states — the radio is a
   clean filled circle (active), filled-with-check (done), or empty
   outline (pending). The element is kept for backward compat. */
.hs-co-progress__radio-dot {
	display: none;
}

.hs-co-progress__radio-check {
	display: none;
	width: 12px;
	height: 12px;
	color: #fff;
}

.hs-co-progress__line {
	position: absolute;
	right: calc(4px + 20px - 1px);
	bottom: 0;
	width: 2px;
	height: 28px;
	background: #E5E5E5;
	border-radius: 2px;
}

/* Active state — red icon box + red radio */
.hs-co-progress__item.is-active .hs-co-progress__icon-box {
	background: var(--hs-red);
	color: #fff;
	box-shadow: 0 6px 14px rgba(187, 32, 38, 0.18);
}

.hs-co-progress__item.is-active .hs-co-progress__radio {
	border-color: var(--hs-red);
	background: var(--hs-red);
}

.hs-co-progress__item.is-active .hs-co-progress__title {
	color: var(--hs-ink);
}

/* Done state — keep the original step icon, only switch colors. */
.hs-co-progress__item.is-done .hs-co-progress__icon-box {
	background: #00BA88;
	color: #fff;
}

.hs-co-progress__item.is-done .hs-co-progress__radio {
	border-color: #00BA88;
	background: #00BA88;
}

.hs-co-progress__item.is-done .hs-co-progress__line {
	background: #00BA88;
}

/* Pending state */
.hs-co-progress__item.is-pending .hs-co-progress__title,
.hs-co-progress__item.is-pending .hs-co-progress__subtitle {
	color: var(--hs-muted);
}

/* ── Step container ─────────────────────────────────────────────────── */
.hs-co-step {
	display: flex;
	flex-direction: column;
	flex: 1 0 auto;
	min-height: 100%;
	padding: 0 0 16px;
}

.hs-co-step[hidden] {
	display: none !important;
}

.hs-co-step__header {
	margin-bottom: 24px;
	padding: 0 0 16px;
	border-bottom: 1px solid #ECECEC;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

.hs-co-step__title {
	font-family: var(--font-fa);
	font-size: 22px;
	font-weight: 700;
	color: var(--hs-ink);
	margin: 0 0 6px;
	line-height: 1.4;
}

.hs-co-step__subtitle {
	font-family: var(--font-fa);
	font-size: 13px;
	color: var(--hs-muted);
	margin: 0;
	line-height: 1.6;
}

/* The button(s) sit directly after the step content (margin-top: 0) instead
   of being pinned to the bottom of the full-height column, so on large screens
   they're visible without scrolling on every step. */
.hs-co-step__footer {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	margin-top: 0;
	padding-top: 28px;
}

.hs-co-step__footer--single {
	grid-template-columns: 1fr;
}

/* ── Card surface ───────────────────────────────────────────────────── */
.hs-co-card {
	background: #fff;
	border-radius: 16px;
	border: 1px solid #F1EAEA;
	padding: 8px 4px;
	box-shadow: 0 1px 3px rgba(20, 16, 16, 0.03);
}

/* ── Cart item rows ─────────────────────────────────────────────────── */
.hs-cart-items {
	list-style: none;
	margin: 0;
	padding: 0;
}

.hs-cart-item {
	display: grid;
	grid-template-columns: 76px minmax(0, 1fr) auto auto 32px;
	align-items: center;
	gap: 18px;
	padding: 16px 14px;
	border-bottom: 1px dashed #E9E2E1;
	transition: background-color 0.2s;
}

.hs-cart-item:last-child {
	border-bottom: none;
}

.hs-cart-item.is-loading {
	opacity: 0.55;
	pointer-events: none;
}

.hs-cart-item__media,
.hs-cart-item__media-link {
	width: 76px;
	height: 76px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
	overflow: hidden;
	background: #FBF5F4;
}

.hs-cart-item__media-link {
	width: 100%;
	height: 100%;
}

.hs-cart-item__media img,
.hs-cart-item__img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	border-radius: 12px;
	display: block;
}

.hs-cart-item__info {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.hs-cart-item__title {
	font-family: var(--font-fa);
	font-size: 15px;
	font-weight: 600;
	color: var(--hs-red);
	margin: 0;
	line-height: 1.5;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.hs-cart-item__title a {
	color: inherit;
	text-decoration: none;
}

.hs-cart-item__title a:hover {
	color: var(--hs-red-dark);
}

.hs-cart-item__unit {
	font-family: var(--font-fa);
	font-size: 12px;
	color: var(--hs-muted);
	margin: 0;
	line-height: 1.4;
}

/* Quantity controls */
.hs-cart-item__qty {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #fff;
	border: 1px solid #ECECEC;
	border-radius: 10px;
	padding: 4px;
}

.hs-qty-btn {
	width: 28px;
	height: 28px;
	border-radius: 8px;
	border: none;
	background: #F6F6F6;
	color: var(--hs-ink);
	font-size: 16px;
	font-weight: 600;
	font-family: var(--font-fa);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background-color 0.15s, color 0.15s;
	line-height: 1;
}

.hs-qty-btn:hover:not(:disabled) {
	background: var(--hs-red);
	color: #fff;
}

.hs-qty-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.hs-qty-value {
	min-width: 28px;
	text-align: center;
	font-family: var(--font-fa);
	font-size: 14px;
	font-weight: 600;
	color: var(--hs-ink);
	padding: 0 6px;
}

/* Line total */
.hs-cart-item__total {
	font-family: var(--font-fa);
	font-size: 14px;
	font-weight: 600;
	color: var(--hs-ink);
	white-space: nowrap;
	text-align: left;
	padding: 0 8px;
}

/* Remove button */
.hs-cart-item__remove {
	width: 32px;
	height: 32px;
	border-radius: 8px;
	border: none;
	background: transparent;
	color: #C4C4C4;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.15s, color 0.15s;
}

.hs-cart-item__remove:hover {
	background: #FEE2E2;
	color: var(--hs-red);
}

/* ── Cart summary row ───────────────────────────────────────────────── */
.hs-cart-summary {
	padding: 18px 18px 12px;
	margin-top: 8px;
	border-top: 1px dashed #E9E2E1;
}

/* ── Coupon field ───────────────────────────────────────────────────── */

.hs-cart-coupon {
	margin-bottom: 16px;
	padding-bottom: 16px;
	border-bottom: 1px dashed #E9E2E1;
}

.hs-cart-coupon__label {
	display: block;
	margin-bottom: 8px;
	font-family: var(--font-fa);
	font-size: 14px;
	font-weight: 600;
	color: var(--hs-ink);
}

.hs-cart-coupon__row {
	display: flex;
	gap: 8px;
}

.hs-cart-coupon__input {
	flex: 1 1 auto;
	min-width: 0;
	height: 44px;
	padding: 0 14px;
	border: 1px solid #E9E2E1;
	border-radius: 12px;
	background: #fff;
	font-family: var(--font-fa);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--hs-ink);
	transition: border-color 0.18s;
}

.hs-cart-coupon__input:focus {
	outline: none;
	border-color: var(--hs-red);
}

.hs-cart-coupon__btn {
	flex: 0 0 auto;
	min-width: 92px;
	height: 44px;
	padding: 0 18px;
	border: 0;
	border-radius: 12px;
	background: var(--hs-red);
	color: #fff;
	font-family: var(--font-fa);
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	transition: background-color 0.18s, opacity 0.18s;
}

.hs-cart-coupon__btn:hover:not(:disabled) {
	background: var(--hs-red-dark);
}

.hs-cart-coupon__btn:disabled {
	opacity: 0.6;
	cursor: default;
}

.hs-cart-coupon__error {
	margin: 8px 0 0;
	font-family: var(--font-fa);
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.6;
	color: #b32d2e;
}

/* Applied state: the code is confirmed, so the field gives way to a receipt. */
.hs-cart-coupon--applied {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	margin-bottom: 16px;
	border: 1px solid #cfe8d8;
	border-radius: 12px;
	background: #f2faf5;
}

.hs-cart-coupon__tick {
	display: inline-flex;
	width: 22px;
	height: 22px;
	flex: 0 0 22px;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #1f9d55;
	color: #fff;
}

.hs-cart-coupon__applied-text {
	flex: 1 1 auto;
	font-family: var(--font-fa);
	font-size: 13.5px;
	font-weight: 600;
	color: #14663a;
}

.hs-cart-coupon__applied-text strong {
	font-weight: 800;
	letter-spacing: 0.05em;
}

.hs-cart-coupon__remove {
	flex: 0 0 auto;
	padding: 4px 8px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	font-family: var(--font-fa);
	font-size: 12.5px;
	font-weight: 700;
	color: #b32d2e;
	cursor: pointer;
	transition: background-color 0.18s;
}

.hs-cart-coupon__remove:hover:not(:disabled) {
	background: rgba(179, 45, 46, 0.08);
}

/* ── Totals ─────────────────────────────────────────────────────────── */

.hs-cart-totals__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 5px 0;
}

.hs-cart-totals__label {
	font-family: var(--font-fa);
	font-size: 14px;
	color: var(--hs-muted);
	font-weight: 500;
}

.hs-cart-totals__value {
	font-family: var(--font-fa);
	font-size: 14px;
	color: var(--hs-ink);
	font-weight: 600;
}

.hs-cart-totals__row--discount .hs-cart-totals__label,
.hs-cart-totals__row--discount .hs-cart-totals__value {
	color: #1f9d55;
	font-weight: 700;
}

.hs-cart-totals__row--final {
	margin-top: 6px;
	padding-top: 12px;
	border-top: 1px solid #F0EBEA;
}

.hs-cart-totals__row--final .hs-cart-totals__label {
	font-size: 14px;
	font-weight: 700;
	color: var(--hs-ink);
}

.hs-cart-totals__row--final .hs-cart-totals__value {
	font-size: 17px;
	font-weight: 800;
	color: var(--hs-ink);
}

@media (max-width: 480px) {
	.hs-cart-coupon__btn {
		min-width: 78px;
		padding: 0 12px;
	}
}

/* ── Buttons ────────────────────────────────────────────────────────── */
.hs-co-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 24px;
	border-radius: 12px;
	font-family: var(--font-fa);
	font-size: 15px;
	font-weight: 600;
	border: none;
	cursor: pointer;
	transition: background-color 0.2s, color 0.2s, opacity 0.2s, transform 0.15s;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	box-sizing: border-box;
}

.hs-co-btn--primary {
	background: var(--hs-red);
	color: #fff;
}

.hs-co-btn--primary:hover:not(:disabled) {
	background: var(--hs-red-dark);
	color: #fff;
}

.hs-co-btn--ghost {
	background: #F5F5F5;
	color: var(--hs-ink);
}

.hs-co-btn--ghost:hover:not(:disabled) {
	background: #ECECEC;
	color: var(--hs-ink);
}

.hs-co-btn--success {
	background: #00BA88;
	color: #fff;
}

.hs-co-btn--success:hover:not(:disabled) {
	background: #009A6F;
	color: #fff;
}

.hs-co-btn--block {
	width: 100%;
}

.hs-co-btn:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

.hs-co-spinner {
	display: inline-block;
	width: 18px;
	height: 18px;
	border: 2px solid rgba(255, 255, 255, 0.4);
	border-top-color: #fff;
	border-radius: 50%;
	animation: hs-spin 0.7s linear infinite;
}

@keyframes hs-spin {
	to { transform: rotate(360deg); }
}

.hs-co-link {
	background: none;
	border: none;
	padding: 0;
	color: var(--hs-red);
	font-family: var(--font-fa);
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	text-decoration: underline;
}

.hs-co-link:hover {
	color: var(--hs-red-dark);
}

/* ── Form controls ──────────────────────────────────────────────────── */
.hs-co-form {
	display: flex;
	flex-direction: column;
	/* Don't grow to fill the column — otherwise the form pushes its submit /
	   footer button to the bottom of the page. Keep it at content height so the
	   button sits right after the fields (visible without scrolling). */
	flex: 0 0 auto;
}

.hs-co-form__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px 18px;
}

.hs-co-form__field {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

.hs-co-form__field--full {
	grid-column: 1 / -1;
}

.hs-co-form__label {
	font-family: var(--font-fa);
	font-size: 13px;
	font-weight: 500;
	color: var(--hs-ink);
}

.hs-required {
	color: var(--hs-red);
	margin-right: 2px;
}

.hs-co-form__input,
.hs-co-form__select,
.hs-co-form__textarea {
	padding: 13px 14px;
	border: 1.5px solid #ECECEC;
	border-radius: 10px;
	font-family: var(--font-fa);
	font-size: 14px;
	color: var(--hs-ink);
	background: #fff;
	width: 100%;
	box-sizing: border-box;
	outline: none;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.hs-co-form__textarea {
	resize: vertical;
	min-height: 96px;
	line-height: 1.6;
}

/* ── International phone field ──────────────────────────────────
   Country picker + national number, laid out left-to-right the way
   phone numbers are written even on this RTL form. The <select> is
   invisible and stretched over its box so the closed control shows
   only "+93", while opening it lists every country by full name.

   Both controls are pinned to --hs-phone-h instead of being stretched
   by the flex container: Safari/iOS refuses to stretch an <input> to
   the flex line, so relying on `align-items: stretch` there left the
   number field sized by its own font metrics and out of level with the
   picker. An explicit height on both keeps them exactly level.

   The number field is addressed via .hs-co-phone so it outranks the
   .hs-co-form__input copy in order-complete.css, which is imported
   after this file and would otherwise win on source order alone. */

.hs-co-phone {
	--hs-phone-h: 48px;
	display: flex;
	direction: ltr;
	align-items: center;
	gap: 8px;
}

/* Both controls are centred on the flex line and carry no margin of their
   own. The7 and WooCommerce both ship blanket form-control margins, and
   under `align-items: center` a stray margin-top pushes only that control
   down — the two boxes stay the same height but stop lining up. */
.hs-co-phone > * {
	margin: 0;
	align-self: center;
}

.hs-co-phone__country {
	position: relative;
	display: flex;
	flex: 0 0 86px;
	align-items: center;
	justify-content: space-between;
	gap: 4px;
	height: var(--hs-phone-h);
	padding: 0 9px;
	border: 1.5px solid #ececec;
	border-radius: 10px;
	background: #fff;
	cursor: pointer;
	/* The theme has no global border-box reset — .hs-header aside, each
	   component opts in. Without this the 1.5px border sits outside the
	   48px height and the picker renders 51px, three pixels taller than
	   the number field, which takes border-box from .hs-co-form__input. */
	box-sizing: border-box;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.hs-co-phone__country:hover {
	border-color: #d9d9d9;
}

.hs-co-phone__country:focus-within {
	border-color: var(--hs-red);
	box-shadow: 0 0 0 3px rgba(187, 32, 38, 0.08);
}

.hs-co-phone__country .hs-co-form__select {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	min-height: 0;
	padding: 0;
	border: 0;
	background: transparent;
	opacity: 0;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.hs-co-phone__dial {
	font-family: var(--font-fa);
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	color: var(--hs-red);
	pointer-events: none;
	white-space: nowrap;
}

.hs-co-phone__country .hs-co-form__chevron {
	position: static;
	flex: 0 0 auto;
	width: 12px;
	height: 12px;
	color: #a8a8a8;
	pointer-events: none;
	transform: none;
}

.hs-co-phone .hs-co-phone__number {
	flex: 1 1 auto;
	min-width: 0;
	height: var(--hs-phone-h);
	box-sizing: border-box;
	/* The shared height replaces the vertical padding inherited from
	   .hs-co-form__input, which would otherwise squeeze the text into a
	   19px content box and knock it off centre against the picker.
	   Written as longhands rather than `padding-block`, which the site's
	   CSS minifier is free to drop if it does not parse logical props. */
	padding-top: 0;
	padding-bottom: 0;
	line-height: normal;
}

@media (max-width: 420px) {
	.hs-co-phone {
		gap: 6px;
	}

	.hs-co-phone__country {
		flex-basis: 78px;
		padding: 0 7px;
	}
}

.hs-co-form__input::placeholder,
.hs-co-form__textarea::placeholder {
	color: #C4C4C4;
}

.hs-co-form__input:focus,
.hs-co-form__select:focus,
.hs-co-form__textarea:focus {
	border-color: var(--hs-red);
	box-shadow: 0 0 0 3px rgba(187, 32, 38, 0.08);
}

.hs-co-form__input.is-error,
.hs-co-form__select.is-error,
.hs-co-form__textarea.is-error {
	border-color: #ef4444;
}

.hs-co-form__hint {
	font-family: var(--font-fa);
	font-size: 12px;
	color: var(--hs-muted);
	margin: 0;
	line-height: 1.6;
}

.hs-co-form__error {
	font-family: var(--font-fa);
	font-size: 12px;
	color: #ef4444;
	margin: 0;
	min-height: 14px;
	line-height: 1.4;
}

.hs-co-form__select-wrap {
	position: relative;
}

.hs-co-form__select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	padding-left: 36px;
	background: #fff;
	cursor: pointer;
}

.hs-co-form__chevron {
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--hs-muted);
	pointer-events: none;
}

/* Phone-step input override — wider, taller text, smaller radius. */
#hs-phone-input {
	max-width: 389px;
	width: 100%;
	border-radius: 8px;
	font-size: 20px;
}

#hs-phone-input::placeholder {
	font-size: 20px;
}

/* Honeypot */
.hs-hp-field {
	position: absolute;
	left: -9999px;
	top: -9999px;
	visibility: hidden;
	pointer-events: none;
}

/* ── OTP card ───────────────────────────────────────────────────────── */
.hs-otp-card {
	background: #fff;
	border-radius: 16px;
	padding: 32px 24px 28px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.hs-otp-card__icon {
	margin: 0 0 16px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.hs-otp-card__title {
	font-family: var(--font-fa);
	font-size: 18px;
	font-weight: 700;
	color: var(--hs-ink);
	margin: 0 0 12px;
}

.hs-otp-card__desc {
	font-family: var(--font-fa);
	font-size: 13px;
	color: var(--hs-muted);
	margin: 0 0 22px;
	line-height: 1.8;
	max-width: 360px;
}

.hs-otp-card__desc strong {
	color: var(--hs-ink);
	font-weight: 600;
}

.hs-otp-input-wrap {
	width: 100%;
	max-width: 238px;
	margin: 0 auto 16px;
}

/* Big single-field OTP box (per Figma): 238×64 frame, 36px centered digits. */
.hs-otp-input {
	width: 100%;
	height: 64px;
	padding: 10px;
	font-size: 44px;
	line-height: 1;
	font-weight: 400;
	text-align: center;
	letter-spacing: 0.16em;
	border: 1px solid #E2E8F0;
	border-radius: 10px;
	font-family: var(--font-fa);
	color: #292C2D;
	background: #fff;
	box-sizing: border-box;
	filter: drop-shadow(0 2px 4.1px rgba(0, 102, 255, 0.3));
	transition: border-color 0.2s, filter 0.2s, background-color 0.2s;
	outline: none;
}

.hs-otp-input:focus {
	border-color: #0066FF;
	filter: drop-shadow(0 2px 8px rgba(0, 102, 255, 0.45));
}

/* "تایید کد" button — compact, centered, with an 8px radius. */
#hs-otp-verify {
	width: 100%;
	max-width: 150px;
	margin: 0 auto;
	justify-self: center;
	border-radius: 8px;
}

.hs-otp-card__validity {
	font-family: var(--font-fa);
	font-size: 12px;
	color: var(--hs-muted);
	margin: 0 0 6px;
}

.hs-otp-card__resend {
	font-family: var(--font-fa);
	font-size: 12px;
	color: var(--hs-muted);
	margin-top: 4px;
}

.hs-otp-card__timer {
	font-family: var(--font-fa);
	font-size: 12px;
	color: var(--hs-muted);
}

.hs-otp-card__timer #hs-otp-countdown {
	font-weight: 700;
	color: var(--hs-ink);
}

.hs-otp-feedback {
	font-family: var(--font-fa);
	font-size: 13px;
	margin-top: 14px;
	padding: 10px 16px;
	border-radius: 8px;
	text-align: center;
	line-height: 1.5;
	max-width: 320px;
}

.hs-otp-feedback.is-error {
	color: #b91c1c;
	background: #fef2f2;
	border: 1px solid #fecaca;
}

.hs-otp-feedback.is-success {
	color: #059669;
	background: #ecfdf5;
	border: 1px solid #a7f3d0;
}

/* ── Address-step map ───────────────────────────────────────────────── */
.hs-co-map {
	position: relative;
	width: 100%;
	height: 240px;
	border-radius: 12px;
	overflow: hidden;
	border: 1.5px solid #ECECEC;
	background: #F4F4F4;
}

.hs-co-map__canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.hs-co-map__locate {
	position: absolute;
	bottom: 12px;
	left: 12px;
	width: 38px;
	height: 38px;
	border-radius: 10px;
	border: none;
	background: #fff;
	color: var(--hs-red);
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	z-index: 500;
	transition: background-color 0.15s, color 0.15s, transform 0.15s;
}

.hs-co-map__locate:hover {
	background: var(--hs-red);
	color: #fff;
	transform: scale(1.04);
}

.hs-co-map .leaflet-control-attribution {
	font-size: 9px;
}

/* Marker shadow style — keep Leaflet's defaults visible against our bg */
.hs-co-map .leaflet-marker-icon {
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25));
}

@media (max-width: 767px) {
	.hs-co-map {
		height: 200px;
	}
}

/* ── Toast ──────────────────────────────────────────────────────────
   Confirms a verified identity without holding up the flow, which moves
   straight on to the information step. Pinned to the viewport rather than
   the step it was raised from, so it stays put while the step behind it
   changes and the page scrolls back to the top. */

.hs-co-toast {
	position: fixed;
	z-index: 100001; /* Above .hs-modal, so it is never buried. */
	inset-inline: 16px;
	bottom: 20px;
	margin-inline: auto;
	max-width: 420px;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 16px;
	border: 1.5px solid #d6f0dd;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
	cursor: pointer;
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 0.28s ease, transform 0.28s ease;
}

.hs-co-toast.is-open {
	opacity: 1;
	transform: translateY(0);
}

.hs-co-toast__icon {
	flex: none;
	display: flex;
	margin-top: 1px;
}

.hs-co-toast__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.hs-co-toast__title {
	font-family: var(--font-fa);
	font-size: 14px;
	font-weight: 700;
	color: var(--hs-ink);
}

.hs-co-toast__desc {
	font-family: var(--font-fa);
	font-size: 12px;
	color: var(--hs-muted);
	line-height: 1.75;
}

@media (min-width: 768px) {
	.hs-co-toast {
		inset-inline: auto 24px;
		bottom: 24px;
		margin-inline: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hs-co-toast {
		transition: opacity 0.28s ease;
		transform: none;
	}
}

/* ── Order success modal ────────────────────────────────────────────── */
.hs-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.hs-modal[hidden] {
	display: none !important;
}

.hs-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(15, 18, 22, 0.45);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
}

.hs-modal__card {
	position: relative;
	width: 100%;
	max-width: 480px;
	background: #fff;
	border-radius: 16px;
	padding: 36px 28px 28px;
	text-align: center;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
	animation: hs-modal-pop 0.25s cubic-bezier(0.2, 1, 0.3, 1);
}

.hs-modal__icon {
	margin: 0 0 18px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.hs-modal__title {
	font-family: var(--font-fa);
	font-size: 18px;
	font-weight: 700;
	color: var(--hs-ink);
	margin: 0 0 14px;
}

.hs-modal__desc {
	font-family: var(--font-fa);
	font-size: 13px;
	color: var(--hs-muted);
	margin: 0 0 26px;
	line-height: 1.9;
}

.hs-modal__countdown {
	font-weight: 600;
	margin-right: 6px;
	display: inline-flex;
}

@keyframes hs-modal-pop {
	from { opacity: 0; transform: translateY(8px) scale(0.96); }
	to   { opacity: 1; transform: translateY(0)   scale(1); }
}

/* ── Generic dialog (alerts) ────────────────────────────────────────── */
.hs-dialog {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.hs-dialog[hidden] {
	display: none !important;
}

.hs-dialog__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(15, 18, 22, 0.55);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
	cursor: pointer;
}

.hs-dialog__card {
	position: relative;
	width: 100%;
	max-width: 420px;
	background: #fff;
	border-radius: 16px;
	padding: 32px 24px 24px;
	text-align: center;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.22);
	animation: hs-modal-pop 0.22s cubic-bezier(0.2, 1, 0.3, 1);
}

.hs-dialog__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	margin: 0 auto 16px;
	border-radius: 50%;
	background: #fef2f2;
}

.hs-dialog__icon.is-warning { background: #fff7ed; }
.hs-dialog__icon.is-info    { background: #eff6ff; }
.hs-dialog__icon.is-success { background: #ecfdf5; }

.hs-dialog__title {
	font-family: var(--font-fa);
	font-size: 18px;
	font-weight: 700;
	color: var(--hs-ink);
	margin: 0 0 10px;
	line-height: 1.4;
}

.hs-dialog__message {
	font-family: var(--font-fa);
	font-size: 13.5px;
	color: var(--hs-muted);
	margin: 0 0 22px;
	line-height: 1.8;
}

/* ── Empty cart ─────────────────────────────────────────────────────── */
.hs-co-empty {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 60px 20px;
	font-family: var(--font-fa);
}

.hs-co-empty__card {
	max-width: 460px;
	width: 100%;
	background: #fff;
	border-radius: 16px;
	border: 1px solid #F1EAEA;
	padding: 40px 28px;
	text-align: center;
}

.hs-co-empty__icon {
	color: var(--hs-red);
	margin: 0 auto 16px;
}

.hs-co-empty__title {
	font-family: var(--font-fa);
	font-size: 20px;
	font-weight: 700;
	margin: 0 0 10px;
	color: var(--hs-ink);
}

.hs-co-empty__msg {
	font-size: 14px;
	color: var(--hs-muted);
	margin: 0 0 24px;
	line-height: 1.7;
}

/* ── Responsive: tablet ─────────────────────────────────────────────── */
@media (max-width: 1023px) {
	.hs-co-layout {
		grid-template-columns: 320px 1fr;
		gap: 18px;
	}

	.hs-co-sidebar {
		max-width: 320px;
	}

	.hs-co-form__grid {
		gap: 14px 14px;
	}
}

/* ── Responsive: mobile ─────────────────────────────────────────────── */
@media (max-width: 767px) {
	.hs-co-layout {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.hs-co-sidebar {
		max-width: 100%;
		min-height: 0;
		padding: 20px 14px;
		order: -1;
	}

	.hs-co-sidebar__inner {
		position: static;
	}

	.hs-co-sidebar__heading {
		text-align: center;
		margin: 0 0 16px;
	}

	.hs-co-progress {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: stretch;
		gap: 8px;
	}

	.hs-co-progress__item {
		flex: 1;
		padding-bottom: 0;
		min-width: 0;
	}

	.hs-co-progress__row {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 6px;
		padding: 10px 6px;
	}

	.hs-co-progress__text {
		align-items: center;
		text-align: center;
	}

	.hs-co-progress__icon-box {
		width: 34px;
		height: 34px;
		border-radius: 50%;
	}

	.hs-co-progress__radio {
		display: none;
	}

	.hs-co-progress__title {
		font-size: 12px;
	}

	.hs-co-progress__subtitle {
		display: none;
	}

	.hs-co-progress__line {
		display: none;
	}

	.hs-co-step__title {
		font-size: 19px;
	}

	.hs-co-form__grid {
		grid-template-columns: 1fr;
	}

	.hs-co-step__footer {
		grid-template-columns: 1fr;
	}

	/* Cart item layout on mobile */
	.hs-cart-item {
		grid-template-columns: 64px 1fr 32px;
		grid-template-areas:
			"media info remove"
			"qty   qty   total";
		gap: 12px 14px;
		padding: 14px 10px;
	}

	.hs-cart-item__media,
	.hs-cart-item__media-link { grid-area: media; width: 64px; height: 64px; }

	.hs-cart-item__info   { grid-area: info; }
	.hs-cart-item__remove { grid-area: remove; }
	.hs-cart-item__qty    { grid-area: qty; justify-self: start; }
	.hs-cart-item__total  { grid-area: total; justify-self: end; }
}

@media (max-width: 380px) {
	.hs-otp-input {
		font-size: 38px;
		letter-spacing: 0.16em;
	}
}

/* ══════════════════════════════════════════════════════════════
   PAYMENT METHOD CHOOSER (cart flow → address step)
══════════════════════════════════════════════════════════════ */
.hs-co-pay {
	/* One size for every method's mark, whether it is an emoji glyph or a
	   gateway logo, so the rows line up and none of them looms over another. */
	--hs-pay-mark: 22px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.hs-co-pay__option {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	border: 1.5px solid #ECECEC;
	border-radius: 10px;
	background: #fff;
	cursor: pointer;
	transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.hs-co-pay__option:hover {
	border-color: #D9D9D9;
}

.hs-co-pay__option.is-selected {
	border-color: var(--hs-red);
	background: rgba(187, 32, 38, 0.03);
	box-shadow: 0 0 0 3px rgba(187, 32, 38, 0.08);
}

.hs-co-pay__option:focus-within {
	border-color: var(--hs-red);
}

/* Visually-hidden native radio (kept focusable for accessibility). */
.hs-co-pay__radio {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.hs-co-pay__icon {
	flex: none;
	font-size: var(--hs-pay-mark);
	line-height: 1;
}

/* Gateway mark (HesabPay). Fitted into the same box as the emoji marks rather
   than sized by its own height: the logo is wider than it is tall, so matching
   heights would still leave it looking far larger than the glyph beside it.
   object-fit keeps its aspect ratio inside that box, whatever the plugin ships. */
.hs-co-pay__logo {
	flex: none;
	width: var(--hs-pay-mark);
	height: var(--hs-pay-mark);
	object-fit: contain;
}

.hs-co-pay__body {
	display: flex;
	flex-direction: column;
	gap: 3px;
	flex: 1;
	min-width: 0;
}

.hs-co-pay__title {
	font-family: var(--font-fa);
	font-size: 14px;
	font-weight: 600;
	color: var(--hs-ink);
}

.hs-co-pay__desc {
	font-family: var(--font-fa);
	font-size: 12px;
	color: var(--hs-muted);
	line-height: 1.6;
}

.hs-co-pay__check {
	flex: none;
	position: relative;
	width: 20px;
	height: 20px;
	border: 2px solid #D5D5D5;
	border-radius: 50%;
	transition: border-color 0.2s;
}

.hs-co-pay__option.is-selected .hs-co-pay__check {
	border-color: var(--hs-red);
}

.hs-co-pay__option.is-selected .hs-co-pay__check::after {
	content: "";
	position: absolute;
	inset: 3px;
	border-radius: 50%;
	background: var(--hs-red);
}

/* Order number in the success modal — the customer's receipt when the
   WhatsApp message is late or never comes. */
.hs-modal__order-number {
	margin: 0 0 16px;
	font-family: var(--font-fa);
	font-size: 15px;
	font-weight: 800;
	letter-spacing: 0.02em;
	color: var(--hs-ink);
}