﻿.container-contact {
	padding-bottom: 6rem;
	/* border: 1px dashed red; */
}
.view-header-contact { margin-bottom: 3rem; }

.section-contact-info,
.section-contact-form {
	display: flex;
	width: 100%;
	max-width: 69ch;
	margin: 0 auto;
	/* padding: 1.5rem 0; */
	flex-flow: column nowrap;
	justify-content: center;
	gap: 3ch 0;
}



/*
	.section-contact-info {
		.street-address-wrapper {}
		.street-address-wrapper.supplemental-street-address-wrapper {} => [ optional via _partial_ContactView_AdditionalAddressContent ]
		.customer-service-wrapper {}
		.customer-service-wrapper.supplemental-customer-service-wrapper {} => [ optional via _partial_ContactView_AdditionalCustomerServiceContent ]
	}
*/ 
.section-contact-info {
	margin-bottom: 3ch;
	padding: .9rem;
	a { border-bottom: var(--theme-link-border-bottom); }
	a:hover { border-bottom: var(--theme-link-hover-border-bottom); }

	.street-address-wrapper,
	.customer-service-wrapper {
		display: flex;
		flex-flow: column nowrap;
	}

	.supplemental-street-address-wrapper,
	.supplemental-customer-service-wrapper { display: none; }

	.street-address-wrapper .heading,
	.customer-service-wrapper .heading {
		margin: 0;
		padding: 0;
		text-align: left;
		font-weight: bold;
		background: transparent;
		text-transform: uppercase;
	}

	.street-address-block, 
	.customer-service-block {
		display: flex;
		flex-flow: column nowrap;
		line-height: 1.35;
	}


	/* ======================== STREET ADDRESS ========================  */
	/*
		.street-address-wrapper {
			.heading.heading-our-mailing-address {}
			.heading.heading-our-street-address {}
			p.street-address-block {
				.company-name {}
				.street-address {}
				.street-address.street-address-1 {}
				.street-address.street-address-2 {}
				.city-state-zip {}
				.country {}
				.get-directions {
					.get-directions-link {}
				}
			} /* .street-address-block ...
		} /* .street-address-wrapper ...
	*/
	.street-address-wrapper {
		/* most tenants prob won't want either .heading */
		.heading-our-mailing-address { display: none; }
		.heading-our-street-address { display: none; }

		.street-address-block {
			.company-name {
				color: #000;
				font-size: 1.2rem;
				font-weight: bold;
				text-transform: uppercase;
			}
			.street-address { text-transform: capitalize; }
			.street-address-1,
			.street-address-2 { display: none; }
			.city-state-zip {}
			.country { display: none; }
			.get-directions {
				display: none;
				.get-directions-link { text-transform: capitalize; }
			}
		}
	} /* .street-address-wrapper */

	/* ======================== CUSTOMER SERVICE ========================  */
	/*
		.customer-service-wrapper {
			.heading.heading-customer-service {}
			.customer-service-block {
				.phone-1 { span {} }
				.phone-2 { span {} }
				.phone-3 { span {} }
				.fax-1 { span {} }
				.fax-2 { span {} }
				.fax-3 { span {} }
				.email-1 { span {} }
				.email-2 { span {} }
				.email-3 { span {} }
				.hours-1 { span {} }
				.hours-2 { span {} }
				.hours-3 { span {} }
			} /* .customer-service-block ...
		} /* .customer-service-wrapper ...
	*/
	.customer-service-wrapper {
		.heading-customer-service {}
		.customer-service-block {
			.phone,
			.email,
			.fax,
			.hours {
				display: none;
				line-height: 1.5;
			}
			.phone-1,
			.email-1,
			.fax-1,
			.hours-1 { display: block; }

			span { text-transform: capitalize; }
			span:after {
				content: ":";
				padding: 0 .3ch 0 .15ch;
			}

			a, a:visited {
				color: var(--link-color-1);
				border-bottom: 1px dotted var(--link-color-1);
			}
			a:hover { border-bottom: 1px solid var(--link-color-1); }
		}
	} /* .customer-service-wrapper */

} /* .section-contact-info */


/* ======================== SECTION: CONTACT FORM ========================  */
.contact-form {
	.heading {
		margin-bottom: .9ch;
		text-transform: capitalize;
	}
	
	.label-input:not(.cbr) {
		width: 100%;
		margin-bottom: 1.5rem;
	}
		
	.optical-shop-id-wrapper {
		.label-input-optical-shop + .label-input-optical-shop {
			margin-bottom: 1.5rem;
		}
		.business-name-wrapper,
		.account-name-number-wrapper {
			display: flex;
			flex-flow: column nowrap;
			max-height: 0;
			opacity: 0;
			overflow: hidden;
			transition: all .9s ease-in-out;
		}
		.business-name-wrapper.on,
		.account-name-number-wrapper.on {
			margin-bottom: 1.5rem;
			max-height: 25.5ch;
			opacity: 1;
		}
	} /* .optical-shop-id-wrapper */
	.optical-shop-id-wrapper.dnu { display: none; }
}







.captcha-wrapper {
	margin-bottom: 1.5rem;
	justify-content: flex-end;
}
.captcha-message-wrapper {
	margin-bottom: 1.5rem;
}

.contact-error { color: red; }

.contact-success {
	color: #155724;
	background-color: #d4edda;
	border-color: #c3e6cb;
}
