@import "elements/vars"
@import "../mixins/mixins"

.popup-block
	background: #fafafa
	text-align: left
	max-width: 450px
	margin: 40px auto
	position: relative
	border-radius: 20px
	


.popup__header
	background-color: $accent-color
	padding: 30px
	border-top-left-radius: 20px
	border-top-right-radius: 20px
	text-align: center

	h4
		color: #fff
		font-size: 28px
		text-shadow: 0 3px 10px rgba(0, 0, 0, 0.1)
		margin-bottom: 15px

	p
		//color: #fff
		font-size: 16px
		//font-weight: 300
		//text-shadow: 0 3px 10px rgba(0, 0, 0, 0.1)



.popup__body
	padding:
		top: 40px
		bottom: 40px
		left: 30px
		right: 30px
	border-bottom-left-radius: 20px
	border-bottom-right-radius: 20px
	text-align: center
	background-color: #f7f7f7

	.form-group
		margin-bottom: 20px

		&:last-child
			margin-bottom: 0

		input
			font-family: 'GothamPro', sans-serif
			font-size: 18px
			border: 1px solid #dedede
			padding: 15px 30px
			border-radius: 50px
			outline: 0

			&::placeholder
				font-family: 'GothamPro', sans-serif
				font-size: 18px
				font-weight: 300
				///color: #ccc

	.btn
		width: 281px
		height: 53px
		padding: 0