/*
 * Returns and cancellations — the customer's side, on the account pages.
 *
 * The .kk-status pill is defined in checkout.css and reused here; only the
 * request-specific statuses and the layout around them live in this file.
 */

/* --- request statuses, extending the order pill -------------------- */

.kk-status--requested { background: var(--kk-gold-soft); color: var(--kk-gold-deep); }
.kk-status--approved  { background: #DDE9F3; color: #12496E; }
.kk-status--rejected  { background: #F6E0E0; color: var(--kk-sale); }
.kk-status--received  { background: var(--kk-rule-soft); color: var(--kk-brown); }

/* A second pill sitting beside the order status, not replacing it. */
.kk-status--sub { margin-left: .3rem; }

/* --- an existing request ------------------------------------------- */

.kk-returns {
	margin: var(--kk-gap-l) 0 0;
	padding-top: var(--kk-gap-m);
	border-top: 1px solid var(--kk-rule);
}

.kk-returns__title {
	font-family: var(--kk-display);
	font-weight: 400;
	font-size: var(--kk-step-2);
	color: var(--kk-brown);
	margin: 0 0 var(--kk-gap-s);
}

.kk-returns__intro {
	color: var(--kk-muted);
	max-width: 60ch;
	margin: 0 0 var(--kk-gap-m);
}

.kk-return-row {
	padding: var(--kk-gap-s) 0;
	border-bottom: 1px solid var(--kk-rule-soft);
}

.kk-return-row:last-child { border-bottom: 0; }

.kk-return-row__head {
	display: flex;
	align-items: center;
	gap: var(--kk-gap-xs);
	flex-wrap: wrap;
	margin-bottom: .3rem;
}

.kk-return-row__kind {
	font-weight: 500;
	color: var(--kk-brown);
}

.kk-return-row__meta {
	margin: 0;
	font-size: var(--kk-step--1);
	color: var(--kk-muted);
}

/* The shop's answer matters most when the answer was no — give it weight. */
.kk-return-row__note {
	margin: .45rem 0 0;
	padding: .55rem .8rem;
	background: var(--kk-cream);
	border-left: 2px solid var(--kk-gold);
	border-radius: var(--kk-radius);
	color: var(--kk-text);
	font-size: var(--kk-step--1);
	max-width: 60ch;
}

/* --- the request form ---------------------------------------------- */

.kk-return-form { max-width: 46rem; }

.kk-return-form__field { margin: 0 0 var(--kk-gap-s); }

.kk-return-form label {
	display: block;
	margin-bottom: .3rem;
	font-weight: 500;
	color: var(--kk-brown);
}

.kk-return-form__opt {
	font-weight: 400;
	color: var(--kk-muted);
	font-size: var(--kk-step--1);
}

.kk-return-form textarea {
	width: 100%;
	padding: .6rem .75rem;
	font: inherit;
	color: var(--kk-text);
	background: var(--kk-white);
	border: 1px solid var(--kk-rule);
	border-radius: var(--kk-radius);
	resize: vertical;
}

.kk-return-form textarea:focus-visible {
	outline: 2px solid var(--kk-gold);
	outline-offset: 1px;
	border-color: var(--kk-gold);
}

/* --- refund line and invoice --------------------------------------- */

.kk-refund-line {
	display: flex;
	align-items: center;
	gap: var(--kk-gap-xs);
	margin: var(--kk-gap-s) 0 0;
}

.kk-refund-line__amt {
	font-weight: 500;
	color: var(--kk-brown);
}

.kk-invoice-link { margin: var(--kk-gap-m) 0 0; }

/* --- dispatch / AWB ------------------------------------------------- */

.kk-tracking {
	margin: var(--kk-gap-s) 0 0;
	color: var(--kk-text);
}

/* The number a customer reads out on the phone — make it legible and
   selectable rather than styled like prose. */
.kk-awb {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: .95em;
	letter-spacing: .02em;
	color: var(--kk-brown);
	user-select: all;
}

a.kk-awb {
	text-decoration: none;
	border-bottom: 1px solid var(--kk-rule);
}

a.kk-awb:hover {
	color: var(--kk-gold-deep);
	border-bottom-color: var(--kk-gold);
}

.kk-awb-none { color: var(--kk-faint); }