/**
 * Dakhli — UI components.
 *
 * Buttons, form controls, badges, notices and other parts shared by the
 * marketing pages and the shop.
 */

/* ===============================================================
 * Buttons
 * ============================================================= */

.dk-btn {
	--btn-bg: var(--dk-ink);
	--btn-fg: var(--dk-white);
	--btn-bd: var(--dk-ink);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--dk-s2);
	padding: 0.78em 1.5em;
	background: var(--btn-bg);
	color: var(--btn-fg);
	border: 1.5px solid var(--btn-bd);
	border-radius: var(--dk-radius);
	font-family: var(--dk-font-display);
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1.1;
	white-space: nowrap;
	transition: background var(--dk-dur) var(--dk-ease),
		color var(--dk-dur) var(--dk-ease),
		border-color var(--dk-dur) var(--dk-ease),
		transform var(--dk-dur) var(--dk-ease);
}
.dk-btn:hover { transform: translateY(-1px); }
.dk-btn:active { transform: translateY(0); }
.dk-btn[disabled],
.dk-btn.dk-is-loading {
	opacity: 0.55;
	pointer-events: none;
}

/* Primary — yellow plate with ink text. The main commerce action. */
.dk-btn--primary {
	--btn-bg: var(--dk-yellow);
	--btn-fg: var(--dk-ink);
	--btn-bd: var(--dk-yellow);
}
.dk-btn--primary:hover {
	--btn-bg: var(--dk-yellow-600);
	--btn-bd: var(--dk-yellow-600);
}

/* Secondary — outline on paper. */
.dk-btn--ghost {
	--btn-bg: transparent;
	--btn-fg: var(--dk-ink);
	--btn-bd: var(--dk-ink);
}
.dk-btn--ghost:hover {
	--btn-bg: var(--dk-ink);
	--btn-fg: var(--dk-white);
}

/* Solid ink, and a quieter outline that sits beside a primary button without
   competing with it. Used on the homepage, cart, checkout and confirmation. */
.dk-btn--ink {
	--btn-bg: var(--dk-ink);
	--btn-fg: var(--dk-white);
	--btn-bd: var(--dk-ink);
}
.dk-btn--ink:hover { --btn-bg: var(--dk-ink-700); --btn-bd: var(--dk-ink-700); }

.dk-btn--ghost-ink {
	--btn-bg: transparent;
	--btn-fg: var(--dk-ink);
	--btn-bd: var(--dk-line-strong);
}
.dk-btn--ghost-ink:hover { --btn-bd: var(--dk-ink); --btn-bg: var(--dk-white); }
.dk-on-ink .dk-btn--ghost {
	--btn-fg: var(--dk-white);
	--btn-bd: rgba(255, 255, 255, 0.4);
}
.dk-on-ink .dk-btn--ghost:hover {
	--btn-bg: var(--dk-white);
	--btn-fg: var(--dk-ink);
	--btn-bd: var(--dk-white);
}

.dk-btn--sm { padding: 0.58em 1.05em; font-size: 0.9375rem; }
.dk-btn--lg { padding: 0.92em 2em; font-size: 1.1875rem; }
.dk-btn--block { display: flex; width: 100%; }

/* Arrow that advances on hover — used on the primary CTA. */
.dk-btn__arrow { transition: transform var(--dk-dur) var(--dk-ease); flex: none; }
.dk-btn:hover .dk-btn__arrow { transform: translateX(3px); }

/* Icon-only control (search, account, cart). */
.dk-iconbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	width: 42px;
	height: 42px;
	border-radius: var(--dk-radius);
	color: inherit;
	text-decoration: none;
	transition: background var(--dk-dur) var(--dk-ease), color var(--dk-dur) var(--dk-ease);
}
.dk-iconbtn:hover { background: var(--dk-paper-2); }
.dk-on-ink .dk-iconbtn:hover { background: rgba(255, 255, 255, 0.1); }

/* Count bubble on the cart. */
.dk-iconbtn__count {
	position: absolute;
	top: 3px;
	right: 1px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	display: grid;
	place-items: center;
	background: var(--dk-yellow);
	color: var(--dk-ink);
	border-radius: var(--dk-radius-pill);
	font-family: var(--dk-font-mono);
	font-size: 10px;
	font-weight: 600;
	line-height: 1;
}

/* ===============================================================
 * Badges
 * ============================================================= */

.dk-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	padding: 0.32em 0.6em;
	font-family: var(--dk-font-mono);
	font-size: var(--dk-t-2xs);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	line-height: 1;
	border-radius: var(--dk-radius);
	background: var(--dk-paper-2);
	color: var(--dk-ink-600);
}
.dk-badge--promo { background: var(--dk-red); color: #fff; }
.dk-badge--new { background: var(--dk-ink); color: #fff; }
.dk-badge--stock { background: var(--dk-green-tint); color: var(--dk-green); }
.dk-badge--out { background: var(--dk-paper-3); color: var(--dk-ink-500); }
.dk-badge--yellow { background: var(--dk-yellow); color: var(--dk-ink); }

/* ===============================================================
 * Form controls
 * ============================================================= */

.dk-field { margin-bottom: var(--dk-s4); }

.dk-label,
.dk-field label {
	display: block;
	font-family: var(--dk-font-mono);
	font-size: var(--dk-t-2xs);
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--dk-ink-600);
	margin-bottom: var(--dk-s2);
}

.dk-input,
input[type='text'],
input[type='email'],
input[type='tel'],
input[type='url'],
input[type='password'],
input[type='number'],
input[type='search'],
input[type='date'],
textarea,
select {
	width: 100%;
	padding: 0.7em 0.85em;
	background: var(--dk-white);
	color: var(--dk-ink);
	border: 1px solid var(--dk-line-strong);
	border-radius: var(--dk-radius);
	font-size: var(--dk-t-base);
	line-height: 1.4;
	transition: border-color var(--dk-dur) var(--dk-ease), box-shadow var(--dk-dur) var(--dk-ease);
	appearance: none;
}

textarea { min-height: 9rem; resize: vertical; }

input:focus,
textarea:focus,
select:focus {
	outline: none;
	border-color: var(--dk-ink);
	box-shadow: var(--dk-ring);
}

input::placeholder,
textarea::placeholder { color: var(--dk-ink-400); }

/* Native select needs its own chevron once appearance is stripped. */
select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%235A616E' stroke-width='1.8' fill='none' stroke-linecap='square'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.85em center;
	padding-right: 2.4em;
}

.dk-field__hint {
	display: block;
	margin-top: var(--dk-s1);
	font-size: var(--dk-t-xs);
	color: var(--dk-text-faint);
	letter-spacing: 0;
	text-transform: none;
	font-family: var(--dk-font-sans);
}

.dk-required { color: var(--dk-red); }

/* Checkbox and radio, sized up for touch. */
input[type='checkbox'],
input[type='radio'] {
	width: 18px;
	height: 18px;
	accent-color: var(--dk-ink);
	cursor: pointer;
	flex: none;
}

/* Quantity stepper. */
.dk-qty {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--dk-line-strong);
	border-radius: var(--dk-radius);
	overflow: hidden;
	background: var(--dk-white);
}
.dk-qty button {
	width: 38px;
	display: grid;
	place-items: center;
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--dk-ink-600);
	transition: background var(--dk-dur) var(--dk-ease);
}
.dk-qty button:hover { background: var(--dk-paper-2); color: var(--dk-ink); }
.dk-qty input {
	width: 48px;
	border: 0;
	border-inline: 1px solid var(--dk-line);
	border-radius: 0;
	text-align: center;
	font-family: var(--dk-font-mono);
	font-weight: 500;
	padding: 0.6em 0;
	-moz-appearance: textfield;
}
.dk-qty input::-webkit-outer-spin-button,
.dk-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.dk-qty input:focus { box-shadow: none; }

/* ===============================================================
 * Notices
 * ============================================================= */

.dk-notice {
	display: flex;
	gap: var(--dk-s3);
	padding: var(--dk-s4);
	border: 1px solid var(--dk-line-strong);
	border-left: 3px solid var(--dk-ink);
	border-radius: var(--dk-radius);
	background: var(--dk-white);
	font-size: var(--dk-t-base);
	margin-bottom: var(--dk-s4);
}
.dk-notice--success { border-left-color: var(--dk-green); background: var(--dk-green-tint); }
.dk-notice--error { border-left-color: var(--dk-red); background: var(--dk-red-tint); }
.dk-notice--info { border-left-color: var(--dk-yellow-600); background: var(--dk-yellow-050); }

/* ===============================================================
 * Panels and cards
 * ============================================================= */

.dk-panel {
	background: var(--dk-bg-raised);
	border: var(--dk-border);
	border-radius: var(--dk-radius);
	padding: var(--dk-s5);
}
.dk-panel--flush { padding: 0; }

/* ===============================================================
 * Breadcrumbs
 * ============================================================= */

.dk-crumbs {
	font-family: var(--dk-font-mono);
	font-size: var(--dk-t-2xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--dk-text-faint);
	padding-block: var(--dk-s4);
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	align-items: center;
}
.dk-crumbs a { text-decoration: none; color: var(--dk-text-muted); }
.dk-crumbs a:hover { color: var(--dk-ink); }
.dk-crumbs__sep { color: var(--dk-ink-300); }

/* ===============================================================
 * Pagination
 * ============================================================= */

.dk-pagination {
	display: flex;
	justify-content: center;
	gap: var(--dk-s2);
	margin-top: var(--dk-s8);
	flex-wrap: wrap;
}
.dk-pagination a,
.dk-pagination span {
	min-width: 42px;
	height: 42px;
	display: grid;
	place-items: center;
	padding: 0 var(--dk-s3);
	border: 1px solid var(--dk-line-strong);
	border-radius: var(--dk-radius);
	font-family: var(--dk-font-mono);
	font-size: var(--dk-t-sm);
	text-decoration: none;
	background: var(--dk-white);
	transition: all var(--dk-dur) var(--dk-ease);
}
.dk-pagination a:hover { border-color: var(--dk-ink); }
.dk-pagination .current {
	background: var(--dk-ink);
	border-color: var(--dk-ink);
	color: var(--dk-white);
}

/* ===============================================================
 * Utilities
 * ============================================================= */

.dk-hide { display: none !important; }
@media (max-width: 899px) { .dk-hide\@md { display: none !important; } }
@media (min-width: 900px) { .dk-only\@md { display: none !important; } }
@media (max-width: 639px) { .dk-hide\@sm { display: none !important; } }