/* ==========================================================================
   NextKat — 3'lü paket seçici + renk seçenekleri
   Rendered under the add-to-cart by nextkat-gul-paket.php.
   ========================================================================== */

.nk-paket {
	margin: 0 0 18px;
}

.nk-paket__title {
	display: block;
	margin-bottom: 9px;
	color: var(--dgz-ink);
	font-size: .78rem;
	font-weight: 800;
	letter-spacing: .04em;
	text-transform: uppercase;
}

/* Three across on every screen size — the client explicitly does not want
   these stacking on mobile. */
.nk-paket__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
}

.nk-paket__card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	margin: 0;
	padding: 12px 6px 11px;
	text-align: center;
	background: #fff;
	border: 1.5px solid var(--dgz-line);
	border-radius: 14px;
	cursor: pointer;
	transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease, background-color 200ms ease;
}

.nk-paket__card:hover { border-color: rgba(255, 90, 31, .45); }

.nk-paket__card.is-active {
	background: linear-gradient(180deg, #fff 0%, var(--dgz-orange-soft) 100%);
	border-color: var(--dgz-orange);
	box-shadow: 0 10px 24px -14px rgba(255, 90, 31, .5);
}

/* The real radio stays in the DOM for keyboard + a11y, but is invisible. */
.nk-paket__card input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	pointer-events: none;
}

.nk-paket__card:focus-within {
	outline: 3px solid var(--dgz-orange);
	outline-offset: 2px;
}

.nk-paket__badge {
	position: absolute;
	top: -9px;
	left: 50%;
	transform: translateX(-50%);
	padding: 2px 8px;
	color: #fff;
	font-size: .56rem;
	font-weight: 800;
	letter-spacing: .04em;
	white-space: nowrap;
	background: var(--dgz-orange);
	border-radius: 999px;
}

.nk-paket__label {
	color: var(--dgz-ink);
	font-size: .84rem;
	font-weight: 800;
	line-height: 1.2;
}

.nk-paket__price {
	color: var(--dgz-orange);
	font-size: 1.02rem;
	font-weight: 800;
	line-height: 1.2;
}

.nk-paket__unit {
	color: var(--dgz-muted);
	font-size: .6rem;
	line-height: 1.3;
}

.nk-paket__note {
	color: var(--dgz-muted);
	font-size: .58rem;
	line-height: 1.3;
}

.nk-paket__save {
	margin-top: 3px;
	padding: 1px 7px;
	color: #1a7f4b;
	font-size: .55rem;
	font-weight: 700;
	background: #e7f7ee;
	border-radius: 999px;
}

/* --------------------------------------------------------------------------
   Renk seçenekleri — a horizontal row of swatches on every screen.
   The WooCommerce attribute select is converted to buttons in paket.js.
   -------------------------------------------------------------------------- */

.nk-renk {
	margin: 0 0 16px;
}

.nk-renk__title {
	display: block;
	margin-bottom: 8px;
	color: var(--dgz-ink);
	font-size: .78rem;
	font-weight: 800;
	letter-spacing: .04em;
	text-transform: uppercase;
}

/* The native select is kept off-screen (not display:none) so the form still
   posts the value. */
.nk-renk .nk-renk__native,
.nk-renk select {
	position: absolute !important;
	opacity: 0 !important;
	width: 1px !important;
	height: 1px !important;
	pointer-events: none !important;
}

.nk-renk__row {
	display: flex;
	flex-wrap: nowrap;
	gap: 8px;
	overflow-x: auto;
	padding-bottom: 2px;
	scrollbar-width: none;
}

.nk-renk__row::-webkit-scrollbar { display: none; }

.nk-renk__swatch {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	min-width: 0;
	padding: 9px 4px 8px;
	background: #fff;
	border: 1.5px solid var(--dgz-line);
	border-radius: 12px;
	cursor: pointer;
	transition: border-color 200ms ease, box-shadow 200ms ease, background-color 200ms ease;
}

.nk-renk__swatch.is-active {
	background: linear-gradient(180deg, #fff 0%, var(--dgz-orange-soft) 100%);
	border-color: var(--dgz-orange);
	box-shadow: 0 8px 20px -12px rgba(255, 90, 31, .5);
}

.nk-renk__swatch:focus-visible {
	outline: 3px solid var(--dgz-orange);
	outline-offset: 2px;
}

.nk-renk__dot {
	width: 26px;
	height: 26px;
	border: 1px solid rgba(21, 21, 21, .14);
	border-radius: 50%;
	box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset;
}

.nk-renk__name {
	max-width: 100%;
	color: var(--dgz-ink);
	font-size: .62rem;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	overflow-wrap: anywhere;
}

/* --- the four colours we actually sell --------------------------------- */
.nk-renk__dot[data-color="kirmizi"] { background: linear-gradient(145deg, #e11d48, #9f1239); }
.nk-renk__dot[data-color="pembe"]   { background: linear-gradient(145deg, #f9a8d4, #db2777); }
.nk-renk__dot[data-color="beyaz"]   { background: linear-gradient(145deg, #ffffff, #e7e7e2); }
.nk-renk__dot[data-color="rainbow"] {
	background: conic-gradient(from 210deg, #e11d48, #f59e0b, #22c55e, #3b82f6, #a855f7, #e11d48);
}

@media (max-width: 640px) {
	.nk-paket__grid { gap: 6px; }
	.nk-paket__card { padding: 10px 4px 9px; border-radius: 12px; }
	.nk-paket__label { font-size: .76rem; }
	.nk-paket__price { font-size: .92rem; }
	.nk-paket__unit { font-size: .55rem; }
	.nk-paket__note { display: none; }
	.nk-paket__badge { font-size: .5rem; padding: 1px 6px; }
	.nk-renk__row { gap: 6px; }
	.nk-renk__swatch { padding: 8px 3px 7px; }
	.nk-renk__dot { width: 22px; height: 22px; }
	.nk-renk__name { font-size: .56rem; }
}

/* ==========================================================================
   v2 — pack -> body colour -> per-rose colours -> note
   ========================================================================== */

.nk-step {
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px dashed #e5e5df;
}

.nk-step__title {
	display: block;
	margin-bottom: 9px;
	color: var(--dgz-ink);
	font-size: .84rem;
	font-weight: 800;
	letter-spacing: -.01em;
}

.nk-step__opt {
	color: var(--dgz-muted);
	font-weight: 500;
}

.nk-step__hint {
	margin: -5px 0 9px;
	color: var(--dgz-muted);
	font-size: .7rem;
	line-height: 1.45;
}

/* --- body colour ------------------------------------------------------- */

.nk-bodies {
	display: flex;
	flex-wrap: nowrap;
	gap: 9px;
}

.nk-body {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 14px;
	color: var(--dgz-ink);
	background: #fff;
	border: 1.5px solid #d8d8d1;
	border-radius: 12px;
	font-size: .82rem;
	font-weight: 700;
	cursor: pointer;
	transition: border-color 180ms ease, box-shadow 180ms ease;
}

.nk-body:hover { border-color: #b9b8b0; }

.nk-body.is-active {
	border: 2.5px solid var(--dgz-orange);
	box-shadow: 0 0 0 3px rgba(255, 90, 31, .14);
	padding: 8px 13px;
}

.nk-body__dot {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px rgba(21, 21, 21, .22);
}

/* --- one rose colour per rose ------------------------------------------ */

.nk-roses {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.nk-rose {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.nk-rose__label {
	flex: 0 0 46px;
	color: var(--dgz-muted);
	font-size: .74rem;
	font-weight: 700;
}

.nk-rose__row {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	gap: 7px;
	overflow-x: auto;
	scrollbar-width: none;
}

.nk-rose__row::-webkit-scrollbar { display: none; }

.nk-rose__pick {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0;
	margin: 0;
	background: #fff;
	border: 2px solid #dcdcd5;
	border-radius: 50%;
	cursor: pointer;
	transition: border-color 170ms ease, transform 170ms ease;
}

.nk-rose__pick:hover { transform: scale(1.08); }

.nk-rose__pick.is-active {
	border-color: var(--dgz-orange);
	box-shadow: 0 0 0 3px rgba(255, 90, 31, .18);
}

.nk-rose__pick:focus-visible {
	outline: 2px solid var(--dgz-orange);
	outline-offset: 2px;
}

.nk-rose__dot {
	display: block;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px rgba(21, 21, 21, .1);
}

/* --- note -------------------------------------------------------------- */

.nk-not {
	display: block;
	width: 100%;
	min-height: 62px;
	padding: 10px 12px;
	color: var(--dgz-ink);
	background: #fff;
	border: 1.5px solid #d8d8d1;
	border-radius: 12px;
	font-family: inherit;
	font-size: .82rem;
	line-height: 1.5;
	resize: vertical;
}

.nk-not:focus {
	border-color: var(--dgz-orange);
	outline: none;
	box-shadow: 0 0 0 3px rgba(255, 90, 31, .14);
}

.nk-not::placeholder { color: #a9a9a1; }

@media (max-width: 640px) {
	.nk-step { margin-top: 13px; padding-top: 11px; }
	.nk-step__title { font-size: .78rem; }
	.nk-body { padding: 8px 11px; font-size: .76rem; }
	.nk-body.is-active { padding: 7px 10px; }
	.nk-body__dot { width: 16px; height: 16px; }
	.nk-rose__label { flex-basis: 42px; font-size: .7rem; }
	.nk-rose__pick { width: 27px; height: 27px; }
	.nk-rose__dot { width: 18px; height: 18px; }
	.nk-not { font-size: .78rem; min-height: 56px; }
}

@media (prefers-reduced-motion: reduce) {
	.nk-body,
	.nk-rose__pick { transition: none !important; }
	.nk-rose__pick:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   The pack selector already sets the quantity, so the native number input is
   redundant and confusing next to "Sepete ekle". It stays in the form (hidden,
   not removed) so WooCommerce still receives the value on submit.
   -------------------------------------------------------------------------- */

.nk-has-paket .quantity,
.nk-has-paket form.cart .quantity {
	display: none !important;
}