make form buy-by-phone

themes/classic/assets/css/custom.scss

@@ -4537,3 +4537,217 @@ section#checkout-payment-step {
 		}
 	}
 }
+
+#buy-by-phone-popup {
+	position: fixed;
+	inset: 0;
+	z-index: 999999;
+	opacity: 0;
+	visibility: hidden;
+
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	transition: opacity 250ms ease, visibility 250ms ease;
+	overflow: auto;
+
+	&.active {
+		opacity: 1;
+		visibility: visible;
+	}
+
+	&::before {
+		content: '';
+		position: fixed;
+		width: 100%;
+		height: 100%;
+		background: rgba(0, 0, 0, 0.2);
+		backdrop-filter: blur(2px);
+	}
+
+	.buy-by-phone-popup--wrapper {
+		position: relative;
+		width: 100%;
+		max-width: 700px;
+		padding: 30px;
+		background: #fff;
+		border: 1px solid #e5e5e5;
+		border-radius: 5px;
+		z-index: 1;
+
+		.popup-header {
+			position: relative;
+
+			&--close {
+				position: absolute;
+				top: -25px;
+				right: -20px;
+
+				.close-popup {
+					font-size: 16px;
+				}
+			}
+		}
+
+		.popup-body {
+			display: grid;
+			grid-template-columns: 1fr 1fr;
+			max-height: calc(100vh - 130px);
+			overflow-y: auto;
+			padding: 10px 10px 10px 0;
+			column-gap: 20px;
+
+			.popup-body--left {
+				display: flex;
+				align-items: center;
+
+				.popup-img {
+					.product-cover {
+						width: 100%;
+						max-width: fit-content;
+						margin-left: auto;
+						margin-right: auto;
+					}
+				}
+			}
+
+			.popup-body--right {
+				display: flex;
+				justify-content: center;
+				flex-direction: column;
+
+				p {
+					color: #000;
+					font-size: 14px;
+					font-weight: 600;
+				}
+
+				.form-group {
+					margin-bottom: 5px;
+
+					.form-control {
+						border-radius: 3px;
+
+						&.form-control-name,
+						&.form-control-phone {
+							&::placeholder {
+								color: #000;
+							}
+						}
+					}
+
+					&.form-group-radio {
+						display: flex;
+						flex-direction: row;
+						align-items: center;
+						gap: 15px;
+
+						.radio-inline {
+							display: flex;
+							align-items: center;
+							gap: 5px;
+
+							input[type='radio'] {
+								width: 20px;
+								height: 20px;
+							}
+						}
+					}
+
+					&.form-group-polityka {
+						display: flex;
+						flex-direction: row;
+						gap: 10px;
+						align-items: baseline;
+
+						input#polityka {
+							width: fit-content;
+						}
+
+						label {
+							text-align: left;
+							font-size: 10px;
+							margin-bottom: 0;
+						}
+					}
+				}
+
+				.form-cols {
+					display: grid;
+					grid-template-columns: 1fr 1fr;
+					column-gap: 5px;
+					font-size: 16px;
+				}
+
+				.popup-body-top {
+					> p {
+						color: #e79332;
+
+						> a {
+							color: #e79332;
+							text-decoration: underline;
+						}
+					}
+				}
+
+				.popup-input-alert {
+					color: #ff0000;
+				}
+			}
+
+			@media (max-width: 700px) {
+				grid-template-columns: 1fr;
+
+				.popup-body--left {
+					display: none;
+				}
+			}
+		}
+
+		.popup-alert {
+			display: none;
+			position: absolute;
+			inset: 0;
+
+			&.active {
+				display: block;
+			}
+
+			&::after {
+				content: '';
+				position: absolute;
+				inset: -1px;
+				background: rgba(0, 0, 0, 0.3);
+				border-radius: 5px;
+				backdrop-filter: blur(2px);
+			}
+
+			.popup-alert-wrapper {
+				position: fixed;
+				left: 50%;
+				top: 50%;
+				transform: translate(-50%, -50%);
+				padding: 30px;
+				background: #fff;
+				border: 1px solid #e5e5e5;
+				border-radius: 5px;
+				z-index: 1;
+				width: 100%;
+				max-width: 300px;
+
+				.popup-alert-close {
+					position: absolute;
+					top: 5px;
+					right: 10px;
+					font-size: 16px;
+				}
+
+				.popup-alert-data {
+					p {
+						margin: 10px 0 0 0;
+					}
+				}
+			}
+		}
+	}
+}