/* OrderFlow by Mehedi */
.nw-opc {
	--nw-opc-accent: #0aa54c;
	--nw-opc-accent-soft: rgba(10, 165, 76, 0.08);
	--nw-opc-border: #e3e6ea;
	--nw-opc-text: #1f2430;
	--nw-opc-muted: #6b7280;
	max-width: 600px;
	margin: 0 auto;
	background: #fff;
	border: 1px solid var(--nw-opc-border);
	border-radius: 14px;
	padding: 28px 26px;
	box-shadow: 0 10px 36px rgba(15, 23, 42, 0.08);
	font-size: 16px;
	line-height: 1.55;
	color: var(--nw-opc-text);
}
.nw-opc *, .nw-opc *::before, .nw-opc *::after { box-sizing: border-box; }

.nw-opc__title {
	margin: 0 0 6px;
	font-size: 1.4em;
	font-weight: 700;
	text-align: center;
	color: var(--nw-opc-text);
}
.nw-opc__title::after {
	content: "";
	display: block;
	width: 56px;
	height: 3px;
	border-radius: 3px;
	background: var(--nw-opc-accent);
	margin: 10px auto 18px;
}

.nw-opc__section { margin: 0 0 18px; }

.nw-opc__label {
	display: block;
	font-weight: 600;
	margin: 0 0 8px;
	font-size: 0.95em;
	color: var(--nw-opc-text);
	letter-spacing: 0;
	text-transform: none;
}
.nw-opc__label em { color: #e23636; font-style: normal; }

.nw-opc input[type="text"],
.nw-opc input[type="tel"],
.nw-opc input[type="number"],
.nw-opc textarea {
	display: block;
	width: 100%;
	border: 1.5px solid var(--nw-opc-border);
	border-radius: 10px;
	padding: 12px 14px;
	font-size: 1em;
	line-height: 1.4;
	color: var(--nw-opc-text);
	background: #f8f9fb;
	box-shadow: none;
	margin: 0;
	min-height: 0;
	height: auto;
	transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.nw-opc textarea { resize: vertical; }
.nw-opc input:focus,
.nw-opc textarea:focus {
	border-color: var(--nw-opc-accent);
	background: #fff;
	outline: none;
	box-shadow: 0 0 0 3px var(--nw-opc-accent-soft);
}
.nw-opc ::placeholder { color: #9aa1ac; opacity: 1; }
.nw-opc input.nw-opc__field--bad {
	border-color: #e23636;
	background: #fff5f5;
	box-shadow: 0 0 0 3px rgba(226, 54, 54, 0.12);
}

/* ---- Product cards ---- */
.nw-opc__products { display: grid; gap: 14px; }
.nw-opc__product {
	border: 2px solid var(--nw-opc-accent);
	border-radius: 14px;
	background: #fff;
	overflow: hidden;
	transition: border-color 0.15s, opacity 0.15s;
}
.nw-opc__product--off { border-color: var(--nw-opc-border); }
.nw-opc__product--off .nw-opc__product-body,
.nw-opc__product--off .nw-opc__product-img,
.nw-opc__product--off .nw-opc__product-meta,
.nw-opc__product--off .nw-opc__qty { opacity: 0.45; }
.nw-opc__product--na .nw-opc__product-price { color: #d63638; }

.nw-opc__product-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
}

/* custom checkbox */
.nw-opc__check { display: inline-flex; margin: 0; cursor: pointer; flex: 0 0 auto; }
.nw-opc__check input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
	margin: 0;
}
.nw-opc__check-box {
	width: 24px;
	height: 24px;
	border: 2px solid var(--nw-opc-border);
	border-radius: 6px;
	background: #fff;
	position: relative;
	transition: background 0.15s, border-color 0.15s;
}
.nw-opc__check input:checked + .nw-opc__check-box {
	background: var(--nw-opc-accent);
	border-color: var(--nw-opc-accent);
}
.nw-opc__check input:checked + .nw-opc__check-box::after {
	content: "";
	position: absolute;
	left: 7px;
	top: 2px;
	width: 6px;
	height: 12px;
	border: solid #fff;
	border-width: 0 2.5px 2.5px 0;
	transform: rotate(45deg);
}

.nw-opc__product-img {
	width: 62px;
	height: 62px;
	flex: 0 0 62px;
	object-fit: cover;
	border-radius: 10px;
	border: 2px solid var(--nw-opc-accent);
	background: #fff;
	display: block;
	margin: 0;
	transition: opacity 0.15s;
}
.nw-opc__product-meta {
	display: flex;
	flex-direction: column;
	gap: 2px;
	/* Floor keeps the name from collapsing to one word per line. When the
	   name is long the qty stepper wraps to the next line, and meta grows
	   to fill the row so the title stays 1-2 lines. Short name → qty fits
	   on the same line. */
	flex: 1 1 130px;
	min-width: 120px;
}
.nw-opc__product-name { font-weight: 700; font-size: 1.02em; overflow-wrap: break-word; word-break: break-word; }
.nw-opc__product-price { color: var(--nw-opc-accent); font-weight: 800; font-size: 1.1em; }

/* attribute pills */
.nw-opc__product-body {
	border-top: 1px solid var(--nw-opc-border);
	padding: 12px 14px;
	transition: opacity 0.15s;
}
.nw-opc__attr { margin: 0 0 10px; }
.nw-opc__attr:last-child { margin-bottom: 0; }
.nw-opc__attr-label {
	display: block;
	font-size: 0.92em;
	font-weight: 600;
	color: var(--nw-opc-muted);
	margin: 0 0 7px;
}
.nw-opc__pills { display: flex; flex-wrap: wrap; gap: 8px; }
.nw-opc__pill { position: relative; margin: 0; cursor: pointer; }
.nw-opc__pill input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
	margin: 0;
}
.nw-opc__pill span {
	display: inline-block;
	border: 1.5px solid #c9ced6;
	border-radius: 999px;
	padding: 7px 16px;
	font-size: 0.95em;
	font-weight: 600;
	background: #fff;
	color: var(--nw-opc-text);
	transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.nw-opc__pill:hover span { border-color: var(--nw-opc-accent); }
.nw-opc__pill input:checked + span {
	background: var(--nw-opc-accent);
	border-color: var(--nw-opc-accent);
	color: #fff;
}

/* ---- Quantity (inside card head) ---- */
.nw-opc__qty {
	display: inline-flex;
	align-items: stretch;
	border: 1.5px solid var(--nw-opc-border);
	border-radius: 9px;
	overflow: hidden;
	background: #fff;
	flex: 0 0 auto;
	margin-left: auto; /* hug the right, whether same line or wrapped below */
	transition: opacity 0.15s;
}
.nw-opc__qty input[type="number"] {
	width: 42px;
	text-align: center;
	font-weight: 700;
	border: 0;
	border-radius: 0;
	background: #fff;
	padding: 6px 2px;
	-moz-appearance: textfield;
	appearance: textfield;
}
.nw-opc__qty input:focus { box-shadow: none; }
.nw-opc__qty input::-webkit-outer-spin-button,
.nw-opc__qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.nw-opc__qty-btn {
	width: 34px;
	min-height: 36px;
	border: 0;
	background: #f2f4f6;
	font-size: 1.1em;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	margin: 0;
	padding: 0;
	color: var(--nw-opc-text);
	border-radius: 0;
	box-shadow: none;
	transition: background 0.15s;
}
.nw-opc__qty-btn:hover { background: #e6e9ed; color: var(--nw-opc-text); }

/* ---- Delivery ---- */
.nw-opc__delivery { display: grid; gap: 10px; }
.nw-opc__delivery--loading .nw-opc__delivery { opacity: 0.55; pointer-events: none; }
.nw-opc__delivery-opt {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	border: 2px solid var(--nw-opc-border);
	border-radius: 10px;
	padding: 12px 14px;
	cursor: pointer;
	margin: 0;
	background: #fff;
	font-weight: 400;
	transition: border-color 0.15s, background 0.15s;
}
.nw-opc__delivery-opt input {
	width: 18px;
	height: 18px;
	margin: 0;
	flex: 0 0 auto;
	accent-color: var(--nw-opc-accent);
}
.nw-opc__delivery-opt:hover { border-color: #c7ccd4; }
.nw-opc__delivery-opt:has(input:checked) {
	border-color: var(--nw-opc-accent);
	background: var(--nw-opc-accent-soft);
}
.nw-opc__delivery-opt span {
	flex: 1;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
}
.nw-opc__delivery-opt strong { color: var(--nw-opc-accent); }

/* ---- Summary ---- */
.nw-opc__summary {
	border: 1px solid var(--nw-opc-border);
	border-radius: 12px;
	padding: 14px 16px;
	margin: 0 0 16px;
	background: #f8f9fb;
}
.nw-opc__summary-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 5px 0;
	color: var(--nw-opc-muted);
}
.nw-opc__summary-row span:last-child { font-weight: 600; color: var(--nw-opc-text); }
.nw-opc__summary-total {
	border-top: 1px dashed #cdd2d9;
	margin-top: 8px;
	padding-top: 12px;
	font-weight: 700;
	font-size: 1.12em;
	color: var(--nw-opc-text);
}
.nw-opc__summary-total span:last-child { color: var(--nw-opc-accent); font-weight: 800; font-size: 1.1em; }

.nw-opc__cod {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	text-align: center;
	font-weight: 600;
	margin: 0 0 16px;
	padding: 10px 12px;
	border-radius: 10px;
	background: #fff8e6;
	border: 1px dashed #e8c96a;
	color: #8a6d1a;
	font-size: 0.95em;
}
.nw-opc__cod::before { content: "🚚"; }

/* Honeypot */
.nw-opc__hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	opacity: 0;
}

/* ---- Submit ---- */
.nw-opc__submit {
	display: block;
	width: 100%;
	background: linear-gradient(180deg, var(--nw-opc-accent), color-mix(in srgb, var(--nw-opc-accent) 85%, #000));
	background-color: var(--nw-opc-accent);
	color: #fff;
	border: 0;
	border-radius: 12px;
	padding: 16px 20px;
	font-size: 1.15em;
	font-weight: 700;
	letter-spacing: 0.2px;
	text-transform: none;
	cursor: pointer;
	margin: 0;
	min-height: 54px;
	box-shadow: 0 6px 18px rgba(10, 165, 76, 0.35);
	transition: filter 0.15s, transform 0.1s, box-shadow 0.15s;
}
.nw-opc__submit:hover {
	filter: brightness(1.07);
	color: #fff;
	background-color: var(--nw-opc-accent);
	box-shadow: 0 8px 22px rgba(10, 165, 76, 0.45);
}
.nw-opc__submit:active { transform: scale(0.99); }
.nw-opc__submit[disabled] { opacity: 0.6; cursor: wait; }

.nw-opc__msg { margin-top: 12px; text-align: center; }
.nw-opc__msg--error { color: #e23636; font-weight: 600; }

/* ---- Success ---- */
.nw-opc__success { text-align: center; padding: 36px 12px; }
.nw-opc__success-icon {
	width: 68px;
	height: 68px;
	line-height: 68px;
	margin: 0 auto 18px;
	border-radius: 50%;
	background: var(--nw-opc-accent);
	color: #fff;
	font-size: 34px;
	box-shadow: 0 6px 18px rgba(10, 165, 76, 0.35);
}
.nw-opc__success-text { font-size: 1.12em; font-weight: 600; margin: 0; }

/* ---- "Order now" scroll button ---- */
.nw-opc-jump-wrap { display: block; width: 100%; }
.nw-opc-jump {
	--nw-opc-accent: #0aa54c;
	display: inline-block;
	background: var(--nw-opc-accent);
	color: #fff !important;
	border-radius: 12px;
	font-weight: 700;
	text-align: center;
	text-decoration: none !important;
	letter-spacing: 0.2px;
	cursor: pointer;
	box-shadow: 0 6px 18px rgba(15, 23, 42, 0.25);
	transition: filter 0.15s, transform 0.1s, box-shadow 0.15s;
}
.nw-opc-jump:hover { filter: brightness(1.08); }
.nw-opc-jump:active { transform: scale(0.98); }
.nw-opc-jump--small { padding: 10px 22px; font-size: 0.95em; }
.nw-opc-jump--medium { padding: 13px 30px; font-size: 1.05em; }
.nw-opc-jump--large { padding: 16px 40px; font-size: 1.2em; }
.nw-opc-jump--full { display: block; width: 100%; }

/* Anchor lands with breathing room under fixed headers */
#nw-opc { scroll-margin-top: 90px; }

.nw-opc-warning {
	border: 1px dashed #e23636;
	color: #e23636;
	padding: 14px;
	border-radius: 10px;
	background: #fff5f5;
}

@media (max-width: 520px) {
	.nw-opc { padding: 20px 14px; border-radius: 12px; }
	.nw-opc__product-img { width: 56px; height: 56px; flex-basis: 56px; }
	/* Give the title more room on phones; the qty stepper drops below it
	   when the name is long, and stays beside it when the name is short. */
	.nw-opc__product-meta { flex-basis: 60%; }
	.nw-opc__product-name { font-size: 1em; }
}