/* Payment-receipt uploader — order-received screen and My Account order view.
   Literal colours, not the shop-dark custom properties: this sheet also loads on
   pages whose body class the token block is not guaranteed to match. */

.msr {
	margin: 26px 0 0;
	padding: 20px;
	border: 1px solid rgba(255, 255, 255, .13);
	border-radius: 16px;
	background: #141416;
	color: #f5f5f5;
}

.msr__title { margin: 0 0 12px; color: #fff; font-size: 16px; font-weight: 700 }
.msr__file { margin: 0 0 6px; font-size: 13.5px }
.msr__dim { color: rgba(255, 255, 255, .62); font-size: 12.5px }

.msr__open {
	display: inline-flex;
	align-items: center;
	padding: 9px 16px;
	border: 1px solid rgba(255, 255, 255, .38);
	border-radius: 999px;
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	transition: background-color .15s ease, border-color .15s ease;
}

.msr__open:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .62); color: #fff }

.msr__msg { margin: 0 0 14px; padding: 10px 12px; border-radius: 10px; font-size: 13.5px }
.msr__msg--ok { border: 1px solid rgba(52, 211, 153, .4); background: rgba(52, 211, 153, .14); color: #6ee7b7 }
.msr__msg--bad { border: 1px solid rgba(251, 113, 133, .45); background: rgba(244, 63, 94, .14); color: #fda4af }

/* The dashed edge is the drop target as well as the label, so the real input is
   stretched over it invisibly rather than shown as a browser-default control. */
.msr__drop {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	padding: 16px;
	border: 1px dashed rgba(255, 255, 255, .38);
	border-radius: 14px;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease;
}

.msr__drop:hover, .msr__drop.is-drag { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .62) }
.msr__drop:focus-within { outline: 2px solid #a855f7; outline-offset: 2px; border-color: rgba(255, 255, 255, .62) }

.msr__input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer }

.msr__pick {
	display: inline-flex;
	align-items: center;
	padding: 11px 18px;
	border-radius: 999px;
	background-image: linear-gradient(135deg, #a855f7, #f472b6, #fdba74);
	color: #121212;
	font-size: 13px;
	font-weight: 700;
}

.msr__name { min-width: 0; color: rgba(255, 255, 255, .76); font-size: 13px; overflow-wrap: anywhere }

.msr__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 14px;
	padding: 13px 24px;
	border: 0;
	border-radius: 999px;
	background-image: linear-gradient(135deg, #a855f7, #f472b6, #fdba74);
	color: #121212;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	transition: background-image .15s ease, opacity .15s ease;
}

.msr__submit:hover, .msr__submit:focus { background-image: linear-gradient(135deg, #9333ea, #ec4899, #fb923c); color: #121212 }
.msr__submit:disabled { opacity: .6; cursor: progress }
.msr__submit:focus-visible { outline: 2px solid #a855f7; outline-offset: 2px }

.msr__hint { margin: 10px 0 0; color: rgba(255, 255, 255, .62); font-size: 12.5px; line-height: 1.75 }

/* shop-dark.css neutralises stray borders with
   body.woocommerce-page:not(.ms-homepage) :where(p, li, td, th, label, span, div), which
   scores (0,2,1) and outranks a bare class. The drop edge and the two status borders are
   deliberate controls, so they re-assert themselves at (0,3,2). */
body.woocommerce-page .msr .msr__drop { border-color: rgba(255, 255, 255, .38) }
body.woocommerce-page .msr .msr__drop:hover,
body.woocommerce-page .msr .msr__drop.is-drag,
body.woocommerce-page .msr .msr__drop:focus-within { border-color: rgba(255, 255, 255, .62) }
body.woocommerce-page .msr .msr__msg--ok { border-color: rgba(52, 211, 153, .4) }
body.woocommerce-page .msr .msr__msg--bad { border-color: rgba(251, 113, 133, .45) }