/* =========================================================
           RESET
        ========================================================= */

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

/* =========================================================
   CUSTOM SCROLLBAR
========================================================= */

::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}

::-webkit-scrollbar-track {
	background: #1a1a1a;
}

::-webkit-scrollbar-thumb {
	background: #4b4b4b;
	border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
	background: #666666;
}

/* Firefox */
* {
	scrollbar-width: thin;
	scrollbar-color: #4b4b4b #1a1a1a;
}
img {
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;

	-webkit-user-drag: none;
	-user-drag: none;
}

/* =========================================================
           THEME
        ========================================================= */

:root {
	--brand: #ece910;
	--brand-hover: #d9da0d;
	--brand-soft: rgba(236, 233, 16, 0.12);
	--brand-deep: #1a1a1a;

	--paper: #f8fafc;
	--card: #ffffff;
	--card-2: #f1f5f9;

	--line: #e2e8f0;
	--line-soft: #e9edf4;

	--text: #0f172a;
	--muted: #64748b;
	--faint: #94a3b8;

	--success: #16a34a;
	--danger: #dc2626;

	--shadow:
		0 1px 3px rgba(15, 23, 42, 0.08), 0 12px 35px -18px rgba(15, 23, 42, 0.25);

	--shadow-lg: 0 20px 60px -25px rgba(15, 23, 42, 0.28);

	--r: 6px; /*old 14px*/
	--r-sm: 9px;

	--heading-text: #ffffff;
	--heading-muted: rgba(255, 255, 255, 0.75);
	--heading-eyebrow: rgba(255, 255, 255, 0.6);

	--f-display: "Segoe UI", system-ui, -apple-system, sans-serif;

	--f-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

	--f-mono: "JetBrains Mono", "Cascadia Mono", monospace;
}

/* =========================================================
           BASE
        ========================================================= */

html {
	overflow-x: hidden;
}

body {
	min-height: 100vh;

	background:
		linear-gradient(rgba(10, 10, 10, 0.72), rgba(10, 10, 10, 0.72)),
		url("/assets/images/cebeco_bg.jpg") center center / cover no-repeat fixed;

	color: var(--text);
	font-family: var(--f-body);
	font-size: 14px;
	line-height: 1.5;

	-webkit-font-smoothing: antialiased;
}

html.modal-open,
body.modal-open {
	overflow: hidden;
	height: 100%;
}

body.modal-open {
	position: fixed;
	width: 100%;
}

button,
input {
	font: inherit;
}

button {
	cursor: pointer;
}

/* =========================================================
           PAGE
        ========================================================= */

.payment-page {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

/* =========================================================
           HEADER
        ========================================================= */

.payment-header {
	width: 100%;
	/* background: rgba(255, 255, 255, 0.92);
            backdrop-filter: blur(8px); */
	/* border-bottom: 1px solid var(--line); */
	padding: 15px 24px;
}

.payment-header-inner {
	width: 100%;
	max-width: 1120px;
	margin: 0 auto;

	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

.brand {
	display: flex;
	align-items: center;
}

.brand img {
	display: block;
	width: auto;
	max-width: 145px;
	max-height: 48px;
}

.secure-payment {
	display: flex;
	align-items: center;
	gap: 7px;

	color: var(--heading-muted);

	font-family: var(--f-mono);
	font-size: 9.5px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.secure-payment svg {
	color: var(--success);
}

/* =========================================================
           MAIN
        ========================================================= */

.payment-main {
	flex: 1;
	width: 100%;
	max-width: 640px;
	margin: 0 auto;
	padding: 30px 20px 40px;
}

/* =========================================================
           HEADING
        ========================================================= */

.payment-heading {
	margin-bottom: 26px;
	color: var(--heading-text);
}

.payment-heading .eyebrow {
	font-family: var(--f-mono);
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--heading-eyebrow);

	margin-bottom: 6px;
}

.payment-heading h1 {
	font-family: var(--f-display);
	font-size: 27px;
	font-weight: 650;
	letter-spacing: -0.035em;
	color: var(--brand);
	text-shadow: 3px 3px 0 var(--brand-deep);
}

.payment-heading p {
	margin-top: 5px;
	color: var(--heading-muted);

	font-size: 13px;
}

/* =========================================================
           PAYMENT LAYOUT
        ========================================================= */

.payment-layout {
	display: block;
	width: 100%;
}

/* =========================================================
           PAYMENT CARD
        ========================================================= */

.payment-card {
	width: 100%;

	background: var(--card);

	border: 1px solid var(--line);

	border-radius: var(--r);

	box-shadow: var(--shadow-lg);

	overflow: hidden;
}

.payment-card-head {
	padding: 17px 19px 15px;

	border-bottom: 1px solid var(--line-soft);
}

.payment-card-head h2 {
	font-size: 16px;

	font-weight: 650;

	letter-spacing: -0.02em;
}

.payment-card-head p {
	margin-top: 3px;

	color: var(--muted);

	font-size: 12px;
}

.payment-card-body {
	padding: 19px;
}

/* =========================================================
           CUSTOMER INFORMATION
        ========================================================= */

.customer-section {
	margin-bottom: 22px;
}

.customer-fields {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* =========================================================
           SECTION LABEL
        ========================================================= */

.section-label {
	display: flex;

	align-items: center;

	justify-content: space-between;

	margin-bottom: 10px;
}

.section-label span {
	font-family: var(--f-mono);

	font-size: 9.5px;

	letter-spacing: 0.12em;

	text-transform: uppercase;

	color: var(--muted);
}

.accepted {
	display: flex;

	align-items: center;

	gap: 5px;

	color: var(--faint);

	font-size: 10px;
}

/* =========================================================
           FORM FIELDS
        ========================================================= */

.field-row {
	display: grid;

	grid-template-columns: 1fr 1fr;

	gap: 10px;
}

.field {
	display: flex;

	flex-direction: column;

	gap: 5px;
}

.field label {
	font-family: var(--f-mono);

	font-size: 9px;

	letter-spacing: 0.1em;

	text-transform: uppercase;

	color: var(--muted);
}

.input {
	width: 100%;

	height: 42px;

	padding: 9px 11px;

	background: var(--card-2);

	border: 1px solid var(--line);

	border-radius: 8px;

	outline: none;

	color: var(--text);

	font-size: 12px;

	transition:
		border-color 0.15s ease,
		box-shadow 0.15s ease,
		background 0.15s ease;
}

.input::placeholder {
	color: var(--faint);
}

.input:hover {
	border-color: var(--muted);
}

.input:focus {
	background: var(--card);

	border-color: #1a1a1a;

	/* box-shadow:
                0 0 0 3px rgba(26, 26, 26, 0.1); */
}

/* =========================================================
           PAYMENT SECTION
        ========================================================= */

.payment-section {
	margin-top: 4px;
}

/* =========================================================
           PAYMENT TABS
        ========================================================= */

.payment-tabs {
	display: grid;

	grid-template-columns: 1fr 1fr;

	padding: 3px;

	margin-bottom: 12px;

	background: #f1f5f9;

	border: 1px solid var(--line);

	border-radius: 9px;
}

.payment-tab {
	height: 35px;

	border: none;

	border-radius: 7px;

	background: transparent;

	color: var(--muted);

	font-family: var(--f-body);

	font-size: 11px;

	font-weight: 650;

	transition:
		background 0.15s ease,
		color 0.15s ease,
		box-shadow 0.15s ease;
}

.payment-tab:hover {
	color: var(--text);
}

.payment-tab.active {
	background: #ffffff;

	color: var(--text);

	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
}

/* =========================================================
           PAYMENT METHOD GRID
        ========================================================= */

.payment-method-grid {
	display: none;

	grid-template-columns: repeat(2, 1fr);

	gap: 9px;
}

.payment-method-grid.active {
	display: grid;
}

/* =========================================================
           PAYMENT METHOD
        ========================================================= */

.payment-method {
	position: relative;

	min-height: 76px;

	display: flex;

	align-items: center;

	padding: 10px 12px;

	background: var(--card);

	border: 1px solid var(--line);

	border-radius: 9px;

	cursor: pointer;

	transition:
		border-color 0.15s ease,
		background 0.15s ease,
		box-shadow 0.15s ease;
}

.payment-method:hover {
	border-color: #cbd5e1;

	background: #fcfcfd;
}

.payment-method.selected {
	border-color: #1a1a1a;

	background: #fafafa;

	box-shadow: 0 0 0 1px #1a1a1a;
}

.payment-method input {
	position: absolute;

	opacity: 0;

	pointer-events: none;
}

/* =========================================================
           RADIO
        ========================================================= */

.method-radio {
	width: 17px;
	height: 17px;

	flex: 0 0 17px;

	border-radius: 50%;

	border: 1.5px solid #cbd5e1;

	display: grid;

	place-items: center;

	margin-right: 12px;
}

.payment-method.selected .method-radio {
	border-color: #1a1a1a;
}

.payment-method.selected .method-radio::after {
	content: "";

	width: 7px;
	height: 7px;

	border-radius: 50%;

	background: #1a1a1a;
}

/* =========================================================
           PAYMENT LOGO
        ========================================================= */

.method-logo {
	flex: 1;

	height: 44px;

	display: flex;

	align-items: center;

	justify-content: center;
}

.method-logo img {
	display: block;

	max-width: 125px;

	max-height: 38px;

	width: auto;

	height: auto;

	object-fit: contain;
}

/* =========================================================
           PAYMENT FOOTER
        ========================================================= */

.payment-footer {
	margin-top: 22px;

	padding-top: 18px;

	border-top: 1px solid var(--line-soft);
}

.secure-note {
	display: flex;

	align-items: flex-start;

	gap: 7px;

	margin-bottom: 13px;

	color: var(--faint);

	font-size: 10px;

	line-height: 1.45;
}

.secure-note svg {
	flex-shrink: 0;

	color: #16a34a;

	margin-top: 1px;
}

.pay-button {
	width: 100%;

	min-height: 46px;

	display: flex;

	align-items: center;

	justify-content: center;

	gap: 8px;

	border: none;

	border-radius: 9px;

	background: var(--brand);

	color: #000;

	font-family: var(--f-body);

	font-size: 13px;

	font-weight: 700;

	transition:
		background 0.15s ease,
		transform 0.1s ease,
		box-shadow 0.15s ease;
}

.pay-button:hover {
	background: var(--brand-hover);

	box-shadow: 0 5px 15px rgba(236, 233, 16, 0.25);
}

.pay-button:active {
	transform: scale(0.985);
}

.pay-amount {
	font-family: var(--f-mono);

	font-size: 12px;
}

/* =========================================================
           VALIDATION MESSAGE
        ========================================================= */

.payment-message {
	display: none;

	margin-top: 12px;

	padding: 10px 12px;

	border: 1px solid #fecaca;

	border-radius: 8px;

	background: #fef2f2;

	color: #b91c1c;

	font-size: 11px;
}

.payment-message.open {
	display: block;
}

/* =========================================================
           BOTTOM FOOTER
        ========================================================= */

.page-footer {
	width: 100%;

	padding: 10px 20px;

	/* border-top: 1px solid var(--line);

            background: rgba(255, 255, 255, 0.92); */

	color: var(--heading-eyebrow);

	font-family: var(--f-mono);

	font-size: 9px;

	letter-spacing: 0.07em;

	text-transform: uppercase;

	text-align: center;

	display: flex;

	align-items: center;

	justify-content: center;

	gap: 6px;
}

.powered-by-logo {
	display: block;

	width: auto;

	height: 42px;

	max-width: 150px;

	object-fit: contain;
}

/* =========================================================
           REVIEW MODAL
        ========================================================= */

.review-modal {
	position: fixed;

	inset: 0;

	z-index: 9999;

	display: flex;

	align-items: center;

	justify-content: center;

	padding: 20px;

	background: rgba(15, 23, 42, 0.55);

	backdrop-filter: blur(5px);

	opacity: 0;

	visibility: hidden;

	pointer-events: none;

	transition:
		opacity 0.2s ease,
		visibility 0.2s ease;
}

.review-modal.open {
	opacity: 1;

	visibility: visible;

	pointer-events: auto;
}

/* =========================================================
           MODAL CARD
        ========================================================= */

.review-modal-card {
	width: 100%;

	max-width: 470px;

	max-height: calc(100vh - 40px);

	display: flex;

	flex-direction: column;

	background: #ffffff;

	border: 1px solid rgba(226, 232, 240, 0.9);

	border-radius: var(--r);

	box-shadow: 0 30px 80px rgba(15, 23, 42, 0.25);

	overflow: hidden;

	transform: translateY(12px) scale(0.98);

	transition: transform 0.2s ease;
}

.review-modal.open .review-modal-card {
	transform: translateY(0) scale(1);
}

#reviewContent {
	min-height: 0;

	overflow-y: auto;

	flex: 1;
}

/* =========================================================
           MODAL HEADER
        ========================================================= */

.review-modal-header {
	padding: 20px 21px 17px;

	border-bottom: 1px solid var(--line-soft);

	display: flex;

	align-items: flex-start;

	justify-content: space-between;

	gap: 15px;
}

.review-modal-title-wrap {
	display: flex;

	align-items: flex-start;

	gap: 12px;
}

.review-icon {
	width: 38px;
	height: 38px;

	flex: 0 0 38px;

	display: grid;

	place-items: center;

	border-radius: 10px;

	background: var(--brand-soft);

	color: #777900;
}

.review-modal-header h2 {
	font-size: 17px;

	line-height: 1.25;

	font-weight: 700;

	letter-spacing: -0.02em;
}

.review-modal-header p {
	margin-top: 3px;

	color: var(--muted);

	font-size: 11.5px;
}

.modal-close {
	width: 32px;
	height: 32px;

	flex: 0 0 32px;

	display: grid;

	place-items: center;

	border: 1px solid var(--line);

	border-radius: 8px;

	background: #ffffff;

	color: var(--muted);

	transition:
		background 0.15s ease,
		color 0.15s ease,
		border-color 0.15s ease;
}

.modal-close:hover {
	background: #f8fafc;

	color: var(--text);

	border-color: #cbd5e1;
}

/* =========================================================
           MODAL BODY
        ========================================================= */

.review-modal-body {
	padding: 19px 21px 21px;
}

.review-section {
	margin-bottom: 17px;
}

.review-section:last-child {
	margin-bottom: 0;
}

.review-section-title {
	margin-bottom: 9px;

	font-family: var(--f-mono);

	font-size: 9px;

	letter-spacing: 0.12em;

	text-transform: uppercase;

	color: var(--muted);
}

.review-details {
	border: 1px solid var(--line);

	border-radius: 10px;

	overflow: hidden;

	background: #ffffff;
}

.review-row {
	display: flex;

	align-items: center;

	justify-content: space-between;

	gap: 20px;

	min-height: 43px;

	padding: 9px 12px;

	border-bottom: 1px solid var(--line-soft);
}

.review-row:last-child {
	border-bottom: none;
}

.review-row .review-label {
	color: var(--muted);

	font-size: 11.5px;
}

.review-row .review-value {
	color: var(--text);

	font-size: 12px;

	font-weight: 600;

	text-align: right;

	overflow-wrap: anywhere;
}

.review-row .review-value.mono {
	font-family: var(--f-mono);

	font-size: 11px;
}

/* =========================================================
           PAYMENT METHOD IN MODAL
        ========================================================= */

.review-payment-method {
	display: flex;

	align-items: center;

	gap: 11px;

	padding: 11px 12px;

	border: 1px solid var(--line);

	border-radius: 10px;

	background: #fafafa;
}

.review-payment-logo {
	width: 76px;
	height: 38px;

	display: flex;

	align-items: center;

	justify-content: center;

	background: #ffffff;

	border: 1px solid var(--line);

	border-radius: 7px;

	padding: 5px;
}

.review-payment-logo img {
	max-width: 65px;

	max-height: 28px;

	object-fit: contain;
}

.review-payment-info {
	min-width: 0;
}

.review-payment-info .method-name {
	font-size: 12px;

	font-weight: 650;

	color: var(--text);
}

.review-payment-info .method-category {
	margin-top: 1px;

	font-size: 10px;

	color: var(--muted);
}

/* =========================================================
           TOTAL
        ========================================================= */

.review-total {
	margin-top: 15px;

	padding: 14px;

	border-radius: 11px;

	background: #f8fafc;

	border: 1px solid var(--line);
}

.review-total-row {
	display: flex;

	align-items: center;

	justify-content: space-between;

	gap: 20px;

	margin-bottom: 6px;
}

.review-total-row:last-child {
	margin-bottom: 0;
}

.review-total-row span:first-child {
	color: var(--muted);

	font-size: 11.5px;
}

.review-total-row span:last-child {
	color: var(--text);

	font-family: var(--f-mono);

	font-size: 11.5px;

	font-variant-numeric: tabular-nums;
}

.review-total-divider {
	height: 1px;

	background: var(--line);

	margin: 9px 0;
}

.review-total-final {
	display: flex;

	align-items: center;

	justify-content: space-between;

	gap: 20px;
}

.review-total-final span:first-child {
	color: var(--text);

	font-size: 13px;

	font-weight: 700;
}

.review-total-final span:last-child {
	color: var(--text);

	font-family: var(--f-mono);

	font-size: 21px;

	font-weight: 750;

	letter-spacing: -0.04em;

	font-variant-numeric: tabular-nums;
}

/* =========================================================
           MODAL NOTICE
        ========================================================= */

.review-notice {
	display: flex;

	align-items: flex-start;

	gap: 8px;

	margin-top: 14px;

	padding: 10px 11px;

	border-radius: 8px;

	background: #fffbeb;

	border: 1px solid #fef3c7;

	color: #92400e;

	font-size: 10.5px;

	line-height: 1.45;
}

.review-notice svg {
	flex-shrink: 0;

	margin-top: 1px;
}

/* =========================================================
           MODAL FOOTER
        ========================================================= */

.review-modal-footer {
	display: grid;

	grid-template-columns: 1fr 1.4fr;

	gap: 9px;

	padding: 15px 21px 20px;

	border-top: 1px solid var(--line-soft);
}

.modal-button {
	min-height: 44px;

	border-radius: 9px;

	font-size: 12px;

	font-weight: 700;

	transition:
		background 0.15s ease,
		border-color 0.15s ease,
		transform 0.1s ease;
}

.modal-button:active {
	transform: scale(0.985);
}

.modal-cancel {
	border: 1px solid var(--line);

	background: #ffffff;

	color: var(--text);
}

.modal-cancel:hover {
	background: #f8fafc;

	border-color: #cbd5e1;
}

.modal-confirm {
	border: 1px solid var(--brand);

	background: var(--brand);

	color: #000000;
}

.modal-confirm:hover {
	background: var(--brand-hover);

	border-color: var(--brand-hover);
}

/* =========================================================
           QR PAYMENT MODAL
        ========================================================= */

.qr-modal {
	position: fixed;

	inset: 0;

	z-index: 10000;

	display: flex;

	align-items: center;

	justify-content: center;

	padding: 14px;

	background: rgba(15, 23, 42, 0.55);

	backdrop-filter: blur(5px);

	opacity: 0;

	visibility: hidden;

	pointer-events: none;

	transition:
		opacity 0.2s ease,
		visibility 0.2s ease;
}

.qr-modal.open {
	opacity: 1;

	visibility: visible;

	pointer-events: auto;
}

/* =========================================================
           QR MODAL CARD
        ========================================================= */

.qr-modal-card {
	width: 100%;

	max-width: 360px;

	background: #ffffff;

	border: 1px solid var(--line);

	border-radius: var(--r);

	box-shadow: 0 30px 80px rgba(15, 23, 42, 0.25);

	overflow: hidden;

	transform: translateY(10px) scale(0.98);

	transition: transform 0.2s ease;
}

.qr-modal.open .qr-modal-card {
	transform: translateY(0) scale(1);
}

/* =========================================================
           QR HEADER
        ========================================================= */

.qr-modal-header {
	display: flex;

	align-items: flex-start;

	justify-content: space-between;

	gap: 12px;

	padding: 15px 16px 13px;

	border-bottom: 1px solid var(--line-soft);
}

.qr-modal-header h2 {
	font-size: 15px;

	font-weight: 700;

	letter-spacing: -0.02em;

	color: var(--text);
}

.qr-modal-header p {
	margin-top: 2px;

	color: var(--muted);

	font-size: 10.5px;

	line-height: 1.4;
}

/* =========================================================
           QR BODY
        ========================================================= */

.qr-modal-body {
	padding: 17px 16px 18px;

	display: flex;

	flex-direction: column;

	align-items: center;

	text-align: center;
}

/* =========================================================
           QR CODE
        ========================================================= */

.qr-code-wrapper {
	width: 180px;
	height: 180px;

	display: grid;

	place-items: center;

	padding: 8px;

	background: #ffffff;

	border: 1px solid var(--line);

	border-radius: 10px;
}

.qr-code-wrapper img {
	display: block;

	width: 160px;
	height: 160px;

	object-fit: contain;
}
.qr-code-wrapper canvas,
.qr-code-wrapper img {
	display: block;
	width: 160px !important;
	height: 160px !important;
	max-width: 100%;
	max-height: 100%;
	margin: 0 auto;
}

/* =========================================================
           QR INSTRUCTION
        ========================================================= */

.qr-instruction {
	max-width: 270px;

	margin-top: 10px;

	color: var(--muted);

	font-size: 10.5px;

	line-height: 1.45;
}

/* =========================================================
           DOWNLOAD QR BUTTON
        ========================================================= */

.download-qr-button {
	width: 100%;

	max-width: 180px;

	min-height: 40px;

	margin-top: 14px;

	display: flex;

	align-items: center;

	justify-content: center;

	gap: 7px;

	border: 1px solid #d1d5db;

	border-radius: 8px;

	background: #ffffff;

	color: var(--text);

	font-family: var(--f-body);

	font-size: 11px;

	font-weight: 700;

	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);

	transition:
		background 0.15s ease,
		border-color 0.15s ease,
		box-shadow 0.15s ease,
		transform 0.1s ease;
}

.download-qr-button:hover {
	background: #f8fafc;

	border-color: #94a3b8;

	box-shadow: 0 3px 8px rgba(15, 23, 42, 0.08);
}

.download-qr-button:active {
	transform: scale(0.985);

	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

.download-qr-button svg {
	flex-shrink: 0;

	color: #475569;
}

/* =========================================================
           MOBILE
        ========================================================= */

@media (max-width: 600px) {
	.payment-header {
		padding: 13px 16px;
	}

	.secure-payment span {
		display: none;
	}

	.payment-main {
		max-width: 100%;

		padding: 28px 14px 40px;
	}

	.payment-heading {
		margin-bottom: 19px;
	}

	.payment-heading h1 {
		font-size: 23px;
	}

	.payment-card-head {
		padding: 17px;
	}

	.payment-card-body {
		padding: 17px;
	}

	.payment-method-grid {
		grid-template-columns: 1fr 1fr;

		gap: 7px;
	}

	.payment-method {
		min-height: 65px;

		padding: 9px 10px;
	}

	.method-radio {
		margin-right: 9px;
	}

	.method-logo img {
		max-width: 105px;

		max-height: 32px;
	}

	.review-modal {
		padding: 12px;
	}

	.review-modal-card {
		max-height: calc(100vh - 24px);

		border-radius: 14px;
	}

	.review-modal-header {
		padding: 17px;
	}

	.review-modal-body {
		padding: 16px 17px 17px;
	}

	.review-modal-footer {
		padding: 13px 17px 17px;
	}

	.qr-modal {
		padding: 12px;
	}

	.qr-modal-card {
		max-width: 340px;
	}

	.qr-modal-header {
		padding: 14px 15px 12px;
	}

	.qr-modal-body {
		padding: 15px 15px 16px;
	}

	.qr-code-wrapper {
		width: 165px;
		height: 165px;

		padding: 7px;
	}

	.qr-code-wrapper img {
		width: 149px;
		height: 149px;
	}

	.download-qr-button {
		max-width: 165px;
	}
}

@media (max-width: 380px) {
	.payment-main {
		padding-left: 10px;
		padding-right: 10px;
	}

	.field-row {
		grid-template-columns: 1fr;
	}

	.payment-method-grid {
		grid-template-columns: 1fr;
	}

	.review-modal-footer {
		grid-template-columns: 1fr;
	}
}