/* ReserveDaily Invoices: My Account and order-received panel. Matches the rd-order-ops account look. */

.rdi-panel {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	background: #eff4f7;
	border-radius: 12px;
	padding: 16px 20px;
	margin: 0 0 18px;
}
.rdi-panel-text { display: flex; flex-direction: column; gap: 2px; }
.rdi-panel-kicker { font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: #085e83; }
.rdi-panel-number { font-size: 16px; color: #333; }
.rdi-panel-date { font-size: 13px; color: #5b7a8c; }
.rdi-panel-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
/* inline-flex, not inline-block: the theme gives .button a min-height (WoodMart: 42px) and
   centres the label itself with its own flex rules. With inline-block that min-height is added
   under the label, so the label sat about 3px above the "View or print" link next to it. */
.rdi-panel a.button.rdi-button, .rdi-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #085e83;
	color: #fff;
	border: 0;
	border-radius: 8px;
	padding: 10px 18px;
	text-decoration: none;
	font-weight: 600;
	line-height: 1.3;
}
.rdi-panel a.button.rdi-button:hover { background: #074d6b; color: #fff; }
.rdi-link { color: #085e83; font-weight: 600; text-decoration: underline; font-size: 14px; }
.rdi-panel-notes { flex-basis: 100%; display: flex; flex-direction: column; gap: 6px; padding-top: 10px; font-size: 14px; }
.rdi-panel-note .rdi-panel-date { margin: 0 8px; }

@media (max-width: 600px) {
	.rdi-panel { padding: 14px 16px; }
	/* Under the invoice number, the two actions stay together instead of being pushed to the
	   two edges of the panel. They wrap to a second line if the panel gets narrower still. */
	.rdi-panel-actions { width: 100%; justify-content: flex-start; }
}