/**
 * 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;
}

.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;
}

.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;
}

.agpf-verify-btn.is-error {
	background-color: #fef3f2 !important;
	border-color: #fecdca !important;
	color: #b42318 !important;
}

@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--error {
	background: #fef3f2;
	border: 1px solid #fecdca;
	color: #b42318;
}

.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--error .agpf-result-card__icon {
	color: #b42318;
}

.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);
}