/*
 * GCash Payments for ARMember: the GCash panel inside ARMember's membership
 * form, and the payment status shortcodes.
 * Mobile-first. Every selector is scoped under .gcpa-checkout so theme and
 * ARMember styles do not leak in and these styles do not leak out.
 * Colours can be changed by overriding the custom properties below in your
 * child theme. When NeonLock is active its accent colours are used.
 */
.gcpa-checkout,
.gcpa-form {
	--gcpa-accent: var(--nl-c1, #0a5cd6);
	--gcpa-accent-2: var(--nl-c2, #3d8bff);
	--gcpa-surface: #0b1022;
	--gcpa-surface-2: #121a33;
	--gcpa-line: #2f3d66;
	--gcpa-text: #f2f5ff;
	--gcpa-muted: #a9b6dc;
	--gcpa-error: #ff8fa8;
	--gcpa-ok: #3ddc97;
	--gcpa-warn: #f0b45a;
	--gcpa-radius: 16px;

	box-sizing: border-box;
	width: 100%;
	max-width: 480px;
	margin: 0 auto;
	color: var(--gcpa-text);
	font-size: 16px;
	line-height: 1.5;
	text-align: left;
}
.gcpa-checkout *,
.gcpa-checkout *::before,
.gcpa-checkout *::after { box-sizing: border-box; }
.gcpa-checkout p,
.gcpa-checkout h3,
.gcpa-checkout ol,
.gcpa-checkout ul,
.gcpa-checkout dl,
.gcpa-checkout dd,
.gcpa-checkout fieldset,
.gcpa-checkout figure { margin: 0; padding: 0; }
.gcpa-checkout fieldset { border: 0; min-width: 0; }
.gcpa-checkout [hidden] { display: none !important; }
.gcpa-checkout img { display: block; max-width: 100%; height: auto; }

/* Panel inside ARMember's payment section */
.gcpa-checkout.gcpa-armpanel { max-width: 100%; margin: 20px 0 12px; clear: both; }
.gcpa-armpanel .gcpa-card { margin-top: 0; }
.gcpa-armpanel[hidden] { display: none !important; }

/* Payment panel */
.gcpa-pay {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	justify-items: center;
	gap: 14px;
	padding: 18px 16px;
	border: 1px solid var(--gcpa-line);
	border-radius: var(--gcpa-radius);
	background: var(--gcpa-surface);
	text-align: center;
	min-width: 0;
}
.gcpa-pay__label { font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gcpa-muted); }
.gcpa-pay__due { display: grid; justify-items: center; gap: 6px; }
.gcpa-pay__amount { display: flex; align-items: center; gap: 10px; font-size: 2rem; font-weight: 700; line-height: 1; color: var(--gcpa-text); }

.gcpa-qr { width: min(260px, 100%); }
.gcpa-qr__zoom {
	display: block;
	width: 100%;
	padding: 12px;
	margin: 0;
	border: 0;
	border-radius: 14px;
	background: #fff;
	cursor: zoom-in;
	line-height: 0;
}
.gcpa-qr__img { width: 100%; height: auto; image-rendering: pixelated; }

.gcpa-mobile { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; font-size: 0.9rem; color: var(--gcpa-muted); }
.gcpa-mobile strong { color: var(--gcpa-text); letter-spacing: 0.03em; }

.gcpa-steps { list-style: none; display: grid; gap: 6px; width: 100%; text-align: left; font-size: 0.9rem; color: var(--gcpa-muted); }
.gcpa-steps li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; align-items: baseline; margin: 0; }
.gcpa-steps__n { text-align: right; font-variant-numeric: tabular-nums; opacity: 0.8; }
.gcpa-steps__t { min-width: 0; line-height: 1.45; }

.gcpa-notes { width: 100%; text-align: left; font-size: 0.88rem; color: var(--gcpa-muted); }
.gcpa-notes p + p { margin-top: 6px; }

/* Buttons */
.gcpa-checkout .gcpa-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 8px 16px;
	border: 1px solid var(--gcpa-line);
	border-radius: 12px;
	background: var(--gcpa-surface-2);
	color: var(--gcpa-text);
	font: inherit;
	font-size: 0.92rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.gcpa-checkout .gcpa-btn:hover { border-color: var(--gcpa-accent-2); color: var(--gcpa-text); }
.gcpa-checkout .gcpa-btn:focus-visible { outline: 2px solid var(--gcpa-accent-2); outline-offset: 2px; }
.gcpa-checkout .gcpa-btn--sm { min-height: 34px; padding: 4px 12px; font-size: 0.8rem; border-radius: 10px; }
.gcpa-checkout .gcpa-btn--block { display: flex; width: 100%; }
.gcpa-checkout .gcpa-btn.is-done { border-color: var(--gcpa-ok); color: var(--gcpa-ok); }

.gcpa-hint { font-size: 0.82rem; color: var(--gcpa-muted); }

/* Paste button and hint added under ARMember's Reference Number field */
.gcpa-checkout.gcpa-ref-tools {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	max-width: 100%;
	margin: 6px 0 4px;
}
.gcpa-ref-tools__hint { flex: 1 1 180px; font-size: 0.82rem; color: var(--gcpa-muted); line-height: 1.35; }

/* "Try again" link on the status card */
.gcpa-checkout .gcpa-submit {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 52px;
	padding: 12px 18px;
	border: 0;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--gcpa-accent), var(--gcpa-accent-2));
	color: #fff;
	font: inherit;
	font-weight: 700;
	text-decoration: none;
}
.gcpa-checkout .gcpa-submit:hover { filter: brightness(1.06); color: #fff; }

/* Status cards */
.gcpa-card {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 12px;
	margin-top: 14px;
	padding: 18px;
	border: 1px solid var(--gcpa-line);
	border-radius: var(--gcpa-radius);
	background: var(--gcpa-surface);
	text-align: center;
}
.gcpa-card__title { font-size: 1.25rem; font-weight: 700; line-height: 1.25; color: var(--gcpa-text); }
.gcpa-card__text { color: var(--gcpa-muted); }
.gcpa-pill {
	justify-self: center;
	display: inline-block;
	padding: 3px 12px;
	border: 1px solid var(--gcpa-warn);
	border-radius: 999px;
	color: var(--gcpa-warn);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}
.gcpa-status--approved .gcpa-pill,
.gcpa-pill--approved { border-color: var(--gcpa-ok); color: var(--gcpa-ok); }
.gcpa-status--rejected .gcpa-pill,
.gcpa-status--invalid .gcpa-pill,
.gcpa-pill--rejected,
.gcpa-pill--invalid { border-color: var(--gcpa-error); color: var(--gcpa-error); }
.gcpa-dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; text-align: left; font-size: 0.9rem; }
.gcpa-dl dt { color: var(--gcpa-muted); }
.gcpa-dl dd { overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }

/* History */
.gcpa-history__list { list-style: none; display: grid; gap: 8px; }
.gcpa-history__item { display: grid; gap: 4px; padding: 12px 14px; border: 1px solid var(--gcpa-line); border-radius: 14px; background: var(--gcpa-surface); margin: 0; }
.gcpa-history__top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.gcpa-history__plan { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.gcpa-history__meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 0.85rem; color: var(--gcpa-muted); }
.gcpa-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* Lightbox (moved to <body> while open) */
.gcpa-checkout.gcpa-lightbox { max-width: none; width: auto; margin: 0; }
.gcpa-lightbox[hidden] { display: none !important; }
.gcpa-lightbox {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: grid;
	place-items: center;
	padding: 24px;
	background: rgba(0, 0, 0, 0.85);
}
.gcpa-lightbox__img { width: min(90vw, 520px); height: auto; background: #fff; padding: 16px; border-radius: 16px; image-rendering: pixelated; }
.gcpa-lightbox .gcpa-lightbox__close {
	position: absolute;
	top: calc(12px + env(safe-area-inset-top, 0px));
	right: 12px;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.15);
	color: #fff;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
}

/*
 * Readable ARMember payment section (Settings → "Payment section style").
 * Applies only to ARMember forms that offer GCash: the panel's script adds
 * .gcpa-form to that form. ARMember sets some sizes inline, hence !important.
 */
.gcpa-form.gcpa-form .arm_setup_section_title_wrapper {
	color: var(--gcpa-text) !important;
	font-size: 1.2rem !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	letter-spacing: 0 !important;
	margin: 28px 0 12px !important;
	opacity: 1 !important;
}

/* Payment method and billing option boxes */
.gcpa-form.gcpa-form .arm_module_gateways_ul,
.gcpa-form.gcpa-form .arm_module_payment_cycle_ul {
	display: grid !important;
	gap: 10px;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}
.gcpa-form.gcpa-form .arm_module_gateways_ul > li,
.gcpa-form.gcpa-form .arm_module_payment_cycle_ul > li {
	height: auto !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
}
.gcpa-form.gcpa-form .arm_module_gateway_option,
.gcpa-form.gcpa-form .arm_module_payment_cycle_option {
	box-sizing: border-box !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100% !important;
	height: auto !important;
	min-height: 56px;
	margin: 0 !important;
	padding: 12px 16px !important;
	border: 1px solid var(--gcpa-line) !important;
	border-radius: var(--gcpa-radius) !important;
	background: var(--gcpa-surface) !important;
	cursor: pointer;
}
.gcpa-form.gcpa-form .arm_active > .arm_module_gateway_option,
.gcpa-form.gcpa-form .arm_active > .arm_module_payment_cycle_option {
	border: 2px solid var(--gcpa-accent-2) !important;
	box-shadow: 0 0 0 3px rgba(61, 139, 255, 0.18) !important;
}
.gcpa-form.gcpa-form .arm_module_gateway_option .arm_setup_check_circle,
.gcpa-form.gcpa-form .arm_module_payment_cycle_option .arm_setup_check_circle { flex: none; margin: 0 !important; }
.gcpa-form.gcpa-form .arm_module_gateway_name,
.gcpa-form.gcpa-form .arm_module_payment_cycle_name {
	height: auto !important;
	line-height: 1.3 !important;
	margin: 0 !important;
}
.gcpa-form.gcpa-form .arm_module_gateway_name,
.gcpa-form.gcpa-form .arm_module_gateway_span,
.gcpa-form.gcpa-form .arm_module_payment_cycle_name,
.gcpa-form.gcpa-form .arm_module_payment_cycle_span {
	color: var(--gcpa-text) !important;
	font-size: 1.05rem !important;
	font-weight: 700 !important;
	opacity: 1 !important;
}

/* Reference Number box: one card, the same width as the GCash panel */
.gcpa-form.gcpa-form .arm_module_gateway_fields_bank_transfer {
	margin-top: 0 !important;
	padding: 0 !important;
}
.gcpa-form.gcpa-form .arm_module_gateway_fields_bank_transfer > div,
.gcpa-form.gcpa-form .arm_module_gateway_fields.arm_module_gateway_fields_bank_transfer.arm-form-container > .arm-default-form:not(.arm_admin_member_form),
.gcpa-form.gcpa-form .arm_module_gateway_fields_bank_transfer .arm-df-wrapper,
.gcpa-form.gcpa-form .arm_module_gateway_fields_bank_transfer .arm_bank_transfer_fields_container {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
}
.gcpa-form.gcpa-form .arm_module_gateway_fields_bank_transfer .gcpa-ref-group.arm-df__form-group,
.gcpa-form.gcpa-form .gcpa-ref-group {
	box-sizing: border-box;
	display: grid !important;
	gap: 8px;
	width: 100% !important;
	margin: 0 !important;
	padding: 18px 16px !important;
	border: 1px solid var(--gcpa-line) !important;
	border-radius: var(--gcpa-radius) !important;
	background: var(--gcpa-surface) !important;
	text-align: left;
}
.gcpa-form.gcpa-form .gcpa-ref-label {
	display: block;
	margin: 0;
	color: var(--gcpa-text);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
}
.gcpa-form.gcpa-form .gcpa-ref-group .arm_form_label_wrapper,
.gcpa-form.gcpa-form .gcpa-ref-group .arm-notched-outline,
.gcpa-form.gcpa-form .gcpa-ref-group .arm_label_input_separator { display: none !important; }
.gcpa-form.gcpa-form .gcpa-ref-group .arm-df__form-field,
.gcpa-form.gcpa-form .gcpa-ref-group .arm-df__form-field-wrap { display: block !important; width: 100% !important; margin: 0 !important; }
.gcpa-form.gcpa-form .gcpa-ref-group .arm_bank_transaction_id,
.gcpa-form.gcpa-form .arm_module_gateway_fields_bank_transfer .gcpa-ref-group input.arm_bank_transaction_id.arm-df__form-control {
	box-sizing: border-box !important;
	display: block !important;
	width: 100% !important;
	height: auto !important;
	min-height: 56px;
	margin: 0 !important;
	padding: 12px 16px !important;
	border: 2px solid #4a5d99 !important;
	border-radius: 12px !important;
	background: #070a16 !important;
	background-color: #070a16 !important;
	color: #fff !important;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
	font-size: 20px !important;
	letter-spacing: 0.08em !important;
	line-height: 1.4 !important;
	box-shadow: none !important;
	opacity: 1 !important;
}
.gcpa-form.gcpa-form .gcpa-ref-group .arm_bank_transaction_id::placeholder { color: #8e9bc6 !important; opacity: 1; font-size: 16px !important; letter-spacing: 0 !important; font-family: var(--nl-body, system-ui, sans-serif) !important; }
.gcpa-form.gcpa-form .gcpa-ref-group .arm_bank_transaction_id:focus {
	outline: none !important;
	border-color: var(--gcpa-accent-2) !important;
	box-shadow: 0 0 0 3px rgba(61, 139, 255, 0.3) !important;
}
.gcpa-form.gcpa-form .arm_module_gateway_fields_bank_transfer .gcpa-ref-group input.arm_bank_transaction_id.arm-df__form-control.arm_invalid,
.gcpa-form.gcpa-form .arm_module_gateway_fields_bank_transfer .gcpa-ref-group input.arm_bank_transaction_id.arm-df__form-control[aria-invalid="true"] { border-color: var(--gcpa-error) !important; }
.gcpa-form.gcpa-form .arm_module_gateway_fields_bank_transfer .gcpa-ref-group .arm-df__fc--validation .arm-df__fc--validation__wrap,
.gcpa-form.gcpa-form .gcpa-ref-group .arm-df__fc--validation > * {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
	color: var(--gcpa-error) !important;
}
.gcpa-form.gcpa-form .gcpa-ref-group .arm_error_box_arrow { display: none !important; }
.gcpa-form.gcpa-form .gcpa-ref-group .front_error,
.gcpa-form.gcpa-form .gcpa-ref-group .arm-df__fc--validation { color: var(--gcpa-error) !important; font-size: 0.88rem; }
.gcpa-form.gcpa-form .gcpa-ref-group .gcpa-ref-tools { margin: 0; }
.gcpa-form.gcpa-form .gcpa-ref-group .gcpa-ref-tools__hint { color: var(--gcpa-muted); font-size: 0.88rem; }

/* Payment summary */
.gcpa-form.gcpa-form .arm_setup_summary_text_container {
	box-sizing: border-box;
	margin: 16px 0 !important;
	padding: 16px !important;
	border: 1px solid var(--gcpa-line) !important;
	border-radius: var(--gcpa-radius) !important;
	background: var(--gcpa-surface) !important;
}
.gcpa-form.gcpa-form .arm_setup_summary_text {
	color: var(--gcpa-muted) !important;
	font-size: 0.95rem !important;
	line-height: 1.6 !important;
	opacity: 1 !important;
}
.gcpa-form.gcpa-form .arm_setup_summary_text * { font-size: inherit !important; line-height: inherit !important; }
.gcpa-form.gcpa-form .arm_setup_summary_text > div:first-child {
	color: var(--gcpa-text) !important;
	font-size: 1.05rem !important;
	font-weight: 700;
}
.gcpa-form.gcpa-form .arm_setup_summary_text > br:first-of-type { display: none; }
.gcpa-form.gcpa-form .arm_setup_summary_text strong,
.gcpa-form.gcpa-form .arm_setup_summary_text b { color: var(--gcpa-text) !important; font-weight: 700; }
.gcpa-form.gcpa-form .arm_setup_summary_text span { color: inherit !important; }

@media (min-width: 600px) {
	.gcpa-checkout { font-size: 16px; }
	.gcpa-pay { padding: 22px 20px; }
}

@media (prefers-reduced-motion: reduce) {
	.gcpa-checkout * { transition: none !important; animation: none !important; }
}