/* WalletPassBuilder admin: a modern skin, scoped to the plugin's page. */
.walletpb {
	--wpb-ink: #111827;
	--wpb-muted: #6b7280;
	--wpb-line: #e5e7eb;
	--wpb-soft: #f9fafb;
	--wpb-accent: #05373a;
	--wpb-lime: #c4ff73;
	--wpb-radius: 12px;
	max-width: 1280px;
	color: var(--wpb-ink);
	font-size: 14px;
}
.walletpb *, .walletpb *::before, .walletpb *::after { box-sizing: border-box; }

/* Header and tabs. */
.walletpb-header { display: flex; align-items: center; gap: 12px; margin: 8px 0 4px; }
.walletpb-header h1 { margin: 0; padding: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.walletpb-mark { width: 34px; height: 34px; flex: none; border-radius: 9px; background: url(../images/mark.svg) center / cover no-repeat; }
.walletpb-pill { margin-left: 4px; padding: 3px 10px; border-radius: 999px; background: #f3f4f6; color: var(--wpb-muted); font-size: 12px; font-weight: 600; }
.walletpb-pill-ok { background: #ecfdf5; color: #047857; }
.walletpb-pill-ok::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: #10b981; vertical-align: middle; }
.walletpb .wp-header-end { visibility: hidden; margin: 0; }
.walletpb-tabs { display: flex; gap: 4px; margin: 16px 0 20px; border-bottom: 1px solid var(--wpb-line); overflow-x: auto; scrollbar-width: none; }
.walletpb-tab { flex: none; white-space: nowrap; padding: 10px 14px; margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--wpb-muted); font-weight: 600; text-decoration: none; }
.walletpb-tab:hover { color: var(--wpb-ink); }
.walletpb-tab:focus { box-shadow: none; outline: 2px solid #2271b1; outline-offset: -2px; border-radius: 6px 6px 0 0; }
.walletpb-tab[aria-current="page"] { color: var(--wpb-ink); border-bottom-color: var(--wpb-ink); }
.walletpb .notice { margin: 0 0 16px; border-radius: 8px; }

/* Cards and panels. */
.walletpb .walletpb-card,
.walletpb-panel {
	margin: 0 0 16px;
	padding: 20px 22px;
	background: #fff;
	border: 1px solid var(--wpb-line);
	border-radius: var(--wpb-radius);
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}
.walletpb .walletpb-card h2,
.walletpb-panel h2 { margin: 0 0 4px; font-size: 15px; font-weight: 700; }
.walletpb .walletpb-card > p:first-of-type { margin-top: 6px; }
.walletpb-panel-head { margin-bottom: 16px; }
.walletpb-panel-head p { margin: 0; color: var(--wpb-muted); }
.walletpb-panel-body { display: grid; gap: 16px; }
.walletpb-help { display: block; margin-top: 6px; color: var(--wpb-muted); font-size: 12.5px; }

/* Editor layout: form on the left, a pinned preview on the right, actions along the bottom. */
.walletpb-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
.walletpb-preview-pane { position: sticky; top: 46px; padding: 18px; background: var(--wpb-soft); border: 1px solid var(--wpb-line); border-radius: var(--wpb-radius); }
.walletpb-stage { display: flex; justify-content: center; }
.walletpb-preview-pane .walletpb-help { text-align: center; }
@media (max-width: 1100px) {
	.walletpb-layout { grid-template-columns: 1fr; }
	.walletpb-preview-pane { position: static; order: -1; }
}
.walletpb-banner { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding: 12px 16px; background: #ecfdf5; border: 1px solid #a7f3d0; border-radius: var(--wpb-radius); }
.walletpb-banner > div { flex: 1; }
.walletpb-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: #10b981; box-shadow: 0 0 0 4px #d1fae5; }
.walletpb-link { font-weight: 600; text-decoration: none; }
.walletpb-actionbar {
	position: sticky;
	bottom: 0;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 8px;
	padding: 12px 16px;
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(6px);
	border: 1px solid var(--wpb-line);
	border-radius: var(--wpb-radius);
	box-shadow: 0 -4px 16px rgba(16, 24, 40, 0.06);
}
.walletpb-actionbar .walletpb-help { margin: 0; }
.walletpb-actions { display: flex; gap: 8px; }

/* Controls. */
.walletpb-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.walletpb-control { min-width: 0; }
.walletpb-label { display: block; margin-bottom: 6px; font-weight: 600; font-size: 13px; }
.walletpb input[type="text"],
.walletpb input[type="email"],
.walletpb input[type="password"],
.walletpb textarea,
.walletpb select {
	width: 100%;
	min-height: 38px;
	padding: 8px 12px;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	background: #fff;
	color: var(--wpb-ink);
	font-size: 14px;
	line-height: 1.4;
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}
.walletpb select { padding-right: 28px; }
.walletpb input[type="text"]:focus,
.walletpb input[type="email"]:focus,
.walletpb input[type="password"]:focus,
.walletpb textarea:focus,
.walletpb select:focus { border-color: var(--wpb-accent); box-shadow: 0 0 0 3px rgba(5, 55, 58, 0.15); outline: none; }
.walletpb input:disabled { background: var(--wpb-soft); color: #9ca3af; }
.walletpb-fields { display: grid; gap: 8px; }
.walletpb-field { display: grid; grid-template-columns: 2fr 3fr; gap: 8px; }

.walletpb-logo-pick { display: flex; align-items: center; gap: 12px; }
.walletpb-logo-box { display: grid; place-items: center; width: 52px; height: 52px; flex: none; border: 1px dashed #d1d5db; border-radius: 10px; background: var(--wpb-soft); overflow: hidden; }
.walletpb-logo-thumb { width: 100%; height: 100%; object-fit: contain; }
.walletpb-logo-thumb[hidden] { display: none; }

.walletpb-colour { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.walletpb-colour input[type="color"] { width: 42px; height: 38px; padding: 3px; border: 1px solid #d1d5db; border-radius: 8px; background: #fff; cursor: pointer; }
.walletpb .walletpb-colour input.walletpb-hex { width: 110px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: lowercase; }
.walletpb-swatches { display: flex; gap: 6px; }
.walletpb-swatch { width: 24px; height: 24px; padding: 0; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px #d1d5db; cursor: pointer; }
.walletpb-swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--wpb-ink); }

.walletpb-choice { display: inline-flex; justify-self: start; padding: 3px; background: #f3f4f6; border-radius: 10px; }
.walletpb-choice label { cursor: pointer; }
.walletpb-choice input { position: absolute; opacity: 0; pointer-events: none; }
.walletpb-choice span { display: block; padding: 6px 14px; border-radius: 8px; color: var(--wpb-muted); font-weight: 600; }
.walletpb-choice input:checked + span { background: #fff; color: var(--wpb-ink); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.12); }
.walletpb-choice input:focus-visible + span { outline: 2px solid #2271b1; }

.walletpb-back { display: grid; gap: 10px; }
.walletpb-back-row { display: grid; grid-template-columns: 110px minmax(0, 1fr) minmax(0, 2fr) auto; gap: 8px; align-items: start; padding: 10px; border: 1px solid var(--wpb-line); border-radius: 10px; background: var(--wpb-soft); }
.walletpb-back-row textarea { box-sizing: border-box; height: 38px; min-height: 38px; max-height: 220px; resize: none; overflow-y: hidden; }
.walletpb .walletpb-back-remove { display: inline-flex; align-items: center; align-self: start; min-height: 38px; padding: 0 8px; border: 0; background: none; color: #b91c1c; font-weight: 600; cursor: pointer; }
@media (max-width: 782px) {
	.walletpb-back-row { grid-template-columns: 1fr; }
	.walletpb-field { grid-template-columns: 1fr; }
}

/* Buttons: the plugin's own, and WordPress's inside the page. */
.walletpb-btn,
.walletpb .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 38px;
	padding: 0 16px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	text-decoration: none;
}
.walletpb-btn-primary,
.walletpb .button-primary { border: 1px solid var(--wpb-accent); background: var(--wpb-accent); color: #fff; }
.walletpb-btn-primary:hover,
.walletpb .button-primary:hover,
.walletpb .button-primary:focus { border-color: #0a4f53; background: #0a4f53; color: #fff; }
.walletpb-btn-ghost,
.walletpb .button:not(.button-primary) { border: 1px solid #d1d5db; background: #fff; color: var(--wpb-ink); }
.walletpb-btn-ghost:hover,
.walletpb .button:not(.button-primary):hover { border-color: #9ca3af; background: var(--wpb-soft); color: var(--wpb-ink); }
.walletpb-btn:focus-visible,
.walletpb .button:focus-visible { outline: 2px solid #2271b1; outline-offset: 2px; box-shadow: none; }
.walletpb #walletpb-back-add { justify-self: start; }
.walletpb .button-small { min-height: 30px; padding: 0 12px; font-size: 13px; }

/* Account, codes, tables. */
.walletpb-kv { display: grid; gap: 0; margin: 12px 0 16px; }
.walletpb-kv > div { display: grid; grid-template-columns: 180px 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid var(--wpb-line); }
.walletpb-kv > div:first-child { border-top: 0; }
.walletpb-kv dt { color: var(--wpb-muted); font-weight: 600; }
.walletpb-kv dd { margin: 0; }
.walletpb-connect { max-width: 640px; }
.walletpb-codes { display: grid; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.walletpb code { padding: 2px 6px; border-radius: 6px; background: #f3f4f6; font-size: 12.5px; }
.walletpb table.widefat { border: 1px solid var(--wpb-line); border-radius: 10px; border-collapse: separate; border-spacing: 0; overflow: hidden; box-shadow: none; }
.walletpb table.widefat thead th { padding: 10px 12px; background: var(--wpb-soft); color: var(--wpb-muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
.walletpb table.widefat td { padding: 12px; border-top: 1px solid var(--wpb-line); vertical-align: top; }
.walletpb table.widefat.striped > tbody > :nth-child(odd) { background: #fff; }
.walletpb .button-link { color: var(--wpb-accent); font-weight: 600; text-decoration: none; }
.walletpb-status { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: #f3f4f6; color: var(--wpb-muted); }
.walletpb-status-success { background: #ecfdf5; color: #047857; }
.walletpb-status-failed { background: #fef2f2; color: #b91c1c; }
.walletpb .walletpb-card label input[type="checkbox"] { margin-right: 6px; }

/* Previews: the pass as Apple Wallet and Google Wallet draw it. */
.walletpb-apple,
.walletpb-google {
	width: 260px;
	min-height: 400px;
	box-sizing: border-box;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
	display: flex;
	flex-direction: column;
	font-size: 13px;
	overflow-wrap: anywhere;
}
.walletpb-apple { padding: 14px; border-radius: 12px; gap: 16px; }
.walletpb-apple-top { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.walletpb-apple-logo { width: 30px; height: 30px; flex: none; border-radius: 4px; overflow: hidden; }
.walletpb-apple-title { font-size: 20px; font-weight: 600; line-height: 1.2; }
/* Like Wallet: each field as wide as its text, spread edge to edge with even gaps; the right one is right-aligned. */
.walletpb-apple-fields { display: flex; justify-content: space-between; gap: 12px; }
.walletpb-apple-fields > div { min-width: 0; }
.walletpb-apple-fields > div:nth-child(3) { text-align: right; }
.walletpb-apple-fields.is-measuring > div { flex: none; }
.walletpb-apple-fields.is-measuring .walletpb-pv-label,
.walletpb-apple-fields.is-measuring .walletpb-pv-value { display: inline-block; vertical-align: top; }
.walletpb-apple-fields .walletpb-pv-label,
.walletpb-apple-fields .walletpb-pv-value { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.walletpb-apple .walletpb-pv-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.75; }
.walletpb-apple .walletpb-pv-code { margin-top: auto; }

.walletpb-google { padding: 18px 16px 20px; border-radius: 22px; align-items: center; text-align: center; gap: 10px; }
.walletpb-google-logo { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; }
.walletpb-google-name { font-weight: 600; }
.walletpb-google-title { font-size: 21px; font-weight: 700; line-height: 1.2; margin-bottom: 4px; }
.walletpb-google-fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; text-align: left; margin-top: 6px; }
/* Google: three equal columns, left, centred and right. */
.walletpb-google-fields > div:nth-child(2) { text-align: center; }
.walletpb-google-fields > div:nth-child(3) { text-align: right; }
.walletpb-google .walletpb-pv-label { font-size: 10px; opacity: 0.85; }

.walletpb-logo-img { display: block; width: 100%; height: 100%; object-fit: contain; }
.walletpb-logo-initial { display: grid; place-items: center; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.2); font-weight: 700; font-size: 1.3em; }
.walletpb-logo-img[hidden],
.walletpb-logo-initial[hidden] { display: none; }
.walletpb-pv-value { font-size: 13px; }

.walletpb-pv-code { align-self: center; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.walletpb-pv-code-art { padding: 8px; background: #fff; border-radius: 6px; line-height: 0; }
.walletpb-pv-code-art:empty { display: none; }
.walletpb-qr { width: 116px; height: 116px; }
.walletpb-barcode { width: 200px; height: 52px; }
.walletpb-pv-code[data-code-type="none"] { display: none; }
.walletpb-pv-code-label { font-size: 11px; }

/* Preview switches and the four faces: only the chosen wallet and side show. */
.walletpb-pv-controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 14px; }
.walletpb-seg { display: inline-flex; padding: 2px; background: #f0f0f1; border-radius: 999px; }
.walletpb-seg-btn { border: 0; background: transparent; padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; color: #50575e; cursor: pointer; }
.walletpb-seg-btn[aria-pressed="true"] { background: #fff; color: #1d2327; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); }
.walletpb-seg-btn:focus-visible { outline: 2px solid #2271b1; outline-offset: 1px; }
.walletpb-face { display: none; }
.walletpb-stage[data-platform="apple"][data-side="front"] [data-face="apple-front"],
.walletpb-stage[data-platform="apple"][data-side="back"] [data-face="apple-back"],
.walletpb-stage[data-platform="google"][data-side="front"] [data-face="google-front"],
.walletpb-stage[data-platform="google"][data-side="back"] [data-face="google-back"] { display: flex; animation: walletpb-flip 0.25s ease-out; }
@keyframes walletpb-flip { from { transform: perspective(800px) rotateY(-12deg); opacity: 0.4; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .walletpb-stage .walletpb-face { animation: none; } }

/* Apple Wallet back: the pass details screen. */
.walletpb-apple-back { width: 260px; min-height: 400px; box-sizing: border-box; padding: 14px; border-radius: 12px; background: #f2f2f7; color: #1d2327; flex-direction: column; gap: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); font-size: 13px; }
.walletpb-mini.walletpb-apple { width: 124px; min-height: 0; margin: 0 auto; padding: 8px; gap: 6px; border-radius: 8px; font-size: 8px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); }
.walletpb-mini .walletpb-apple-logo { width: 14px; height: 14px; }
.walletpb-mini .walletpb-apple-title { font-size: 11px; }
.walletpb-ios-title { text-align: center; font-weight: 700; font-size: 16px; overflow-wrap: anywhere; }
.walletpb-ios-card { background: #fff; border-radius: 12px; overflow: hidden; }
.walletpb-ios-card[hidden] { display: none; }
.walletpb-ios-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 12px; }
.walletpb-ios-row + .walletpb-ios-row { border-top: 1px solid #e5e5ea; }
.walletpb-ios-section { flex-wrap: wrap; align-items: baseline; }
.walletpb-ios-switch { position: relative; width: 36px; height: 21px; flex: none; border-radius: 999px; background: #34c759; }
.walletpb-ios-switch::after { content: ""; position: absolute; right: 2px; top: 2px; width: 17px; height: 17px; border-radius: 50%; background: #fff; }
.walletpb-ios-remove { padding: 9px 12px; color: #d63638; font-weight: 600; }
.walletpb-back-link { color: #0a84ff; overflow-wrap: anywhere; }
.walletpb-back-text { color: #646970; white-space: pre-line; overflow-wrap: anywhere; }

/* Google Wallet back: the Details sheet. */
.walletpb-google-back { width: 260px; min-height: 400px; box-sizing: border-box; padding: 18px; border-radius: 22px; background: #fff; color: #1d2327; flex-direction: column; gap: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); font-size: 13px; }
.walletpb-gd-heading { font-size: 16px; font-weight: 700; }
.walletpb-gd-logo { width: 36px; height: 36px; border-radius: 50%; overflow: hidden; color: #1d2327; }
.walletpb-gd-logo .walletpb-logo-initial { background: #f0f0f1; }
.walletpb-gd-title { font-size: 20px; font-weight: 700; overflow-wrap: anywhere; }
.walletpb-gd-item { margin-top: 10px; }
.walletpb-gd-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.walletpb-gd-section { font-weight: 700; }
.walletpb-gd-note { margin: auto 0 0; padding-top: 12px; border-top: 1px solid #e5e5ea; font-size: 11px; color: #646970; }
.walletpb-pass-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.walletpb-pass-link:hover code { background: #e5e7eb; }
.walletpb-credits { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.walletpb-low { color: #b45309; font-weight: 600; }
.walletpb-kv dd { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 600px) {
	.walletpb-kv > div { grid-template-columns: 1fr; gap: 2px; }
	.walletpb-header h1 { font-size: 18px; }
}
.walletpb-card-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin-bottom: 12px; }
.walletpb .walletpb-card-head h2 { margin: 0; }
.walletpb-btn-text { padding: 6px 4px; border: 0; background: none; color: var(--wpb-muted); font-weight: 600; cursor: pointer; }
.walletpb-btn-text:hover { color: var(--wpb-ink); text-decoration: underline; }
.walletpb-btn-text[hidden] { display: none; }

/* Template switcher (Generic Pass / LatePoint bookings) and booking details. */
.walletpb-templates { display: inline-flex; margin: 0 0 16px; }
.walletpb-templates a { display: block; padding: 7px 16px; border-radius: 8px; color: var(--wpb-muted); font-weight: 600; text-decoration: none; }
.walletpb-templates a[aria-current="page"] { background: #fff; color: var(--wpb-ink); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.12); }
.walletpb-templates a:focus { box-shadow: none; outline: 2px solid #2271b1; }
.walletpb-banner-off { background: #fffbeb; border-color: #fde68a; }
.walletpb-with-insert { display: flex; gap: 6px; align-items: flex-start; min-width: 0; width: 100%; }
.walletpb-with-insert > input,
.walletpb-with-insert > textarea { flex: 1; min-width: 0; }
.walletpb .walletpb-insert { flex: none; width: auto; max-width: 104px; padding: 0 22px 0 8px; background-color: #ecfdf5; border-color: #a7f3d0; color: #065f46; font-size: 12.5px; font-weight: 600; cursor: pointer; }

/* Integrations: compact cards with a switch, the setup as a checklist. */
.walletpb-int-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 0 0 16px; padding: 10px 16px; border: 1px solid var(--wpb-line); border-radius: var(--wpb-radius); background: var(--wpb-soft); color: var(--wpb-muted); }
.walletpb-int-bar strong { color: var(--wpb-ink); }
.walletpb-int-bar strong.walletpb-low { color: #b45309; }
.walletpb-int-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 16px; align-items: start; }
.walletpb-int { margin: 0; }
.walletpb-int-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.walletpb-int-head h2 { margin: 0; font-size: 16px; }
.walletpb-int-tagline { margin: 2px 0 0; color: var(--wpb-muted); }
.walletpb-int-stats { display: grid; gap: 2px; margin: 14px 0 0; font-weight: 600; }
.walletpb-int-stats .walletpb-link { margin-left: 4px; font-weight: 600; }
.walletpb-int-sep { color: #d1d5db; }
.walletpb-int-subhead { margin: 16px 0 6px; color: var(--wpb-muted); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.walletpb-int-where { display: grid; gap: 6px; margin: 0 0 16px; padding: 0; list-style: none; }
.walletpb-int-where li { display: flex; align-items: flex-start; gap: 8px; margin: 0; }
.walletpb-check { flex: none; width: 16px; height: 16px; margin-top: 2px; border-radius: 50%; background: #10b981 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; }
.walletpb-check.is-todo { border: 2px solid #d1d5db; background: #fff; }
.walletpb-int-note { color: var(--wpb-muted); font-size: 12px; }
.walletpb-int-block { display: block; margin-top: 2px; }
.walletpb-chip { padding: 2px 6px; border-radius: 6px; background: #f3f4f6; font-size: 12px; }
.walletpb-int .walletpb-btn-text { padding: 0 2px; font-size: 13px; }
.walletpb-int-off { margin: 14px 0 0; color: var(--wpb-muted); }
.walletpb-int-how { margin-top: 14px; border-top: 1px solid var(--wpb-line); padding-top: 10px; }
.walletpb-int-how summary { color: var(--wpb-muted); font-weight: 600; cursor: pointer; }
.walletpb-int-how p { margin: 8px 0 0; color: var(--wpb-muted); }
.walletpb-int-more { margin: 16px 2px 0; color: var(--wpb-muted); }

/* The switch is a submit button, so it works without JavaScript. */
.walletpb-switch-form { margin: 0; }
.walletpb-switch { display: inline-flex; align-items: center; gap: 8px; padding: 2px; border: 0; background: none; color: var(--wpb-muted); font-weight: 600; cursor: pointer; }
.walletpb-switch-track { position: relative; width: 40px; height: 22px; border-radius: 999px; background: #d1d5db; transition: background 0.15s; }
.walletpb-switch-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); transition: transform 0.15s; }
.walletpb-switch[aria-checked="true"] { color: #047857; }
.walletpb-switch[aria-checked="true"] .walletpb-switch-track { background: #10b981; }
.walletpb-switch[aria-checked="true"] .walletpb-switch-track::after { transform: translateX(18px); }
.walletpb-switch:focus-visible { outline: 2px solid #2271b1; outline-offset: 2px; border-radius: 999px; }
@media (prefers-reduced-motion: reduce) { .walletpb-switch-track, .walletpb-switch-track::after { transition: none; } }
@media (max-width: 600px) { .walletpb-int-grid { grid-template-columns: 1fr; } }
.walletpb-int-empty { max-width: 720px; }
.walletpb-int-empty h2 { margin: 0; font-size: 18px; }
.walletpb-int-list { display: grid; gap: 0; margin: 16px 0; padding: 0; list-style: none; }
.walletpb-int-list li { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0; padding: 12px 0; border-top: 1px solid var(--wpb-line); }
.walletpb-int-list li:first-child { border-top: 0; }
.walletpb-int-list strong { display: block; }
.walletpb-int-list span { color: var(--wpb-muted); }

/* The header: a small line above the pass title, as both wallets draw it. Hidden when empty.
   The faces space their parts with a gap, so the title is pulled up to sit right under it. */
.walletpb-pass-header { font-size: 10px; font-weight: 600; letter-spacing: 0.04em; line-height: 1.2; text-transform: uppercase; opacity: 0.85; }
.walletpb-pass-header:empty { display: none; }
.walletpb-apple > .walletpb-pass-header + .walletpb-apple-title { margin-top: -13px; }
.walletpb-mini > .walletpb-pass-header { font-size: 7px; }
.walletpb-mini > .walletpb-pass-header + .walletpb-apple-title { margin-top: -5px; }
.walletpb-google-header { margin-top: 12px; }
.walletpb-google-header + .walletpb-google-title { margin-top: 2px; }

/* Brand on one row: name, logo, colour (wrapping on narrow screens). */
.walletpb-brand-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 20px; margin-bottom: 6px; }
.walletpb-brand-row .walletpb-control { margin: 0; }
.walletpb-brand-name { flex: 1 1 200px; min-width: 0; }
.walletpb-brand-logo { flex: 0 0 auto; }
.walletpb-brand-colour { flex: 0 1 auto; min-width: 0; }
.walletpb-brand-logo .walletpb-logo-pick { gap: 8px; }
.walletpb-brand-logo .walletpb-logo-box { width: 38px; height: 38px; border-radius: 8px; }
.walletpb-brand-colour .walletpb-colour { gap: 8px; }
.walletpb .walletpb-brand-colour .walletpb-colour input.walletpb-hex { width: 88px; }
.walletpb-brand-colour .walletpb-swatches { flex-wrap: wrap; gap: 4px; }
.walletpb-brand-colour .walletpb-swatch { width: 20px; height: 20px; }

/* Advanced: the wide image and reminders. */
.walletpb-strip-box { position: relative; width: 188px; aspect-ratio: 1125 / 294; flex: none; padding: 0; border: 1px dashed #d1d5db; border-radius: 8px; background: var(--wpb-soft); overflow: hidden; cursor: pointer; }
.walletpb-strip-box:disabled { cursor: default; }
.walletpb-strip-empty { position: absolute; top: 50%; left: 50%; width: 24px; height: 24px; font-size: 24px; color: #9ca3af; transform: translate(-50%, -50%); }
.walletpb-strip-empty[hidden] { display: none; }
.walletpb .walletpb-btn[hidden] { display: none; }
.walletpb-strip-box:focus-visible { outline: 2px solid var(--wpb-accent, #2271b1); outline-offset: 2px; }
.walletpb-strip-actions { display: flex; align-items: center; gap: 8px; }
.walletpb-reminders { display: grid; gap: 10px; }
.walletpb-check-label { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; cursor: pointer; }
.walletpb-reminder-more { display: grid; gap: 6px; margin: 6px 0 0 24px; max-width: 420px; }
.walletpb-reminder-more[hidden] { display: none; }
.walletpb-places { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.walletpb-places:empty { display: none; }
.walletpb-place { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0; padding: 8px 10px; border: 1px solid var(--wpb-line); border-radius: 8px; background: #fff; }
.walletpb-place-search { position: relative; }
.walletpb-place-results { position: absolute; z-index: 10; top: 100%; left: 0; right: 0; margin: 4px 0 0; padding: 4px; list-style: none; border: 1px solid var(--wpb-line); border-radius: 8px; background: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); }
.walletpb-place-results[hidden] { display: none; }
.walletpb-place-results li { margin: 0; }
.walletpb-place-option { display: block; width: 100%; padding: 8px 10px; border: 0; border-radius: 6px; background: none; text-align: left; cursor: pointer; }
.walletpb-place-option:hover, .walletpb-place-option:focus { background: var(--wpb-soft); }
.walletpb-place-empty { padding: 8px 10px; color: var(--wpb-muted); }
/* The image in the preview: under the top row on Apple, at the bottom on Google. Both show
   Apple's strip shape, which is what the site crops the image to. */
.walletpb-apple-strip, .walletpb-google-hero { position: relative; flex: none; aspect-ratio: 1125 / 294; overflow: hidden; }
.walletpb-apple-strip { align-self: stretch; margin: 0 -14px; }
.walletpb-google-hero { align-self: stretch; margin: 6px -16px -20px; border-radius: 0 0 22px 22px; }
/* The default crop is the middle of the image; a chosen crop sets the size and offsets inline. */
[data-strip] { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
[data-strip][hidden], .walletpb-apple-strip[hidden], .walletpb-google-hero[hidden] { display: none; }
[data-strip][style*="width"] { object-fit: fill; }

/* Adjusting the image. */
.walletpb-cropper { width: min(640px, calc(100vw - 32px)); padding: 20px; border: 0; border-radius: 14px; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.25); box-sizing: border-box; }
.walletpb-cropper::backdrop { background: rgba(15, 23, 42, 0.55); }
.walletpb-cropper-title { margin: 0 0 4px; font-size: 16px; }
.walletpb-cropper-stage { position: relative; margin: 14px 0; border-radius: 10px; background: #0f172a; overflow: hidden; cursor: grab; touch-action: none; user-select: none; }
.walletpb-cropper-stage.is-dragging { cursor: grabbing; }
.walletpb-cropper-stage:focus-visible { outline: 2px solid var(--wpb-accent, #2271b1); outline-offset: 2px; }
.walletpb-cropper-stage img { position: absolute; max-width: none; pointer-events: none; }
.walletpb-cropper-frame { position: absolute; border: 2px solid #fff; border-radius: 4px; box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.6); pointer-events: none; box-sizing: border-box; }
.walletpb-cropper-zoom { display: flex; align-items: center; gap: 12px; font-weight: 600; }
.walletpb-cropper-zoom input { flex: 1; }
.walletpb-cropper-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 16px; }
.walletpb-cropper-actions > span { display: flex; gap: 8px; }
.walletpb .walletpb-place-search .walletpb-input,
.walletpb .walletpb-reminder-more .walletpb-input { width: 100%; max-width: none; }

/* Help: quick answers and the message form. */
.walletpb-help { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; align-items: start; }
.walletpb-help .walletpb-card { margin: 0; }
.walletpb-faq { border-top: 1px solid var(--wpb-line); }
.walletpb-faq:first-of-type { margin-top: 12px; }
.walletpb-faq summary { padding: 12px 0; font-weight: 600; cursor: pointer; }
.walletpb-faq p { margin: 0 0 12px; color: var(--wpb-muted); }
.walletpb-help-other { margin: 0; padding-top: 12px; border-top: 1px solid var(--wpb-line); }
.walletpb-support-form label:not(.walletpb-check-label) { display: block; margin-bottom: 4px; font-weight: 600; }
.walletpb .walletpb-support-form .walletpb-input { width: 100%; max-width: none; }
.walletpb-diagnostics { margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--wpb-line); border-radius: 8px; background: var(--wpb-soft); }
.walletpb-diagnostics summary { cursor: pointer; font-weight: 600; }
.walletpb-diagnostics dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 10px 0; }
.walletpb-diagnostics dt { color: var(--wpb-muted); }
.walletpb-diagnostics dd { margin: 0; overflow-wrap: anywhere; }
.walletpb-file { display: block; width: 100%; margin-bottom: 4px; }
.walletpb-shots { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.walletpb-shots:empty { display: none; }
.walletpb-shot { position: relative; }
.walletpb-shots img { display: block; width: 72px; height: 72px; border: 1px solid var(--wpb-line); border-radius: 8px; object-fit: cover; }
.walletpb-shot-remove { position: absolute; top: -7px; right: -7px; display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 2px solid #fff; border-radius: 50%; background: var(--wpb-ink); color: #fff; font-size: 14px; line-height: 1; cursor: pointer; }
.walletpb-shot-remove:hover, .walletpb-shot-remove:focus-visible { background: #b91c1c; }

.walletpb-btn-text[hidden] { display: none; }

/* Hero image cards: the main image, the variations (numbered in the order they're checked) and
   "+ Add a variation". */
.walletpb-hero-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 12px; margin: 0 0 8px; padding: 0; list-style: none; counter-reset: walletpb-hero; }
.walletpb-hero-card, .walletpb-hero-add { position: relative; margin: 0; }
.walletpb-hero-add[hidden] { display: none; }
.walletpb-hero-open, #walletpb-hero-add { display: flex; flex-direction: column; gap: 6px; box-sizing: border-box; width: 100%; height: 100%; padding: 8px 8px 10px; border: 1px solid var(--wpb-line); border-radius: 10px; background: #fff; color: var(--wpb-ink); font: inherit; text-align: left; cursor: pointer; }
.walletpb-hero-open:hover, #walletpb-hero-add:hover { border-color: #9ca3af; }
.walletpb-hero-open:focus-visible, #walletpb-hero-add:focus-visible { outline: 2px solid var(--wpb-accent); outline-offset: 2px; }
.walletpb-hero-open .walletpb-strip-box { width: 100%; border-style: solid; cursor: inherit; }
.walletpb-hero-label { font-size: 13px; line-height: 1.35; overflow-wrap: anywhere; }
.walletpb-hero-label strong { font-weight: 700; }
.walletpb-hero-label em { color: var(--wpb-muted); }
.is-main .walletpb-hero-label { font-weight: 600; }
.walletpb-hero-sub { margin-top: -4px; color: var(--wpb-muted); font-size: 12px; }
.walletpb-hero-card[data-card="rule"] { counter-increment: walletpb-hero; cursor: grab; }
.walletpb-hero-card[data-card="rule"] .walletpb-hero-open::before { content: counter(walletpb-hero); position: absolute; z-index: 1; top: 14px; left: 14px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: rgba(17, 24, 39, 0.8); color: #fff; font-size: 11px; font-weight: 700; }
.walletpb-hero-card.is-dragging { opacity: 0.4; }
#walletpb-hero-add { align-items: center; justify-content: center; min-height: 100px; border-style: dashed; background: var(--wpb-soft); text-align: center; }
.walletpb-hero-plus { font-size: 22px; line-height: 1; color: var(--wpb-accent); }
#walletpb-hero-add .walletpb-hero-label { font-weight: 600; }
#walletpb-hero-add .walletpb-hero-sub { margin-top: 0; }
[data-card-img], [data-ed-img] { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
[data-card-img][style*="width"], [data-ed-img][style*="width"] { object-fit: fill; }
[data-card-img][hidden], [data-ed-img][hidden] { display: none; }

/* The card editor. */
.walletpb-hero-editor { width: min(560px, calc(100vw - 32px)); }
.walletpb-hero-editor-image { display: grid; gap: 10px; margin: 14px 0; }
.walletpb-hero-editor-image .walletpb-strip-box { width: 100%; border-style: solid; cursor: default; }
.walletpb-hero-when { margin: 0 0 6px; padding: 0; border: 0; }
.walletpb-hero-when[hidden] { display: none; }
.walletpb-hero-when legend { margin-bottom: 6px; padding: 0; font-weight: 600; }
.walletpb-hero-when-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr) minmax(0, 1.4fr); gap: 8px; margin-bottom: 6px; }
.walletpb .walletpb-hero-when .walletpb-input { width: 100%; max-width: none; }
@media (max-width: 600px) { .walletpb-hero-when-row { grid-template-columns: 1fr; } }
.walletpb-hero-ed-left { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
[data-ed-order][hidden] { display: none; }
.walletpb .walletpb-danger { color: #b91c1c; }
.walletpb .walletpb-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }