.epic-payment {
	--epic-border: #ddd8cf;
	--epic-text: #102333;
	--epic-muted: #5f6d7a;
	--epic-surface: #ffffff;
	--epic-soft: #faf8f4;
	--epic-error: #b42318;
	box-sizing: border-box;
	margin: 0 auto;
	color: var(--epic-text);
	font-family: inherit;
}

.epic-payment *,
.epic-payment *::before,
.epic-payment *::after {
	box-sizing: border-box;
}

.epic-preview-page {
	--epic-text: #102333;
	--epic-muted: #5f6d7a;
	margin: 0;
	background: #f5f7f9;
	color: var(--epic-text);
}

.epic-preview {
	box-sizing: border-box;
	width: min(100%, 1040px);
	margin: 0 auto;
	padding: 48px 24px;
}

.epic-preview__header {
	max-width: 760px;
	margin: 0 auto 22px;
}

.epic-preview__header p {
	margin: 0 0 6px;
	color: var(--epic-muted);
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
}

.epic-preview__header h1 {
	margin: 0;
	color: var(--epic-text);
	font-size: 28px;
	line-height: 1.2;
}

.epic-payment__form {
	background: var(--epic-surface);
	border: 1px solid var(--epic-border);
	border-radius: 8px;
	box-shadow: 0 16px 36px rgba(15, 23, 42, 0.1);
	padding: 28px;
}

.epic-payment--compact .epic-payment__form {
	padding: 22px;
}

.epic-payment--spacious .epic-payment__form {
	padding: 34px;
}

.epic-payment__header {
	margin-bottom: 26px;
}

.epic-payment--compact .epic-payment__header {
	margin-bottom: 20px;
}

.epic-payment--spacious .epic-payment__header {
	margin-bottom: 32px;
}

.epic-payment__header h2 {
	margin: 0 0 8px;
	color: var(--epic-text);
	font-size: 24px;
	line-height: 1.25;
}

.epic-payment__header p {
	margin: 0;
	color: var(--epic-muted);
	font-size: 15px;
	line-height: 1.5;
}

.epic-payment__grid {
	display: grid;
	gap: 18px 16px;
}

.epic-payment--compact .epic-payment__grid {
	gap: 13px 14px;
}

.epic-payment--spacious .epic-payment__grid {
	gap: 22px 18px;
}

.epic-payment__grid--two {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.epic-payment__grid--one,
.epic-payment__field--wide {
	grid-template-columns: 1fr;
}

.epic-payment__field--wide {
	grid-column: 1 / -1;
}

.epic-payment__field label {
	display: block;
	margin-bottom: 6px;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.35;
}

.epic-payment__required {
	color: var(--epic-primary-color);
}

.epic-payment__field input,
.epic-payment__field textarea,
.epic-payment__field select {
	display: block;
	width: 100%;
	min-height: 46px;
	border: 1px solid var(--epic-border);
	border-radius: 6px;
	background: #fff;
	color: var(--epic-text);
	font: inherit;
	padding: 11px 13px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.epic-payment--compact .epic-payment__field input,
.epic-payment--compact .epic-payment__field textarea,
.epic-payment--compact .epic-payment__field select {
	min-height: 42px;
	padding: 9px 12px;
}

.epic-payment--spacious .epic-payment__field input,
.epic-payment--spacious .epic-payment__field textarea,
.epic-payment--spacious .epic-payment__field select {
	min-height: 50px;
	padding: 13px 15px;
}

.epic-payment__field textarea {
	min-height: 88px;
	resize: vertical;
}

.epic-payment__field input:focus,
.epic-payment__field textarea:focus,
.epic-payment__field select:focus {
	border-color: var(--epic-primary-color);
	box-shadow: 0 0 0 3px rgba(var(--epic-primary-rgb), 0.18);
	outline: none;
}

.epic-payment__phone {
	display: grid;
	grid-template-columns: 22px 56px minmax(0, 1fr);
	align-items: center;
	border: 1px solid var(--epic-border);
	border-radius: 6px;
	background: #fff;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.epic-payment__phone:focus-within {
	border-color: var(--epic-primary-color);
	box-shadow: 0 0 0 3px rgba(var(--epic-primary-rgb), 0.18);
}

.epic-payment__phone .epic-payment__phone-code,
.epic-payment__phone input[type="tel"] {
	min-height: 44px;
	border: 0;
	border-radius: 0;
	background: transparent;
	font-size: 16px;
	box-shadow: none;
}

.epic-payment__phone-prefix {
	display: inline-flex;
	align-items: center;
	justify-content: flex-end;
	min-height: 44px;
	color: var(--epic-muted);
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	pointer-events: none;
}

.epic-payment__phone .epic-payment__phone-code {
	width: 56px;
	padding-right: 8px;
	padding-left: 0;
	color: var(--epic-text);
	font-size: 15px;
	font-weight: 600;
	text-align: left;
}

.epic-payment__phone .epic-payment__phone-code:focus,
.epic-payment__phone input[type="tel"]:focus {
	box-shadow: none;
	outline: none;
}

.epic-payment__phone .epic-payment__phone-code + input {
	padding-left: 13px;
	border-left: 1px solid var(--epic-border);
}

.epic-payment--compact .epic-payment__phone-prefix,
.epic-payment--compact .epic-payment__phone .epic-payment__phone-code,
.epic-payment--compact .epic-payment__phone input[type="tel"] {
	min-height: 40px;
}

.epic-payment--spacious .epic-payment__phone-prefix,
.epic-payment--spacious .epic-payment__phone .epic-payment__phone-code,
.epic-payment--spacious .epic-payment__phone input[type="tel"] {
	min-height: 48px;
}

.epic-payment__help {
	margin: 6px 0 0;
	color: var(--epic-muted);
	font-size: 13px;
	font-style: italic;
	line-height: 1.4;
}

.epic-payment__methods {
	margin-top: 22px;
}

.epic-payment--compact .epic-payment__methods,
.epic-payment--compact .epic-payment__button {
	margin-top: 18px;
}

.epic-payment--spacious .epic-payment__methods,
.epic-payment--spacious .epic-payment__button {
	margin-top: 28px;
}

.epic-payment__methods-label {
	display: block;
	margin-bottom: 10px;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.35;
}

.epic-payment__method-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.epic-payment__method {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	min-height: 48px;
	border: 2px solid var(--epic-border);
	border-radius: 8px;
	background: #fff;
	color: var(--epic-text);
	cursor: pointer;
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	padding: 11px 14px 11px 16px;
	text-align: left;
	transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.epic-payment__method:hover,
.epic-payment__method:focus-visible {
	border-color: var(--epic-primary-color);
	box-shadow: 0 0 0 3px rgba(var(--epic-primary-rgb), 0.12);
	outline: none;
}

.epic-payment__method.is-selected {
	border-color: var(--epic-primary-color);
	background: rgba(var(--epic-primary-rgb), 0.06);
}

.epic-payment__method-logos,
.epic-payment__note-logos {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	flex: 0 0 auto;
	gap: 5px;
	justify-content: flex-end;
}

.epic-payment__logo {
	box-sizing: border-box;
	display: block;
	flex: 0 0 44px;
	width: 44px !important;
	height: 28px !important;
	min-width: 44px;
	min-height: 28px;
	max-width: none;
	object-fit: contain;
	overflow: hidden;
}

.epic-payment__logo.is-rounded {
	border-radius: 5px;
	clip-path: inset(0 round 5px);
}

.epic-payment__logo.has-border {
	border: 1px solid #d9e3ec;
	background: #fff;
	padding: 2px 4px;
}

.epic-payment__logo:not(.has-border) {
	border: 1px solid transparent;
	background: transparent;
}

.epic-payment__logo.is-full-card {
	object-fit: fill !important;
}

.epic-payment__logo.is-generic-card {
	width: 44px !important;
	height: 28px !important;
	object-fit: fill !important;
	opacity: 0.75;
}

.epic-payment__checkout-note {
	margin-top: 22px;
	padding: 16px;
	border: 1px solid var(--epic-border);
	border-radius: 8px;
	background: var(--epic-soft);
}

.epic-payment__checkout-note p {
	margin: 10px 0 0;
	color: var(--epic-muted);
	font-size: 14px;
	line-height: 1.5;
}

.epic-payment__notice {
	margin-top: 16px;
	padding: 12px 14px;
	border: 1px solid #f3b2ad;
	border-radius: 6px;
	background: #fff4f2;
	color: var(--epic-error);
	font-size: 14px;
	line-height: 1.45;
}

.epic-payment__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 48px;
	margin-top: 22px;
	border: 0;
	border-radius: 7px;
	background: var(--epic-primary-color);
	color: #fff;
	cursor: pointer;
	font: inherit;
	font-size: 16px;
	font-weight: 800;
	line-height: 1.2;
	padding: 13px 20px;
	text-transform: uppercase;
	transition: filter 0.15s ease, opacity 0.15s ease;
}

.epic-payment__button-text {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
}

.epic-payment__button:hover:not(:disabled),
.epic-payment__button:focus-visible:not(:disabled) {
	filter: brightness(0.96);
}

.epic-payment__button:disabled {
	cursor: not-allowed;
	opacity: 0.7;
}

.epic-payment__button.is-loading {
	gap: 10px;
	opacity: 0.92;
}

.epic-payment__spinner {
	display: inline-block;
	width: 16px;
	height: 16px;
	border: 2px solid rgba(255, 255, 255, 0.42);
	border-top-color: #fff;
	border-radius: 50%;
	animation: epic-spin 0.75s linear infinite;
}

.epic-payment__security {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 18px 0 0;
	color: var(--epic-muted);
	font-size: 13px;
	line-height: 1.4;
	text-align: center;
}

.epic-payment__security-icon {
	display: block;
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
	opacity: 0.78;
}

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

@media (max-width: 680px) {
	.epic-payment__form {
		padding: 22px 18px;
	}

	.epic-payment__grid--two {
		grid-template-columns: 1fr;
	}
}