/* ==========================================================================
   MODULE / PICKUP-DELIVERY
   ========================================================================== */
.m-pickup-delivery-options,
.m-pickup-delivery {
	box-sizing: border-box;
}

.m-pickup-delivery-options *,
.m-pickup-delivery-options *::before,
.m-pickup-delivery-options *::after,
.m-pickup-delivery *,
.m-pickup-delivery *::before,
.m-pickup-delivery *::after {
	box-sizing: inherit;
}

.is-inert {
	pointer-events: none;
	-webkit-user-select: none;
	user-select: none;
}

.has-dialog {
	height: 100vh;
	overflow: hidden;
}

.m-pickup-delivery-options:not([hidden]) {
	display: flex;
	align-items: center;
	padding-top: 1rem;
}

.m-pickup-delivery-options__location {
	margin-right: 4em;
	padding-right: 4em;
	position: relative;
	font-size: 0.875rem;
	line-height: 1.5;
}

.m-pickup-delivery-options__location::after {
	display: block;
	width: 1px;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	background-color: #d8d8d8;
	content: '';
}

.m-pickup-delivery-options__details {
	flex-shrink: 0;
	font-size: 0.875rem;
	line-height: 1.5;
}

.m-pickup-delivery-options__edit {
	margin-left: 1em;
	color: #242424;
	font-size: 0.75rem;
	background-color: #fff;
	border: 1px solid currentColor;
	cursor: pointer;
	overflow: visible;
	user-select: none;
}

.m-pickup-delivery-options__details svg {
	width: 1rem;
	height: 1rem;
	margin-right: 0.5em;
	fill: #4a4a4a;
	vertical-align: middle;
}

.m-pickup-delivery-options__action,
.m-clock__continue {
	width: 15em;
	padding: 1.25em 0;
	color: #fff;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1;
	text-align: center;
	text-transform: uppercase;
	border: 0;
	border-radius: 0.25em;
	background-color: #242424;
	cursor: pointer;
	overflow: visible;
	user-select: none;
}

.m-pickup-delivery-options__action:hover,
.m-clock__continue:hover {
	background-color: #4e4e4e;
}

.m-pickup-delivery-options__action.is-disabled,
.m-clock__continue[disabled] {
	box-shadow: none;
	cursor: not-allowed;
	opacity: 0.3;
	pointer-events: none;
}

.m-pickup-delivery {}

.m-pickup-delivery[aria-hidden="true"] {
	display: none;
}

.m-pickup-delivery[aria-hidden="false"] {
	display: block;
	position: relative;
	z-index: 500;
}

	.m-pickup-delivery__overlay {
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.6);
	}

	.m-pickup-delivery__overlay,
	.m-pickup-delivery__container {
		will-change: transform;
	}

		.m-pickup-delivery__container {
			width: 90vw;
			max-width: 40rem;
			min-width: 20rem;
			max-height: 90vh;
			padding: 2rem;
			color: #4a4a4a;
			background-color: #fff;
			border-radius: 0.25rem;
			overflow-y: auto;
		}

			.m-pickup-delivery__header {
				display: flex;
				align-items: center;
				justify-content: space-between;
			}

				.m-pickup-delivery__title {
					margin: 0;
					font-size: 1.25rem;
					font-weight: 700;
				}

				.m-pickup-delivery__close {
					background-color: transparent;
					border: 0 none;
					border-radius: 50%;
					line-height: normal;
				}

				.m-pickup-delivery__close::before {
					content: "\2715";
				}

				.m-pickup-delivery__close:active {
					box-shadow: 0 0 1px 1px currentColor;
				}
				
				.m-pickup-delivery__close:hover {
					background-color: #f7f7f7;
					outline: 0 none;
				}
				
				.m-pickup-delivery__close:focus {
					box-shadow: 0 0 2px 1px currentColor;
					outline: 0 none;
				}
				
			.m-pickup-delivery__content {
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				margin-top: 2rem;
			}

			@media (min-width: 48em) {
				.m-pickup-delivery__content {
					justify-content: space-between;
				}
			}

				.m-pickup-delivery__content > *:last-child {
					margin-bottom: 0;
				}

/**************************\
  Animation Style
\**************************/
@keyframes dialogFadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes dialogFadeOut {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}

@keyframes dialogSlideIn {
	from {
		transform: translateY(15%);
	}
	to {
		transform: translateY(0);
	}
}

@keyframes dialogSlideOut {
	from {
		transform: translateY(0);
	}
	to {
		transform: translateY(-10%);
	}
}

.m-pickup-delivery[aria-hidden="false"] .m-pickup-delivery__overlay {
	animation: dialogFadeIn .3s cubic-bezier(0.0, 0.0, 0.2, 1);
}

.m-pickup-delivery[aria-hidden="false"] .m-pickup-delivery__container {
	animation: dialogSlideIn .3s cubic-bezier(0, 0, 0.2, 1);
}

.m-pickup-delivery[aria-hidden="true"] .m-pickup-delivery__overlay {
	animation: dialogFadeOut .3s cubic-bezier(0.0, 0.0, 0.2, 1);
}

.m-pickup-delivery[aria-hidden="true"] .m-pickup-delivery__container {
	animation: dialogSlideOut .3s cubic-bezier(0, 0, 0.2, 1);
}

.m-calendar,
.m-clock {
	width: 20rem;
	margin-bottom: 1rem;
	color: #4a4a4a;
	background-color: #fff;
}

.m-calendar button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	padding: 0;
	color: inherit;
	font: inherit;
	font-size: 0.875rem;
	line-height: 1;
	text-align: center;
	border: 0;
	border-radius: 50%;
	background-color: #fff;
	cursor: pointer;
	overflow: visible;
	user-select: none;
}

.m-calendar button:active {
	box-shadow: 0 0 1px 1px currentColor;
}

.m-calendar button:disabled {
	cursor: auto;
	opacity: 0.3;
}

.m-calendar button:not(:disabled):hover {
	background-color: #f7f7f7;
	outline: 0 none;
}

.m-calendar button:not(:disabled):focus {
	box-shadow: 0 0 2px 1px currentColor;
	outline: 0 none;
}

.m-calendar .m-calendar-header {
	display: flex;
	align-items: center;
	padding: 1em 0;
	font-size: 0.875em;
}

.m-calendar .m-calendar-header svg {
	width: 1em;
	height: 1em;
	fill: #4a4a4a;
}

.m-calendar .m-calendar-header__label {
	width: 100%;
	flex: 1;
	margin: 0;
	font-size: inherit;
	font-weight: bold;
	text-align: center;
}

.m-calendar .m-calendar-week {
	display: flex;
	flex-wrap: wrap;
	font-size: 0.875rem;
	background-color: #f7f7f7;
}

.m-calendar .m-calendar-week span {
	max-width: 14.28%;
	flex: 0 0 14.28%;
	flex-direction: column;
	padding: 0.66em 0;
	color: #545454;
	font-size: 1em;
	text-align: center;
	text-transform: uppercase;
}

.m-calendar .m-calendar-body {
	display: flex;
	flex-wrap: wrap;
}

.m-calendar .m-calendar-date {
	align-items: center;
	background-color: #fff;
	display: flex;
	flex-direction: column;
	flex: 0 0 14.28%;
	max-width: 14.28%;
	padding: 10px 0;
}

.m-calendar .m-calendar-date--active {
	cursor: pointer;
}

.m-calendar .m-calendar-date--today {
}

.m-calendar .m-calendar-date--first-available button {
	box-shadow: 0 0 0 1px currentColor;
	outline: 0 none;
}

.m-calendar .m-calendar-date--selected button,
.m-calendar .m-calendar-date--selected button:hover {
	color: #fff;
	background-color: #242424;
}

.m-calendar .m-calendar-date--disabled {
	user-select: none;
}

.m-clock {
	text-align: right;
}

.m-clock__content {
	display: flex;
	margin-bottom: 1rem;
	text-align: left;
}

@media (min-width: 48em) {
	.m-calendar {
		margin-bottom: 1rem;
	}
	
	.m-clock {
		width: 14rem;
	}
	
	.m-clock__content {
		height: 26rem;
		margin-bottom: 0;
	}
}

.m-clock__select-date:not([hidden]) {
	display: inline-flex;
	align-items: center;
	align-self: center;
	height: 14rem;
	padding: 0 3rem;
	font-size: 0.875rem;
	line-height: 1.5;
	text-align: center;
	border: 1px dashed #d8d8d8;
	border-radius: 0.25em;
}

.m-clock__times {
	width: 100%;
	padding-top: 0.75rem;
}

.m-clock__title {
	font-size: 0.875rem;
	font-weight: 600;
	text-align: center;
}

.m-clock__times-list {
	display: flex;
	flex-wrap: wrap;
	max-height: 18rem;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.m-clock__time {
	width: 100%;
	flex: 0 0 calc(50% - 0.5rem);
	margin: 0 0.5rem 0.5rem 0;
	padding: 0.75rem 0;
	color: #4a4a4a;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1;
	text-align: center;
	text-transform: uppercase;
	border: 1px solid #d8d8d8;
	border-radius: 0.25em;
	background-color: #fff;
	cursor: pointer;
	overflow: visible;
	user-select: none;
}

.m-clock__time:active,
.m-clock__time:focus,
.m-clock__time.is-selected {
	border-color: #242424;
	box-shadow: inset 0 0 0 1px #242424;
}

.m-clock__time:hover:not(.is-selected) {
	border-color: #9f9f9f;
	box-shadow: inset 0 0 0 1px #9f9f9f;
}