#contact-bubble-popup {
    position: fixed;
    z-index: 99999;
    inset: 0;
    background: var(--primary);
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
    overflow: auto;
    transition: all 0.3s;

    &.open {
	    visibility: visible;
	    pointer-events: all;
	    opacity: 1;
    }

    @media only screen and (max-width: 980px) {
		padding-bottom: 64px;
    } 

    .top-header {
		padding: 44px;
		box-sizing: border-box;
		display: flex;
		align-items: center;

	    @media only screen and (max-width: 980px) {
    		padding: 24px 24px 64px 24px;
	    } 

    	img {
    		height: 44px;
    		filter: invert(100%);
    	}

    	.close {
    		cursor: pointer;
    		margin-left: auto;
    		position: relative;
			width: 50px;
			height: 50px;
			border-radius: 50%;
			width: fit-content;
			height: fit-content;

		    &:after {
		        content: "";
		        border: 3px solid transparent;
		        position: absolute;
		        inset: 0;
		        border-radius: 50%;
		        transition: all 0.3s;       
		    }

		    &:hover {
		        &:after {
		            inset: -8px;
		            border-color: #111;
		        }
		    }

    		i {
    			display: block;
	    		width: 50px;
	    		height: 50px;
	    		border-radius: 50%;
	    		border: 3px solid #111;
	    		position: relative;

			    @media only screen and (max-width: 980px) {
		    		width: 36px;
		    		height: 36px;
			    } 

	    		&:before, &:after {
	    			content: "";
	    			position: absolute;
	    			inset: 0;
	    			width: 3px;
	    			height: 22px;
	    			background: #111;
	    			margin: auto;

				    @media only screen and (max-width: 980px) {
			    		height: 19px;
				    } 
	    		}

	    		&:before {
	    			transform: rotate(45deg);
	    		}

	     		&:after {
	    			transform: rotate(-45deg);
	    		}   
    		}		
    	}
    }
}

#contact {
	.row {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 64px;

	    @media only screen and (max-width: 980px) {
	        grid-template-columns: 1fr;
	    } 
		
	}

	.subline {
		margin-bottom: 28px;
	}

	.list {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		gap: 24px;		
		margin-top: 12px;

	    @media only screen and (max-width: 980px) {
	        grid-template-columns: 1fr;
	    } 

		.item {
			display: grid;
			gap: 24px;					

			label {
				font-size: 26px;
				font-family: var(--font-big);
				font-weight: 700;
				text-transform: uppercase;
				text-box: cap alphabetic;
				color: #fff;
			}

			.text {
				text-decoration: underline;
			}
		}
	}

	.form {
		display: grid;
		align-content: baseline;
		gap: 24px;

		.label {
			font-size: 40px;
			font-family: var(--font-big);
			font-weight: 700;
			text-transform: uppercase;
			text-box: cap alphabetic;
			color: #fff;
		}
	}

	.header {
		display: grid;
		align-content: baseline;
		gap: 24px;
	}

	&[data-theme="primary"] {
		.subline {
			background: #fff;
			color: #111;
		}

		.title {
			color: #111;

			svg circle {
				fill: #fff;
			}
		}

		.description {
			color: #111;
		}

		.list {
			.item {
				label {
					color: #111;
				}

				.text {
					color: #111;
				}
			}
		}

		.form {
			.label {
				color: #111;
			}

			input, textarea, select {
				background: #fff;
				border-color: #111;
				color: #111;
			}

			.wpforms-field-label {
				color: #111;
			}

			.wpforms-submit-container button {
				background: #111;
				color: #fff;
			}
		}

	}
}