/*
 * Voucher screens.
 *
 * Two things drive the choices here:
 *
 * 1. Elementor and the active theme both style `button` and `input` with high
 *    specificity, and they win against plain class selectors. So every
 *    interactive state below is armoured with !important. Without it the
 *    buttons inherit theme styling and the tier picker stops reading as a
 *    picker. Learned the hard way on the JGS build.
 *
 * 2. The staff screen is used one-handed, on a phone, at a counter, often in a
 *    hurry. Targets are large, the balance is the biggest thing on screen, and
 *    nothing important sits behind a hover state.
 */

.ricos-v {
	--rv-ink: #1c1917;
	--rv-muted: #78716c;
	--rv-line: #e7e5e4;
	--rv-bg: #ffffff;
	--rv-soft: #faf9f7;
	/* Neutral defaults. The plugin overrides both from Settings → Branding,
	   so the same code runs at two cafés without looking like the other one. */
	--rv-accent: #4E7078;
	--rv-accent-ink: #ffffff;
	--rv-good: #166534;
	--rv-bad: #b91c1c;
	--rv-radius: 12px;

	max-width: 640px;
	margin: 0 auto;
	color: var(--rv-ink);
	font-size: 16px;
	line-height: 1.5;
}

.ricos-v *,
.ricos-v *::before,
.ricos-v *::after { box-sizing: border-box; }

.ricos-v [hidden] { display: none !important; }

.ricos-v-step { margin-bottom: 28px; }

.ricos-v-h {
	font-size: 1.05rem;
	font-weight: 700;
	margin: 0 0 12px;
	color: var(--rv-ink);
}

.ricos-v-h4 {
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--rv-muted);
	margin: 0 0 8px;
}

/* ------------------------------------------------------------- masthead */

.ricos-v-masthead{ margin-bottom: 22px; }

/* The plugin has to survive whatever CSS the host site brings — on Ricos a
   theme-level `.rb img{height:auto}` outranked this and the banner rendered at
   full portrait height, 830px instead of 210. The plugin cannot control the
   site's stylesheet, so the dimensions that decide the layout are armoured. */
.ricos-v-banner{
	width: 100% !important;
	height: clamp(120px, 26vw, 210px) !important;
	object-fit: cover !important;
	border-radius: var(--rv-radius);
	display: block;
}

/* the logo laps over the banner when there is one, and sits on its own when
   there isn't — one rule, because a café may set either, both or neither */
.ricos-v-logo{
	display: block;
	max-height: 84px !important;
	width: auto !important;
	height: auto !important;
	margin: 0 auto;
}
.ricos-v-banner + .ricos-v-logo{
	margin-top: -34px;
	position: relative;
	padding: 10px 16px;
	background: var(--rv-bg);
	border-radius: 10px;
	box-shadow: 0 10px 24px -12px rgba(0,0,0,.4);
}

/* ---------------------------------------------------------- amount picker */

.ricos-v-tiers {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.ricos-v-tier {
	flex: 1 1 84px;
	min-height: 56px;
	padding: 12px 16px !important;
	font-size: 1.15rem !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	cursor: pointer;
	border: 2px solid var(--rv-line) !important;
	border-radius: var(--rv-radius) !important;
	background: var(--rv-bg) !important;
	color: var(--rv-ink) !important;
	transition: border-color 0.12s ease, background-color 0.12s ease;
}

.ricos-v-tier:hover,
.ricos-v-tier:focus-visible {
	border-color: var(--rv-accent) !important;
	background: var(--rv-soft) !important;
	color: var(--rv-ink) !important;
}

.ricos-v-tier.is-on,
.ricos-v-tier.is-on:hover,
.ricos-v-tier.is-on:focus-visible {
	background: var(--rv-accent) !important;
	border-color: var(--rv-accent) !important;
	color: var(--rv-accent-ink) !important;
}

.ricos-v-tier--custom { font-size: 1rem !important; }

.ricos-v-custom { margin-top: 14px; }

/* ------------------------------------------------------------------ fields */

.ricos-v-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

@media (max-width: 560px) {
	.ricos-v-grid { grid-template-columns: 1fr; }
}

.ricos-v-field { margin-bottom: 16px; }

.ricos-v-label {
	display: block;
	font-size: 0.85rem;
	font-weight: 600;
	margin-bottom: 6px;
	color: var(--rv-ink);
}

.ricos-v-hint {
	font-weight: 400;
	color: var(--rv-muted);
}

.ricos-v-help {
	font-size: 0.8rem;
	color: var(--rv-muted);
	margin: 6px 0 0;
}

.ricos-v-input {
	width: 100%;
	/* 16px minimum, or iOS Safari zooms the page on focus */
	font-size: 16px !important;
	padding: 12px 14px !important;
	border: 1px solid var(--rv-line) !important;
	border-radius: 10px !important;
	background: var(--rv-bg) !important;
	color: var(--rv-ink) !important;
}

.ricos-v-input:focus,
.ricos-v-input:focus-visible {
	outline: 2px solid var(--rv-accent) !important;
	outline-offset: 1px;
	border-color: var(--rv-accent) !important;
}

.ricos-v-textarea { resize: vertical; }

.ricos-v-code-input {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* ----------------------------------------------------------------- buttons */

.ricos-v-btn {
	min-height: 48px;
	padding: 12px 22px !important;
	font-size: 1rem !important;
	font-weight: 700 !important;
	cursor: pointer;
	border: 0 !important;
	border-radius: 10px !important;
	background: var(--rv-accent) !important;
	color: var(--rv-accent-ink) !important;
	white-space: nowrap;
}

.ricos-v-btn:hover,
.ricos-v-btn:focus-visible {
	filter: brightness(1.08);
	background: var(--rv-accent) !important;
	color: var(--rv-accent-ink) !important;
}

.ricos-v-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.ricos-v-btn--block { width: 100%; }

.ricos-v-textbtn {
	background: none !important;
	border: 0 !important;
	padding: 8px 0 !important;
	color: var(--rv-accent) !important;
	font-size: 0.9rem !important;
	font-weight: 600 !important;
	text-decoration: underline;
	cursor: pointer;
}

.ricos-v-textbtn--full {
	display: block;
	width: 100%;
	text-align: left;
	margin-top: 10px;
}

.ricos-v-link { color: var(--rv-accent); font-weight: 600; }

/* ----------------------------------------------------------------- summary */

.ricos-v-summary {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	padding: 16px 0;
	border-top: 1px solid var(--rv-line);
	border-bottom: 1px solid var(--rv-line);
	margin-bottom: 20px;
	font-size: 1rem;
}

.ricos-v-summary strong { font-size: 1.5rem; }

.ricos-v-paypal { min-height: 52px; }

/* Who is actually taking the payment. Shown when the PayPal account belongs to
   a different company from the café — an unexplained name on a bank statement
   is how a sale turns into a chargeback. Informational, not a warning. */
.ricos-v-paynote{
	margin: 0 0 12px;
	font-size: 0.85rem;
	line-height: 1.5;
	color: var(--rv-muted);
}

.ricos-v-busy,
.ricos-v-note {
	background: var(--rv-soft);
	border: 1px solid var(--rv-line);
	border-radius: 10px;
	padding: 12px 14px;
	font-size: 0.9rem;
	color: var(--rv-muted);
	margin: 12px 0;
}

.ricos-v-error {
	background: #fef2f2;
	border: 1px solid #fecaca;
	border-radius: 10px;
	padding: 12px 14px;
	font-size: 0.9rem;
	color: var(--rv-bad);
	font-weight: 600;
	margin: 12px 0;
}

.ricos-v-terms {
	font-size: 0.78rem;
	color: var(--rv-muted);
	margin-top: 16px;
}

/* -------------------------------------------------------- the voucher card */

.ricos-v-card {
	border: 1px solid var(--rv-line);
	border-radius: var(--rv-radius);
	background: var(--rv-bg);
	padding: 22px;
	margin-top: 18px;
}

.ricos-v-card-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 16px;
}

.ricos-v-eyebrow {
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-weight: 700;
	color: var(--rv-muted);
	margin: 0 0 4px;
}

.ricos-v-code {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	margin: 0 0 4px;
	word-break: break-all;
}

.ricos-v-pill {
	flex-shrink: 0;
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 5px 10px;
	border-radius: 999px;
	background: #dcfce7;
	color: var(--rv-good);
}

.ricos-v-pill--spent { background: #f5f5f4; color: var(--rv-muted); }

.ricos-v-bal-label {
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--rv-muted);
	margin: 0;
}

/* The one number anyone actually came here for. */
.ricos-v-bal {
	font-size: 2.75rem;
	font-weight: 800;
	line-height: 1.05;
	margin: 2px 0 12px;
	font-variant-numeric: tabular-nums;
}

.ricos-v-meta {
	font-size: 0.88rem;
	color: var(--rv-muted);
	margin: 0 0 8px;
}

.ricos-v-meta strong { color: var(--rv-ink); }

.ricos-v-msg {
	border-left: 3px solid var(--rv-accent);
	margin: 14px 0;
	padding: 4px 0 4px 14px;
	font-style: italic;
	color: var(--rv-ink);
}

/* ----------------------------------------------------------------- history */

.ricos-v-history {
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid var(--rv-line);
}

.ricos-v-list { list-style: none; margin: 0; padding: 0; }

.ricos-v-list li {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 0;
	border-bottom: 1px solid var(--rv-line);
	font-size: 0.88rem;
	color: var(--rv-muted);
}

.ricos-v-list li:last-child { border-bottom: 0; }
.ricos-v-list strong { color: var(--rv-ink); font-variant-numeric: tabular-nums; }
.ricos-v-list em { font-style: normal; }

/* ------------------------------------------------------------------ lookup */

.ricos-v-lookup-row { display: flex; gap: 10px; }
.ricos-v-lookup-row .ricos-v-input { flex: 1 1 auto; min-width: 0; }

/* ------------------------------------------------------------------- staff */

.ricos-v-console-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-bottom: 12px;
	margin-bottom: 16px;
	border-bottom: 1px solid var(--rv-line);
}

.ricos-v-who { font-size: 0.85rem; color: var(--rv-muted); font-weight: 600; }

.ricos-v-pin-input {
	font-size: 1.5rem !important;
	letter-spacing: 0.4em;
	text-align: center;
}

.ricos-v-spend {
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid var(--rv-line);
}

.ricos-v-spend .ricos-v-label { margin-top: 12px; }
.ricos-v-spend .ricos-v-lookup-row + .ricos-v-label { margin-top: 16px; }

/* -------------------------------------------------------------------- done */

.ricos-v-done { text-align: center; padding: 28px 0; }

.ricos-v-done-code {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 1.4rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	margin: 12px 0;
}


/* ============================================================
   PRINT — the balance page is the voucher

   A gift voucher gets printed, or handed over on a phone. Printed as-is it
   would carry the site nav, the lookup form and a terrazzo background that
   eats ink. This strips it back to the card: who it's for, how much is left,
   the code, and when it runs out.
   ============================================================ */

@page{ margin:14mm; }

@media print{
	/* Everything below is gated on .ricos-printable, set by balance.js only
	   once a voucher is actually on screen. Without that gate, printing a page
	   with no voucher on it hid the nav, the form and the footer and produced a
	   genuinely blank sheet. */
	.ricos-printable .ricos-v-lookup,
	.ricos-printable .ricos-v-error,
	.ricos-printable .ricos-v-printbtn,
	.ricos-printable .ricos-v-masthead .ricos-v-banner{ display:none !important; }

	/* A voucher, not a full-page box. Narrower than the printable width so
	   there is white paper outside the cut line to actually cut along. */
	.ricos-printable .ricos-v{ max-width:150mm; margin:0 auto; font-size:11pt; color:#000; }

	.ricos-printable .ricos-v-masthead{ margin-bottom:10mm; }
	/* !important, because the layout armour added in 0.2.2 carries it too and
	   would otherwise pin the logo to its screen size on paper */
	.ricos-printable .ricos-v-logo{ max-height:22mm !important; margin:0; }
	.ricos-printable .ricos-v-banner + .ricos-v-logo{
		margin-top:0; padding:0; background:none; box-shadow:none;
	}

	/* a card, not a screen element: no shadow, a real cut line */
	.ricos-printable .ricos-v-card{
		border:1.5pt dashed #444 !important;
		border-radius:0 !important;
		box-shadow:none !important;
		padding:12mm !important;
		break-inside:avoid;
	}

	/* the two things that have to survive a bad printer */
	.ricos-printable .ricos-v-code{ font-size:20pt !important; letter-spacing:.08em; }
	.ricos-printable .ricos-v-bal{ font-size:34pt !important; }

	.ricos-printable .ricos-v-pill{
		border:1pt solid #444 !important;
		background:none !important;
		color:#000 !important;
	}

	/* spent history is for the screen; the printed voucher is the current state */
	.ricos-printable .ricos-v-history{ display:none !important; }

	/* browsers drop backgrounds by default, so say what must survive */
	*{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }
}