/**
 * ReturnKit customer pages.
 *
 * Deliberately light: inherits the theme's fonts, colors and buttons, and
 * only lays things out. Colors use currentColor and translucent borders so
 * dark themes work too.
 */

.rtkt-portal { --rtkt-line: rgba(127, 127, 127, .28); --rtkt-soft: rgba(127, 127, 127, .07); --rtkt-accent: #0d9488; margin: 0; padding-bottom: 3em; }
/* Padding, not margin: block themes zero the last block's bottom margin
   (.is-layout-constrained > :last-child), which put the page against the footer. */
.rtkt-portal *, .rtkt-portal *::before, .rtkt-portal *::after { box-sizing: border-box; }
.rtkt-portal h2 { margin: 0 0 .25em; }
.rtkt-portal h3 { margin: 0 0 .5em; font-size: 1.1em; }
.rtkt-head { margin: 0 0 1.25em; }
.rtkt-hint, .rtkt-portal .rtkt-hint { opacity: .75; font-size: .92em; margin: .25em 0 1em; }
.rtkt-section { margin: 0 0 2em; }
.rtkt-empty { opacity: .75; }
.rtkt-notice { margin-bottom: 1.25em; }

/* Status pills */
.rtkt-status { display: inline-block; padding: .15em .65em; border-radius: 999px; font-size: .82em; font-weight: 600; line-height: 1.6; background: var(--rtkt-soft); border: 1px solid var(--rtkt-line); vertical-align: middle; white-space: nowrap; }
.rtkt-status--pending { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.rtkt-status--approved, .rtkt-status--received { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }
.rtkt-status--completed { background: #ecfdf5; border-color: #a7f3d0; color: #047857; }
.rtkt-status--rejected { background: #fff1f2; border-color: #fecdd3; color: #be123c; }
.rtkt-head h2 .rtkt-status { font-size: 14px; letter-spacing: 0; margin-left: .35em; position: relative; top: -.2em; }
.rtkt-type { display: block; font-size: .85em; opacity: .7; }
.rtkt-request-list { list-style: none; margin: 0 0 1.25em; padding: 0; }
.rtkt-request-list li { display: flex; flex-wrap: wrap; align-items: center; gap: .6em; padding: .55em 0; border-top: 1px solid var(--rtkt-line); margin: 0; }
.rtkt-request-list li:first-child { border-top: 0; }
.rtkt-request-list .rtkt-type { display: inline; }
.rtkt-actions { text-align: right; white-space: nowrap; }
.rtkt-actions .button { margin: 0 0 .25em .35em; }
.rtkt-buttons .button { margin: 0 .5em .5em 0; }
.rtkt-order-panel { margin-top: 2em; }

/* Forms */
.rtkt-form fieldset { border: 0; padding: 0; margin: 0 0 1.5em; min-width: 0; }
.rtkt-form legend { font-weight: 700; margin: 0 0 .75em; padding: 0; font-size: 1.05em; }
.rtkt-field { margin: 0; display: flex; flex-direction: column; gap: .3em; }
.rtkt-field label { font-size: .88em; font-weight: 600; }
.rtkt-field select, .rtkt-field textarea, .rtkt-form textarea, .rtkt-form input[type="text"], .rtkt-form input[type="email"] { width: 100%; max-width: 100%; }
.rtkt-field--wide { margin: 0 0 1.25em; }
.rtkt-submit { margin: 1em 0 .5em; display: flex; flex-wrap: wrap; gap: .75em; align-items: center; }
.rtkt-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.rtkt-turnstile { margin: 1em 0; }

/* Item rows */
.rtkt-item { display: grid; grid-template-columns: 64px minmax(0, 1fr) minmax(0, 260px); gap: 1em; align-items: start; padding: 1em 0; border-top: 1px solid var(--rtkt-line); }
.rtkt-item:first-of-type { border-top: 0; }
.rtkt-withdrawal .rtkt-item { grid-template-columns: minmax(0, 1fr) 120px; }
.rtkt-item__thumb img { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; display: block; }
.rtkt-item__main { display: flex; flex-direction: column; gap: .2em; min-width: 0; }
.rtkt-item__name { font-weight: 600; }
.rtkt-item__meta { font-size: .88em; opacity: .75; }
.rtkt-item__note { font-size: .88em; color: #b45309; }
.rtkt-item__fields { display: grid; gap: .6em; }
.rtkt-item.is-disabled { opacity: .6; }
.rtkt-item.is-disabled .rtkt-item__main { grid-column: 2 / -1; }
.rtkt-withdrawal .rtkt-item.is-disabled .rtkt-item__main { grid-column: 1 / -1; }
.rtkt-item [data-rtkt-when-selected][hidden] { display: none; }

.rtkt-choice { display: flex; align-items: flex-start; gap: .6em; padding: .75em 1em; border: 1px solid var(--rtkt-line); border-radius: 8px; margin: 0 0 .5em; cursor: pointer; }
.rtkt-choice input { margin-top: .3em; }
.rtkt-choice:has(input:checked) { border-color: var(--rtkt-accent); box-shadow: 0 0 0 1px var(--rtkt-accent); }
.rtkt-scope-items[hidden], .rtkt-item [data-rtkt-when-selected][hidden] { display: none; }
/* Collapsed until chosen, only when JavaScript runs (the head script adds .rtkt-js). */
.rtkt-js .rtkt-collapsed { display: none; }

/* Boxes */
.rtkt-box { padding: 1.1em 1.25em; border: 1px solid var(--rtkt-line); border-radius: 10px; background: var(--rtkt-soft); margin: 0 0 1.5em; }
.rtkt-receipt { border-color: rgba(13, 148, 136, .45); }
.rtkt-instructions address { font-style: normal; font-weight: 600; margin: .5em 0 0; }
.rtkt-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .45em 1.25em; margin: .75em 0 1.25em; }
.rtkt-dl dt { font-weight: 600; opacity: .8; margin: 0; }
.rtkt-dl dd { margin: 0; overflow-wrap: anywhere; }
.rtkt-dl ul { margin: 0; padding-left: 1.1em; }
.rtkt-exchange { display: block; font-size: .88em; color: var(--rtkt-accent); }
.rtkt-customer-note { margin: 0 0 1.5em; }

/* Timeline */
.rtkt-timeline ol { list-style: none; margin: 0 0 1.5em; padding: 0 0 0 1.1em; border-left: 2px solid var(--rtkt-line); }
.rtkt-timeline__item:last-child { margin-bottom: 0; }
.rtkt-timeline__item { position: relative; margin: 0 0 1em; padding-left: .5em; }
.rtkt-timeline__item::before { content: ""; position: absolute; left: -1.55em; top: .45em; width: .7em; height: .7em; border-radius: 50%; background: var(--rtkt-line); }
.rtkt-timeline__item:first-child::before { background: var(--rtkt-accent); }
.rtkt-timeline__item time { display: block; font-size: .82em; opacity: .7; }

.rtkt-order-picker { list-style: none; margin: 0 0 1em; padding: 0; display: grid; gap: .6em; }
.rtkt-order-picker a { display: flex; flex-wrap: wrap; gap: .4em 1.25em; align-items: baseline; padding: .9em 1.1em; border: 1px solid var(--rtkt-line); border-radius: 8px; text-decoration: none; }
.rtkt-order-picker a:hover, .rtkt-order-picker a:focus-visible { border-color: var(--rtkt-accent); }
.rtkt-order-picker span { opacity: .75; font-size: .92em; }

.rtkt-portal .rtkt-button-link, .rtkt-portal .rtkt-button-link:hover { background: none !important; border: 0 !important; padding: 0 !important; min-height: 0 !important; text-decoration: underline; cursor: pointer; color: inherit !important; font: inherit; font-weight: 400; letter-spacing: 0; text-transform: none; box-shadow: none !important; opacity: .8; }
.rtkt-portal .rtkt-button-link:hover { opacity: 1; }
.rtkt-cancel { margin-top: 1.5em; }
.rtkt-withdraw-hint { margin-top: 1.5em; font-size: .92em; }
.rtkt-withdraw-button { font-weight: 600; }

@media (max-width: 600px) {
	.rtkt-item { grid-template-columns: 48px minmax(0, 1fr); }
	.rtkt-item__thumb img { width: 48px; height: 48px; }
	.rtkt-item__fields { grid-column: 1 / -1; }
	.rtkt-withdrawal .rtkt-item { grid-template-columns: minmax(0, 1fr) 90px; }
	.rtkt-dl { grid-template-columns: minmax(0, 1fr); gap: .1em; }
	.rtkt-dl dd { margin-bottom: .6em; }
	.rtkt-actions { text-align: left; white-space: normal; }
}
