/**
 * HG Manual Crypto Payment Gateway — storefront styles.
 * Shared by the classic checkout, the Checkout Block, the thank-you page and My Account.
 * Theme-friendly: text inherits from the theme, surfaces are translucent so it works on light and dark.
 * Override any --hg-crypto-* variable from your theme to re-brand.
 */

.hg-crypto {
	--hg-crypto-accent: #2563eb;
	--hg-crypto-accent-soft: rgba(37, 99, 235, .12);
	--hg-crypto-danger: #dc2626;
	--hg-crypto-warn: #d97706;
	--hg-crypto-ok: #16a34a;
	--hg-crypto-surface: rgba(127, 127, 127, .07);
	--hg-crypto-border: rgba(127, 127, 127, .30);
	--hg-crypto-radius: 12px;
	--hg-crypto-pop-bg: #fff;
	--hg-crypto-pop-fg: #0f172a;

	position: relative;
	width: 100%;
	box-sizing: border-box;
	text-align: left;
	font-size: 15px;
	line-height: 1.5;
}
.hg-crypto *, .hg-crypto *::before, .hg-crypto *::after { box-sizing: border-box; }
.hg-crypto [hidden] { display: none !important; }

.hg-crypto__desc { margin: 0 0 16px; opacity: .85; }
.hg-crypto__field { margin: 0 0 16px; }
.hg-crypto__label { display: block; margin: 0 0 6px; font-weight: 600; font-size: 14px; }
.hg-crypto__req { color: var(--hg-crypto-danger); }
.hg-crypto__empty { padding: 14px 16px; border: 1px dashed var(--hg-crypto-border); border-radius: var(--hg-crypto-radius); opacity: .8; }

/* ---------- Logos ---------- */
.hg-crypto-logo { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 50%; object-fit: contain; background: #fff; border: 1px solid rgba(127,127,127,.25); padding: 2px; }
.hg-crypto-logo--ph { display: inline-block; background: linear-gradient(135deg, #cbd5e1, #94a3b8); border: 0; padding: 0; }
.hg-crypto-logo--lg { width: 40px; height: 40px; flex-basis: 40px; }

/* ---------- Custom select ---------- */
.hg-crypto-select { position: relative; z-index: 20; }
.hg-crypto-select__trigger {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	width: 100%; min-height: 52px; padding: 10px 14px; margin: 0;
	background: var(--hg-crypto-surface); color: inherit; font: inherit; text-align: left;
	border: 1px solid var(--hg-crypto-border); border-radius: var(--hg-crypto-radius);
	cursor: pointer; transition: border-color .15s, box-shadow .15s;
}
.hg-crypto-select__trigger:hover { border-color: var(--hg-crypto-accent); }
.hg-crypto-select__trigger:focus-visible,
.hg-crypto-select.is-open .hg-crypto-select__trigger { outline: 0; border-color: var(--hg-crypto-accent); box-shadow: 0 0 0 3px var(--hg-crypto-accent-soft); }
.hg-crypto-select__value { display: flex; align-items: center; gap: 12px; min-width: 0; font-weight: 600; }
.hg-crypto-select__value.is-placeholder { font-weight: 400; opacity: .6; }
.hg-crypto-select__chevron { flex: 0 0 auto; width: 18px; height: 18px; transition: transform .2s; }
.hg-crypto-select__chevron svg { width: 100%; height: 100%; }
.hg-crypto-select.is-open .hg-crypto-select__chevron { transform: rotate(180deg); }

.hg-crypto-select__list {
	position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 9999;
	max-height: 260px; overflow-y: auto; margin: 0; padding: 6px; list-style: none;
	background: var(--hg-crypto-pop-bg); color: var(--hg-crypto-pop-fg);
	border: 1px solid rgba(15,23,42,.12); border-radius: var(--hg-crypto-radius);
	box-shadow: 0 16px 40px rgba(15,23,42,.22);
}
.hg-crypto-select__option {
	display: flex; align-items: center; gap: 12px; margin: 0; padding: 10px 12px;
	border-radius: 8px; cursor: pointer; font-weight: 500;
}
.hg-crypto-select__option:hover, .hg-crypto-select__option:focus { outline: 0; background: #eff4ff; }
.hg-crypto-select__option.is-selected { background: var(--hg-crypto-accent-soft); color: var(--hg-crypto-accent); }

/* ---------- Payment panel ---------- */
.hg-crypto-panel {
	margin: 0 0 18px; padding: 18px; background: var(--hg-crypto-surface);
	border: 1px solid var(--hg-crypto-border); border-radius: var(--hg-crypto-radius);
}
.hg-crypto-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.hg-crypto-asset { display: flex; align-items: center; gap: 12px; min-width: 0; }
.hg-crypto-asset__name { margin: 0; font-size: 17px; font-weight: 700; word-break: break-word; }

.hg-crypto-timer {
	display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px;
	font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
	color: var(--hg-crypto-accent); background: var(--hg-crypto-accent-soft); border-radius: 999px;
}
.hg-crypto-timer svg { width: 14px; height: 14px; }
.hg-crypto-timer.is-warning { color: var(--hg-crypto-warn); background: rgba(217,119,6,.14); }
.hg-crypto-timer.is-expired { color: var(--hg-crypto-danger); background: rgba(220,38,38,.14); }

.hg-crypto-progress { height: 4px; margin: 14px 0 4px; background: var(--hg-crypto-border); border-radius: 999px; overflow: hidden; }
.hg-crypto-progress > span { display: block; height: 100%; width: 100%; background: var(--hg-crypto-accent); border-radius: inherit; transition: width 1s linear, background-color .3s; }
.hg-crypto-progress.is-warning > span { background: var(--hg-crypto-warn); }
.hg-crypto-progress.is-expired > span { background: var(--hg-crypto-danger); }

.hg-crypto-step { margin-top: 18px; }
.hg-crypto-step__title { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 13px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; opacity: .75; }
.hg-crypto-step__num {
	display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px;
	font-size: 11px; color: #fff; background: var(--hg-crypto-accent); border-radius: 50%; opacity: 1;
}

.hg-crypto-copyrow { display: flex; align-items: stretch; gap: 8px; }
.hg-crypto-value {
	flex: 1 1 auto; min-width: 0; padding: 10px 12px; margin: 0;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 14px;
	word-break: break-all; background: rgba(127,127,127,.10); border-radius: 8px; color: inherit; display: block;
}
.hg-crypto-value--amount { font-size: 20px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.hg-crypto-value.is-loading { opacity: .6; font-weight: 500; font-size: 15px; font-family: inherit; }
.hg-crypto-value.is-error { color: var(--hg-crypto-danger); font-size: 14px; font-weight: 500; font-family: inherit; }

.hg-crypto-copy {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: 0 0 auto;
	min-width: 84px; padding: 0 12px; margin: 0; font: inherit; font-size: 13px; font-weight: 600; line-height: 1;
	color: var(--hg-crypto-accent); background: transparent;
	border: 1px solid var(--hg-crypto-accent); border-radius: 8px; cursor: pointer; transition: background .15s, color .15s;
}
.hg-crypto-copy:hover { background: var(--hg-crypto-accent); color: #fff; }
.hg-crypto-copy:disabled { opacity: .4; cursor: not-allowed; background: transparent; color: var(--hg-crypto-accent); }
.hg-crypto-copy svg { width: 15px; height: 15px; }
.hg-crypto-copy.is-copied { color: #fff; background: var(--hg-crypto-ok); border-color: var(--hg-crypto-ok); }

.hg-crypto-hint { margin: 6px 0 0; font-size: 12.5px; opacity: .7; }
.hg-crypto-notice {
	display: flex; gap: 10px; align-items: flex-start; margin: 10px 0 0; padding: 10px 12px;
	font-size: 13px; color: #7c2d12; background: #fff7ed; border: 1px solid #fed7aa; border-left: 4px solid var(--hg-crypto-warn); border-radius: 8px;
}
.hg-crypto-notice svg { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; color: var(--hg-crypto-warn); }

.hg-crypto-qr { display: flex; justify-content: center; margin-top: 14px; }
.hg-crypto-qr__box { padding: 10px; line-height: 0; background: #fff; border: 1px solid rgba(15,23,42,.12); border-radius: 12px; }
.hg-crypto-qr__box img, .hg-crypto-qr__box canvas { max-width: 100%; height: auto; }

.hg-crypto-link {
	padding: 0; margin: 0; font: inherit; font-size: 13px; font-weight: 600; text-decoration: underline;
	color: var(--hg-crypto-accent); background: none; border: 0; cursor: pointer;
}

/* ---------- TXID input ---------- */
.hg-crypto-input {
	display: block; width: 100%; min-height: 50px; padding: 10px 14px; margin: 0; font: inherit; color: inherit;
	background: var(--hg-crypto-surface); border: 1px solid var(--hg-crypto-border); border-radius: var(--hg-crypto-radius);
	transition: border-color .15s, box-shadow .15s;
}
.hg-crypto-input:focus { outline: 0; border-color: var(--hg-crypto-accent); box-shadow: 0 0 0 3px var(--hg-crypto-accent-soft); }
.hg-crypto-input.is-invalid { border-color: var(--hg-crypto-danger); box-shadow: 0 0 0 3px rgba(220,38,38,.12); }

.hg-crypto-error { margin: 12px 0 0; padding: 10px 12px; font-size: 14px; color: var(--hg-crypto-danger); background: rgba(220,38,38,.08); border: 1px solid rgba(220,38,38,.3); border-radius: 8px; }

/* ---------- Order details (thank-you / My Account) ---------- */
.hg-crypto-order {
	margin: 24px 0; padding: 18px 20px; background: var(--hg-crypto-surface);
	border: 1px solid var(--hg-crypto-border); border-radius: var(--hg-crypto-radius);
}
.hg-crypto-order__title { margin: 0 0 12px; font-size: 18px; }
.hg-crypto-order__row { display: flex; align-items: center; gap: 10px; margin: 8px 0; flex-wrap: wrap; }
.hg-crypto-order__label { min-width: 150px; font-weight: 600; opacity: .75; }
.hg-crypto-order__status { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 4px 12px; font-size: 13px; font-weight: 600; color: var(--hg-crypto-warn); background: rgba(217,119,6,.12); border-radius: 999px; }

/* ---------- Theme isolation ----------
 * Higher-specificity restatement of the interactive controls so Bootstrap, Elementor, Astra,
 * Divi, Woodmart… button/input/list rules can't restyle them. No framework classes are used. */
.hg-crypto button, .hg-crypto input, .hg-crypto ul, .hg-crypto li, .hg-crypto h4, .hg-crypto p, .hg-crypto output, .hg-crypto code { text-transform: none; letter-spacing: normal; text-shadow: none; float: none; }
.hg-crypto ul, .hg-crypto li { list-style: none; }
.hg-crypto ul { margin: 0; padding: 6px; }
.hg-crypto li::marker { content: none; }
.hg-crypto h4 { padding: 0; line-height: 1.3; color: inherit; }
.hg-crypto code, .hg-crypto output { font-weight: inherit; border: 0; }
.hg-crypto button { -webkit-appearance: none; appearance: none; height: auto; width: auto; box-shadow: none; font-family: inherit; }
.hg-crypto .hg-crypto-select__trigger { width: 100%; background: var(--hg-crypto-surface); color: inherit; border: 1px solid var(--hg-crypto-border); border-radius: var(--hg-crypto-radius); font-size: 15px; font-weight: 600; line-height: 1.4; }
.hg-crypto .hg-crypto-select__trigger:hover { background: var(--hg-crypto-surface); color: inherit; }
.hg-crypto .hg-crypto-copy { width: auto; line-height: 1; color: var(--hg-crypto-accent); background: transparent; border: 1px solid var(--hg-crypto-accent); border-radius: 8px; text-decoration: none; }
.hg-crypto .hg-crypto-copy:hover:not(:disabled) { color: #fff; background: var(--hg-crypto-accent); }
.hg-crypto .hg-crypto-copy.is-copied { color: #fff; background: var(--hg-crypto-ok); border-color: var(--hg-crypto-ok); }
.hg-crypto .hg-crypto-link { width: auto; padding: 0; color: var(--hg-crypto-accent); background: none; border: 0; text-decoration: underline; }
.hg-crypto .hg-crypto-link:hover { color: var(--hg-crypto-accent); background: none; }
.hg-crypto input.hg-crypto-input { width: 100%; height: auto; color: inherit; background: var(--hg-crypto-surface); border: 1px solid var(--hg-crypto-border); border-radius: var(--hg-crypto-radius); box-shadow: none; }
.hg-crypto input.hg-crypto-input:focus { border-color: var(--hg-crypto-accent); box-shadow: 0 0 0 3px var(--hg-crypto-accent-soft); }
.hg-crypto input.hg-crypto-input.is-invalid { border-color: var(--hg-crypto-danger); }
.hg-crypto .hg-crypto-select__option { color: var(--hg-crypto-pop-fg); }

@media (max-width: 480px) {
	.hg-crypto-panel { padding: 14px; }
	.hg-crypto-value--amount { font-size: 18px; }
	.hg-crypto-copyrow { flex-wrap: wrap; }
	.hg-crypto-copy { width: 100%; min-height: 40px; }
	.hg-crypto-order__label { min-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
	.hg-crypto * { transition: none !important; }
}