/**
 * Konekt Returns
 *
 * Deliberately plain and low-specificity so it inherits the theme rather than
 * fighting it, and uses currentColor / theme buttons where it can.
 */

.kr-withdrawal { max-width: 46rem; }

.kr-fieldset {
	border: 1px solid rgba(0, 0, 0, .12);
	border-radius: .5rem;
	padding: 1rem 1.25rem 1.25rem;
	margin: 0 0 1.25rem;
}

.kr-fieldset legend { font-weight: 600; padding: 0 .4rem; }

.kr-field { display: block; margin: 0 0 1rem; }
.kr-field label { display: block; font-weight: 600; margin-bottom: .25rem; }
.kr-field input[type="text"],
.kr-field input[type="email"],
.kr-field input[type="number"],
.kr-field select,
.kr-field textarea { width: 100%; max-width: 32rem; }

.kr-required { color: #b32d2e; }
.kr-hint { display: block; font-size: .85em; opacity: .75; margin-top: .25rem; }
.kr-or { margin: .5rem 0; opacity: .75; font-style: italic; }

/* The part of the form that changes when an order is identified. Dimmed rather
   than emptied while it loads, so the page does not jump under the cursor. */
.kr-items-region--loading { opacity: .5; }

.kr-items { width: 100%; border-collapse: collapse; }
.kr-items th,
.kr-items td { text-align: left; padding: .5rem .4rem; border-bottom: 1px solid rgba(0, 0, 0, .08); }
.kr-items input[type="number"] { width: 5rem; }
.kr-sku { display: block; font-size: .8em; opacity: .7; }

.kr-check { margin: 0 0 .6rem; }
.kr-check label { display: flex; gap: .5rem; align-items: flex-start; font-weight: 400; }

.kr-summary { width: 100%; border-collapse: collapse; margin: 0 0 1.5rem; }
.kr-summary th,
.kr-summary td { text-align: left; vertical-align: top; padding: .6rem .5rem; border-bottom: 1px solid rgba(0, 0, 0, .08); }
.kr-summary th { width: 14rem; font-weight: 600; }
.kr-summary__items { margin: 0; padding-left: 1.1rem; }

.kr-actions { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }

.kr-button {
	display: inline-block;
	padding: .7rem 1.4rem;
	border: 0;
	border-radius: .4rem;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
}

.kr-button--primary { background: #1a1a1a; color: #fff; }
.kr-button--primary:hover { opacity: .88; color: #fff; }
.kr-button--secondary { background: rgba(0, 0, 0, .07); color: inherit; }
.kr-button--link { background: none; padding: .7rem 0; text-decoration: underline; }

.kr-notice { padding: .9rem 1.1rem; border-radius: .4rem; margin: 0 0 1.25rem; border-left: 4px solid; }
.kr-notice ul { margin: 0; padding-left: 1.1rem; }
.kr-notice--error { background: #fdecec; border-color: #b32d2e; }
.kr-notice--success { background: #edf8ef; border-color: #1a7f37; }
.kr-notice--warning { background: #fdf6e3; border-color: #b8860b; }
.kr-notice--info { background: #eef4fb; border-color: #2b6cb0; }

.kr-terms__body { font-size: .95em; }
.kr-reference { opacity: .75; }
.kr-order-link { margin-top: 1rem; }

/* The persistent entry point. Kept clear of the very bottom so it does not sit
   under cookie bars and sticky baskets, which is where it would be useless. */
.kr-floating {
	position: fixed;
	bottom: 1.5rem;
	z-index: 9998;
	padding: .75rem 1.1rem;
	border-radius: 2rem;
	background: #1a1a1a;
	color: #fff;
	font-size: .9rem;
	font-weight: 600;
	text-decoration: none;
	box-shadow: 0 2px 12px rgba(0, 0, 0, .25);
}

.kr-floating:hover,
.kr-floating:focus { color: #fff; opacity: .9; }
.kr-floating--bottom-right { right: 1.5rem; }
.kr-floating--bottom-left { left: 1.5rem; }

@media (max-width: 600px) {
	.kr-floating { bottom: .75rem; font-size: .82rem; padding: .6rem .9rem; }
	.kr-summary th { width: auto; display: block; padding-bottom: 0; }
	.kr-summary td { display: block; padding-top: .2rem; }
}

@media (prefers-reduced-motion: no-preference) {
	.kr-floating { transition: opacity .15s ease; }
}