/**
 * Advanced Game Product Fields - frontend styles.
 * Screenshot reference: purple/dark header, rounded card, light border.
 * Astra/WooCommerce er sathe conflict eড়ানor jonno sob kichu .agpf- scoped.
 */

.agpf-group {
	--agpf-header-bg: #2d1b69;
	--agpf-header-text: #ffffff;
	--agpf-border: #e5e7eb;
	--agpf-btn: #2d1b69;
	--agpf-radius: 12px;
	--agpf-spacing: 18px;
	width: 100%;
	max-width: 100%;
	margin: 0 0 24px;
	border: 1.5px solid #c7d2fe;
	border-radius: 8px !important;
	background: #ffffff;
	overflow: hidden;
	box-shadow: 0 0 0 3px #eef2ff;
	box-sizing: border-box;
}

.agpf-group *,
.agpf-group *::before,
.agpf-group *::after {
	box-sizing: border-box;
}

/* Header */
.agpf-group__header {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 15px 22px;
	background: var(--agpf-header-bg);
	color: var(--agpf-header-text);
}

.agpf-group__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	box-sizing: border-box;
	border-radius: 50%;
	background: #6366f1;
	border: 2px solid #a78bfa;
	color: #ffffff;
}

.agpf-group__icon svg {
	width: 13px;
	height: 13px;
}

.agpf-group__title {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #ffffff;
	line-height: 1.2;
}

/* "How to Order" header button — top-right, thin white border, matches purple header.
   Icon (ⓘ) is fixed/hardcoded in markup; only the label text is admin-editable. */
.agpf-howto-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-left: auto;
	padding: 6px 14px;
	border: 1px solid rgba(255, 255, 255, 0.7);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.05);
	color: var(--agpf-header-text, #ffffff);
	font-size: 11px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.045em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	flex-shrink: 0;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.agpf-howto-btn__icon {
	font-size: 13px;
	line-height: 1;
	text-transform: none;
}

/* Hover: shudhu actual pointer-over obosthay lage. Click-er por (target="_blank")
   focus thakleo r background dark thakbe na — focus-visible ekhon shudhu outline
   dey, background change kore na, tai "stuck dark" dekhanor problem hoy na. */
.agpf-howto-btn:hover {
	background: rgba(255, 255, 255, 0.16);
	border-color: #ffffff;
	color: var(--agpf-header-text, #ffffff);
	text-decoration: none;
}

/* Active: shudhu mouse-down/tap obosthay — click release/mouseup-e nijei chole jay. */
.agpf-howto-btn:active {
	background: rgba(255, 255, 255, 0.26);
	border-color: #ffffff;
}

.agpf-howto-btn:focus-visible {
	outline: 2px solid rgba(255, 255, 255, 0.65);
	outline-offset: 2px;
}

/* Body */
.agpf-group__body {
	padding: 18px 18px;
}

.agpf-field {
	margin-bottom: var(--agpf-spacing);
}

.agpf-field:last-child {
	margin-bottom: 0;
}

/* Conditional/Hidden-type field: v2.7.34-e bhul kore "dead" bhebe muche felechilam — class-ta
   dynamically (\x27agpf-field--\x27 . type) toiri hoy. Hidden field jeno faka jayga na nay. */
.agpf-field--hidden {
	margin: 0;
}

.agpf-field__label {
	display: block;
	margin-bottom: 9px;
	font-weight: 700;
	font-size: 15px;
	color: #374151;
}

.agpf-req {
	color: #ef4444;
	margin-left: 2px;
	font-weight: 700;
}

.agpf-field__desc {
	margin: 6px 0 0;
	font-size: 12px;
	color: #6b7280;
}

/* Inputs + selects */
.agpf-input {
	width: 100%;
	padding: 15px 16px;
	font-size: 15px;
	line-height: 1.4;
	color: #1f2937;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 8px !important;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	appearance: none;
	-webkit-appearance: none;
}

.agpf-input::placeholder {
	color: #9ca3af;
}

.agpf-input:focus {
	outline: none;
	border-color: var(--agpf-btn);
	box-shadow: 0 0 0 3px rgba(45, 27, 105, 0.12);
}

textarea.agpf-input {
	min-height: 90px;
	resize: vertical;
}

/* Explicit safety net: input er type (text/number/tel/email etc.), select,
   textarea — sob kichute e border-radius 8px guarantee kora holo, jate
   kono type-specific theme/WooCommerce override baki na thake. */
.agpf-group input.agpf-input,
.agpf-group input[type="text"].agpf-input,
.agpf-group input[type="number"].agpf-input,
.agpf-group input[type="tel"].agpf-input,
.agpf-group input[type="email"].agpf-input,
.agpf-group select.agpf-input,
.agpf-group textarea.agpf-input {
	border-radius: 8px !important;
}

.agpf-select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	padding-right: 42px;
	cursor: pointer;
	color: #4b5563;
}

/* Radio / checkbox */
.agpf-radio-group,
.agpf-checkbox-group {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 18px;
}

.agpf-radio,
.agpf-checkbox {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: #1f2430;
	cursor: pointer;
}

/* Verify button */
.agpf-field--verify {
	margin-top: 6px;
	margin-bottom: 0;
}

.agpf-verify-btn {
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100% !important;
	max-width: none !important;
	box-sizing: border-box !important;
	min-height: 42px;
	cursor: pointer;
	background-color: var(--agpf-verify-bg, #f9fafb) !important;
	color: #374151 !important;
	border: 1px solid #d1d5db !important;
	border-radius: 8px !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	box-shadow: none !important;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
	/* Native <button> chrome/tap-highlight fix: ei button-ta actual HTML <button>
	   element, tai kichu browser (iOS Safari-er 3D/inset "appearance" chrome,
	   Android Chrome-er default gray/black tap-highlight overlay) hover/click/tap-e
	   NIJEDER default square shadow/highlight bosay dey — eta border-radius follow
	   kore na, tai gol corner-er baire square dekha jay. Nicher 4 ta property eta
	   root e bondho kore. `overflow: hidden` extra safety: kono third-party/theme
	   CSS-o jodi ekhono kono box-shadow force kore, seta-o button-er nijer round
	   corner-er baire dekhabe na — content (icon/label/spinner) shob padding-er
	   bhitor-e thake bole eta clip hoy na.
	*/
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
	outline: none;
	overflow: hidden;
}

/* Shob obostha-e (hover/focus/active/disabled) shape-bhanga default shadow/outline
   niশ্চিতভাবে বন্ধ — kono browser/theme-specific override eshe jate square shadow
   ferot na ashe. */
.agpf-verify-btn:hover,
.agpf-verify-btn:focus,
.agpf-verify-btn:focus-visible,
.agpf-verify-btn:active,
.agpf-verify-btn:disabled {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
	outline: none;
	box-shadow: none !important;
}

/* Keyboard user-der jonno access-friendly focus ring — round corner respect kore,
   outline-offset thaka shotteo overflow:hidden-e clip hoy na (outline layout-er
   bhitor-e nei), tai eta-o square dekhabe na. */
.agpf-verify-btn:focus-visible {
	outline: 2px solid var(--agpf-btn, #6366f1);
	outline-offset: 2px;
}

.agpf-verify-btn:hover:not(:disabled) {
	background-color: var(--agpf-verify-hover-bg, #f3f4f6) !important;
	border-color: var(--agpf-verify-hover-border, #d1d5db) !important;
}

.agpf-verify-btn:disabled {
	cursor: not-allowed;
	opacity: 0.75;
}

.agpf-verify-btn__icon {
	display: inline-flex;
	color: #6b7280;
}

.agpf-verify-btn__icon svg {
	width: 15px;
	height: 15px;
}

.agpf-verify-btn__spinner {
	display: none;
	width: 15px;
	height: 15px;
	border: 2px solid rgba(0, 0, 0, 0.15);
	border-top-color: var(--agpf-btn);
	border-radius: 50%;
	animation: agpf-spin 0.7s linear infinite;
}

/* Button states */
.agpf-verify-btn.is-loading .agpf-verify-btn__icon {
	display: none;
}

.agpf-verify-btn.is-loading .agpf-verify-btn__spinner {
	display: inline-block;
}

/* Ready state: user requested no color change on min-length fill —
   button always stays in default style; only hover differs. */
.agpf-verify-btn.is-ready {
	background-color: var(--agpf-verify-bg, #f9fafb) !important;
	border-color: #d1d5db !important;
	color: #374151 !important;
	box-shadow: none !important;
}

.agpf-verify-btn.is-ready:hover:not(:disabled) {
	background-color: var(--agpf-verify-hover-bg, #f3f4f6) !important;
	border-color: var(--agpf-verify-hover-border, #d1d5db) !important;
}

.agpf-verify-btn.is-ready .agpf-verify-btn__icon {
	color: #6b7280;
}

.agpf-verify-btn.is-verified {
	background-color: #eef2ff !important;
	border-color: #c7d2fe !important;
	color: #4338ca !important;
}

.agpf-verify-btn.is-verified .agpf-verify-btn__icon {
	color: #4338ca;
}


@keyframes agpf-spin {
	to {
		transform: rotate(360deg);
	}
}

/* Result panel */
.agpf-verify-result {
	margin-top: 12px;
}

.agpf-verify-result:empty {
	margin-top: 0;
}

.agpf-result-card {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 34px 14px 14px;
	border-radius: 12px;
	font-size: 14px;
}

.agpf-result-card--success {
	background: #eef2ff;
	border: 1px solid #e0e7ff;
	color: #1e1b4b;
}


.agpf-result-card--notice {
	background: #fffaeb;
	border: 1px solid #fedf89;
	color: #b54708;
}

.agpf-result-card__icon {
	flex: 0 0 auto;
	margin-top: 1px;
}

/* Success e icon ta circular badge (screenshot: violet circle + white check) */
.agpf-result-card--success .agpf-result-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 1px;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #6366f1;
	color: #ffffff;
}


.agpf-result-card__title {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.agpf-result-card--success .agpf-result-card__title {
	color: #6366f1;
}

.agpf-result-card__name {
	font-size: 14px;
	font-weight: 600;
	color: #111827;
	overflow-wrap: anywhere;
}

.agpf-result-card__meta {
	font-size: 13px;
	opacity: 0.95;
	color: #6b7280;
}

.agpf-result-card__meta strong {
	font-weight: 700;
}

.agpf-result-card--success .agpf-result-card__meta strong {
	color: #4338ca;
}

/* Dismiss (x) button, top-right — screenshot er moton */
.agpf-result-card__close {
	position: absolute;
	top: 10px;
	right: 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	padding: 0;
	background: none;
	border: none;
	color: #9ca3af;
	cursor: pointer;
	line-height: 0;
}

.agpf-result-card__close:hover {
	color: #6b7280;
}

.agpf-result-card__close svg {
	width: 14px;
	height: 14px;
}

/* Field error */
.agpf-field__error {
	display: none;
	margin-top: 6px;
	font-size: 12.5px;
	color: #b42318;
}

.agpf-field.has-error .agpf-input {
	border-color: #fda29b;
}

.agpf-field.has-error .agpf-field__error {
	display: block;
}

/* Conditional hidden */
.agpf-field.agpf-hidden {
	display: none !important;
}

/* Locked (verified) input */
.agpf-input.agpf-locked {
	background: #f9fafb;
	color: #475467;
}

/* Mobile */
@media (max-width: 600px) {
	.agpf-group {
		margin: 0 -8px 8px;
		width: auto;
		max-width: none;
	}

	.agpf-group__header {
		padding: 12px 14px;
		gap: 8px;
		flex-wrap: wrap;
		row-gap: 8px;
	}

	.agpf-howto-btn {
		padding: 5px 10px;
		font-size: 10.5px;
	}

	.agpf-group__body {
		padding: 14px 10px;
	}

	.agpf-input {
		font-size: 16px; /* iOS zoom prevent */
		padding: 11px 10px;
	}

	.agpf-verify-btn {
		padding: 12px 12px;
	}

	.agpf-result-card {
		padding: 12px 30px 12px 10px;
	}
}

/* Extra-small phones — aro tight */
@media (max-width: 400px) {
	.agpf-group {
		margin: 0 -8px 8px;
		width: auto;
		max-width: none;
	}

	.agpf-group__header {
		padding: 11px 10px;
		flex-wrap: wrap;
		row-gap: 6px;
	}

	.agpf-howto-btn {
		padding: 4px 9px;
		font-size: 10px;
	}

	.agpf-group__body {
		padding: 12px 8px;
	}

	.agpf-result-card {
		padding: 10px 28px 10px 8px;
	}
}

/* Place Order disabled while verification pending */
.agpf-disabled,
button.agpf-disabled,
.agpf-disabled:disabled {
	opacity: 0.55 !important;
	cursor: not-allowed !important;
	pointer-events: auto !important;
	filter: grayscale(0.2);
}

/* ------------------------------------------------------------------
   Manual confirm (API unavailable fallback) — "Please Confirm Details"
   Dashed card + custom rounded checkbox. Tick na dile order hobe na.
   ------------------------------------------------------------------ */
.agpf-confirm[hidden] {
	display: none !important;
}

.agpf-confirm {
	margin-top: 12px;
}

.agpf-confirm__box {
	display: flex !important;
	align-items: center;
	gap: 14px;
	margin: 0 !important;
	padding: 16px 16px;
	border: 1.5px dashed #d1d5db;
	border-radius: 14px;
	background: #f8fafc;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.agpf-confirm__box:hover {
	border-color: #a78bfa;
}

/* Native checkbox visually hidden kintu keyboard/screen-reader accessible. */
.agpf-confirm__input {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
	opacity: 0;
}

.agpf-confirm__check {
	position: relative;
	flex: 0 0 26px;
	width: 26px;
	height: 26px;
	border: 2px solid #cbd5e1;
	border-radius: 7px;
	background: #ffffff;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.agpf-confirm__check::after {
	content: "";
	position: absolute;
	left: 8px;
	top: 3px;
	width: 6px;
	height: 12px;
	border: solid #ffffff;
	border-width: 0 2.5px 2.5px 0;
	transform: rotate(45deg);
	opacity: 0;
	transition: opacity 0.12s ease;
}

.agpf-confirm__text {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.agpf-confirm__title {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	color: #334155;
}

.agpf-confirm__desc {
	font-size: 13px;
	line-height: 1.4;
	color: #64748b;
}

/* Checked */
.agpf-confirm.is-checked .agpf-confirm__box {
	border-style: solid;
	border-color: var(--agpf-btn, #7c3aed);
	background: #faf5ff;
}

.agpf-confirm.is-checked .agpf-confirm__check {
	background: var(--agpf-btn, #7c3aed);
	border-color: var(--agpf-btn, #7c3aed);
}

.agpf-confirm.is-checked .agpf-confirm__check::after {
	opacity: 1;
}

/* Keyboard focus ring (round) */
.agpf-confirm__input:focus-visible + .agpf-confirm__check {
	outline: 2px solid var(--agpf-btn, #7c3aed);
	outline-offset: 2px;
}

/* Order button chaple kintu tick nai — highlight */
.agpf-confirm.is-attention .agpf-confirm__box {
	border-color: #ef4444;
	background: #fef2f2;
	box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

@media (max-width: 600px) {
	.agpf-confirm__box {
		gap: 12px;
		padding: 14px 12px;
	}

	.agpf-confirm__title {
		font-size: 14px;
	}

	.agpf-confirm__desc {
		font-size: 12.5px;
	}
}

/* ------------------------------------------------------------------
   Verify FAIL warning box — GamerHub plugin-er hubohu (shob design e).
   Puro choura halka lal box; "Please correct the details above." chhoto lal
   outline label box-er UPORER border-er majhkhane, samne "!" icon.
   ------------------------------------------------------------------ */
.agpf-verify-note.is-bad {
	position: relative;
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: 12px 14px;
	background: #FEF2F2;
	border: 1.5px solid #FCA5A5;
	border-radius: 12px;
	color: #DC2626;
	font-size: 13.5px;
	font-weight: 400;
	line-height: 1.55;
	text-align: left;
	overflow-wrap: anywhere;
}
/* Label thakle: box-er upore label-er ordhek uchchota jayga, bhitore nicher ordhek */
.agpf-verify-result:has(.agpf-verify-mustfix) {
	margin-top: 24px !important; /* design-er :not(:empty) margin (beshi specific) jeno label-ke button-er upor na tole */
}
.agpf-verify-note.is-bad:has(.agpf-verify-mustfix) {
	padding-top: 20px;
}
.agpf-verify-note .agpf-verify-mustfix {
	position: absolute;
	top: 0;
	left: 16px;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	gap: 6px;
	max-width: calc(100% - 32px);
	margin: 0;
	padding: 4px 11px 4px 5px;
	background: #FFFFFF;
	border: 1.5px solid #FCA5A5;
	border-radius: 8px;
	box-shadow: 0 1px 2px rgba(220, 38, 38, .08);
	color: #DC2626;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.25;
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.agpf-verify-note .agpf-verify-mustfix::before {
	content: "!";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #EF4444;
	color: #FFFFFF;
	font-size: 11px;
	font-weight: 800;
	line-height: 1;
}
@media (max-width: 600px) {
	.agpf-verify-note.is-bad { padding: 12px; font-size: 13px; }
	.agpf-verify-note.is-bad:has(.agpf-verify-mustfix) { padding-top: 19px; }
	.agpf-verify-note .agpf-verify-mustfix { left: 12px; max-width: calc(100% - 24px); font-size: 11.5px; padding: 3px 9px 3px 4px; }
	.agpf-verify-note .agpf-verify-mustfix::before { width: 15px; height: 15px; font-size: 10px; }
}