.gpd-packages {
	--gpd-primary: var(--gp-primary, #0f5c4d);
	--gpd-secondary: var(--gp-secondary, #d68b20);
	--gpd-line: #dce3e0;
	--gpd-soft: #f5f7f6;
	--gpd-ink: #17211e;
}

.gpd-package-grid {
	display: grid;
	grid-template-columns: minmax(0, 380px);
	justify-content: center;
	gap: 20px;
	margin: 30px 0;
}

.gpd-package-card {
	position: relative;
	padding: 28px;
	color: var(--gpd-ink);
	background: #fff;
	border: 1px solid var(--gpd-line);
	border-radius: 14px;
	box-shadow: 0 12px 36px rgba(15, 42, 34, .07);
}

.gpd-package-card.is-featured {
	border: 2px solid var(--gpd-secondary);
}

.gpd-package-card:nth-child(1) {
	background: linear-gradient(145deg, #fff 0%, #f0f3f6 100%);
	border: 2px solid #aab5c0;
	box-shadow: 0 14px 34px rgba(56, 70, 84, .11);
}

.gpd-package-card:nth-child(2) {
	background: linear-gradient(145deg, #fffdf6 0%, #fff2bf 100%);
	border: 2px solid #d5a619;
	box-shadow: 0 16px 38px rgba(143, 105, 0, .16);
}

.gpd-package-card h2 {
	margin: 0 0 8px;
}

.gpd-package-qris-button {
	width: 100%;
}

.gpd-package-midtrans-link {
	display: block;
	margin-top: 11px;
	font-size: .82rem;
	font-weight: 700;
	text-align: center;
}

.gpd-package-card ul {
	display: grid;
	gap: 10px;
	padding: 0;
	margin: 20px 0;
	list-style: none;
}

.gpd-package-card li {
	position: relative;
	padding-left: 30px;
}

.gpd-package-card li::before {
	position: absolute;
	top: .08em;
	left: 0;
	display: grid;
	width: 20px;
	height: 20px;
	place-items: center;
	color: var(--gpd-primary);
	background: #e7f3ef;
	border-radius: 50%;
	content: "✓";
	font-size: .75rem;
	font-weight: 900;
	line-height: 1;
}

.gpd-package-card:nth-child(1) li::before {
	color: #536273;
	background: #e1e6eb;
}

.gpd-package-card:nth-child(2) li::before {
	color: #805b00;
	background: #ffe8a0;
}

.gpd-package-price {
	margin: 0 0 12px;
	color: var(--gpd-primary);
	font-size: 1.65rem;
	font-weight: 850;
}

.gpd-package-card:nth-child(1) .gpd-package-price {
	color: #657384;
}

.gpd-package-card:nth-child(2) .gpd-package-price {
	color: #a97700;
}

.gpd-package-badge {
	display: inline-block;
	padding: 5px 10px;
	margin-bottom: 14px;
	color: #402900;
	background: #f6d48d;
	border-radius: 999px;
	font-size: .75rem;
	font-weight: 800;
}

.gpd-checkout {
	display: grid;
	gap: 30px;
	padding: 28px;
	margin-top: 42px;
	background: var(--gpd-soft);
	border-radius: 16px;
}

.gpd-checkout form {
	padding: 24px;
	background: #fff;
	border: 1px solid var(--gpd-line);
	border-radius: 12px;
}

.gpd-payment-column {
	display: grid;
	gap: 18px;
}

.gpd-qris-choice {
	padding: 24px;
	background: linear-gradient(145deg, #fffdf7 0%, #fff3ca 100%);
	border: 1px solid #d7b44a;
	border-radius: 12px;
	box-shadow: 0 12px 30px rgba(129, 91, 0, .1);
}

.gpd-qris-choice h3 {
	margin: 2px 0 8px;
	font-size: 1.25rem;
}

.gpd-qris-choice p:not(.gpd-payment-method-label) {
	margin: 0 0 18px;
}

.gpd-payment-method-label {
	margin: 0 0 6px;
	color: #8b6100;
	font-size: .75rem;
	font-weight: 850;
	letter-spacing: .07em;
	text-transform: uppercase;
}

.gpd-qris-launch {
	width: 100%;
}

.gpd-midtrans-disclosure {
	background: #fff;
	border: 1px solid var(--gpd-line);
	border-radius: 12px;
}

.gpd-midtrans-disclosure > summary {
	padding: 16px 20px;
	cursor: pointer;
	color: var(--gpd-primary);
	font-weight: 800;
}

.gpd-midtrans-disclosure[open] > summary {
	border-bottom: 1px solid var(--gpd-line);
}

.gpd-midtrans-disclosure form {
	border: 0;
	border-radius: 0 0 12px 12px;
}

.gpd-form-grid {
	display: grid;
	gap: 4px 18px;
}

.gpd-checkout label {
	display: block;
	margin-bottom: 6px;
	font-weight: 700;
}

.gpd-checkout input:not([type=checkbox]),
.gpd-checkout textarea {
	width: 100%;
	min-height: 46px;
	padding: 10px 12px;
	border: 1px solid #9eaaa6;
	border-radius: 8px;
}

.gpd-checkout textarea {
	min-height: 120px;
	resize: vertical;
}

.gpd-consent label {
	font-weight: 500;
}

.gpd-honeypot {
	position: absolute !important;
	left: -10000px;
	overflow: hidden;
	width: 1px;
	height: 1px;
}

.gpd-package-notice,
.gpd-checkout-status:not(:empty) {
	padding: 14px 16px;
	margin: 20px 0;
	background: #edf3f1;
	border-left: 4px solid var(--gpd-primary);
	border-radius: 6px;
}

.gpd-package-notice.is-success,
.gpd-checkout-status.is-success {
	color: #0c512c;
	background: #e4f4eb;
}

.gpd-package-notice.is-error,
.gpd-checkout-status.is-error {
	color: #741c1c;
	background: #fbeaea;
	border-color: #b42318;
}

.gpd-checkout-status p {
	margin: 0 0 10px;
}

.gpd-checkout-status p:last-child {
	margin-bottom: 0;
}

.gpd-eyebrow {
	margin-bottom: 5px;
	color: var(--gpd-primary);
	font-size: .78rem;
	font-weight: 850;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.packages-additional-content {
	padding-top: 34px;
	margin-top: 42px;
	border-top: 1px solid var(--gpd-line);
}

.has-gpd-payment-dialog {
	overflow: hidden;
}

.gpd-qris-dialog {
	width: min(100% - 28px, 430px);
	max-width: none;
	max-height: calc(100dvh - 28px);
	padding: 0;
	overflow: auto;
	color: var(--gpd-ink);
	background: linear-gradient(165deg, #fff 0%, #f7faff 100%);
	border: 1px solid #e1e8f0;
	border-radius: 24px;
	box-shadow: 0 32px 90px rgba(19, 47, 78, .24), 0 10px 28px rgba(19, 47, 78, .1);
}

.gpd-qris-dialog::backdrop {
	background: rgba(12, 32, 54, .58);
	backdrop-filter: blur(7px);
}

.gpd-qris-dialog__surface {
	position: relative;
	padding: 34px 26px 26px;
	overflow: hidden;
	text-align: center;
	background:
		radial-gradient(circle at 100% 0%, rgba(229, 183, 25, .12), transparent 32%),
		radial-gradient(circle at 0% 100%, rgba(13, 101, 189, .08), transparent 34%);
}

.gpd-qris-dialog__surface::before {
	position: absolute;
	top: 0;
	left: 50%;
	width: 130px;
	height: 4px;
	background: linear-gradient(90deg, var(--gpd-primary), #e5b719);
	border-radius: 0 0 999px 999px;
	content: "";
	transform: translateX(-50%);
}

.gpd-qris-dialog__close {
	position: absolute;
	top: 12px;
	right: 12px;
	display: grid;
	width: 38px;
	height: 38px;
	padding: 0;
	place-items: center;
	color: #68778a;
	background: #eef3f8;
	border: 1px solid #dfe7ef;
	border-radius: 50%;
	cursor: pointer;
	font-size: 26px;
	line-height: 1;
}

.gpd-qris-dialog__close:hover,
.gpd-qris-dialog__close:focus-visible {
	color: var(--gpd-primary);
	background: #e7f1fb;
	border-color: #bfd5eb;
}

.gpd-qris-dialog__badge {
	display: inline-block;
	padding: 6px 13px;
	margin-bottom: 13px;
	color: #7a5900;
	background: linear-gradient(135deg, #fff9df, #ffefae);
	border: 1px solid #e5c45d;
	border-radius: 999px;
	box-shadow: 0 6px 18px rgba(167, 123, 0, .12);
	font-size: .73rem;
	font-weight: 850;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.gpd-qris-dialog h2 {
	margin: 0 35px 4px;
	color: #172334;
	font-size: 1.3rem;
}

.gpd-qris-dialog__merchant {
	margin: 0 0 20px;
	color: var(--gpd-primary);
	font-size: 1.08rem;
	font-weight: 850;
}

.gpd-qris-dialog__summary {
	padding: 14px 16px;
	margin-bottom: 18px;
	text-align: left;
	background: rgba(255, 255, 255, .82);
	border: 1px solid #dfe7ef;
	border-radius: 13px;
	box-shadow: 0 8px 24px rgba(20, 51, 84, .06);
}

.gpd-qris-dialog__summary p {
	margin: 0;
	color: #647184;
}

.gpd-qris-dialog__summary p + p {
	margin-top: 8px;
}

.gpd-qris-dialog__summary strong {
	color: #172334;
}

.gpd-qris-dialog__image-wrap {
	display: grid;
	width: min(100%, 280px);
	margin: 0 auto 15px;
	place-items: center;
	padding: 14px;
	color: #536274;
	background: #fff;
	border: 1px solid #dbe4ed;
	border-radius: 14px;
	box-shadow: 0 12px 32px rgba(20, 51, 84, .1);
}

.gpd-qris-dialog__image-wrap img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 310px;
	object-fit: contain;
}

.gpd-qris-dialog__image-wrap small {
	margin-top: 8px;
	font-size: .72rem;
}

.gpd-qris-dialog__instruction {
	margin: 0 auto 14px;
	color: #647184;
	font-size: .9rem;
}

.gpd-qris-dialog__download,
.gpd-qris-dialog__whatsapp {
	display: flex;
	min-height: 46px;
	align-items: center;
	justify-content: center;
	padding: 10px 16px;
	border-radius: 11px;
	font-weight: 800;
	text-decoration: none;
}

.gpd-qris-dialog__download {
	margin-bottom: 14px;
	color: var(--gpd-primary);
	background: #fff;
	border: 1px solid #b8cee4;
	box-shadow: 0 7px 18px rgba(20, 51, 84, .06);
}

.gpd-qris-dialog__contact {
	display: grid;
	gap: 4px;
	padding: 13px 15px;
	margin-bottom: 14px;
	color: #08764b;
	background: #edf9f4;
	border: 1px solid #9bd9bf;
	border-radius: 12px;
}

.gpd-qris-dialog__contact span {
	font-size: .87rem;
}

.gpd-qris-dialog__whatsapp {
	gap: 8px;
	color: #fff;
	background: linear-gradient(135deg, #13ae73, #078e5b);
	box-shadow: 0 12px 26px rgba(7, 142, 91, .23);
}

.gpd-qris-dialog__download:hover,
.gpd-qris-dialog__download:focus-visible {
	color: #fff;
	background: var(--gpd-primary);
	border-color: var(--gpd-primary);
}

.gpd-qris-dialog__whatsapp:hover,
.gpd-qris-dialog__whatsapp:focus-visible {
	color: #fff;
	background: linear-gradient(135deg, #0b9a64, #067749);
	box-shadow: 0 14px 30px rgba(7, 142, 91, .3);
	transform: translateY(-1px);
}

@media (min-width: 700px) {
	.gpd-package-grid {
		grid-template-columns: repeat(auto-fit, minmax(280px, 380px));
	}

	.gpd-checkout {
		grid-template-columns: minmax(0, .8fr) minmax(0, 1.5fr);
		align-items: start;
	}

	.gpd-form-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.gpd-field-wide {
		grid-column: 1 / -1;
	}
}