/* Styles for the "Delivered by" banner and popup */

/* Banner */
.cp-delivery {
	position: relative;
	margin: 10px 0 18px;
}

.cp-delivery-banner {
	font-size: 14px;
	color: #2b2b2b;
}

.cp-delivery-label {
	font-weight: 500;
	color: #2a2a2a;
	font-size: 16px;
	margin-right: 4px;
}

.cp-delivery-open {
	color: #2a7bd4;
	font-weight: 600;
	text-decoration: none;
}

.cp-delivery-open:hover {
	text-decoration: underline;
}

.cp-delivery-date {
	color: #0097ce;
	font-size: 17px;
	text-decoration: underline;
	font-weight: 600;
}

.cp-delivery-countdown {
	color: #6f6f6f;
	font-size: 12px;
	display: block;
}

.cp-delivery-countdown strong {
	font-weight: 700;
}

/* Popup */
.cp-popup-backdrop {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, .3);
	z-index: 999;
}

.cp-delivery-popup {
	display: none;
	position: absolute;
	z-index: 1000;
	top: 100%;
	left: 0;
	margin-top: 10px;
	width: 660px;
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 8px 28px rgba(0, 0, 0, .15);
	border: 1px solid #e6e6e6;
}

.cp-delivery.open .cp-delivery-popup {
	display: block;
}

.cp-delivery.open .cp-popup-backdrop {
	display: block;
}

.cp-popup-arrow {
	position: absolute;
	top: -10px;
	left: 40px;
	width: 20px;
	height: 20px;
	background: #fff;
	border-left: 1px solid #e6e6e6;
	border-top: 1px solid #e6e6e6;
	transform: rotate(45deg);
}

.cp-popup-header {
	padding: 14px 16px 10px;
	border-bottom: 1px solid #eaeaea;
	display: flex;
	align-items: center;
	gap: 12px;
}

body h3.cp-popup-title {
	margin: 0;
	font-size: 17px !important;
	color: rgb(0, 151, 206) !important;
	font-weight: 700 !important;
	display: flex;
	flex: 1;
	line-height: 20px !important;
	white-space: nowrap;
}

.cp-popup-title .cp-zip-display {
	color: #6f6f6f;
	font-weight: 400;
	margin-left: 6px;
	font-size: 13px;
}

.cp-popup-countdown {
	color: #6f6f6f;
	font-size: 12px;
	margin-bottom: 10px;
}

.cp-popup-close {
	border: 0;
	background: transparent;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	color: #666;
	padding: 2px 6px;
}

.cp-popup-close:hover {
	color: #111;
}

.cp-popup-body {
	padding: 16px;
	padding-top: 0px;
}

/* Ensure body is never hidden when popup is open (defensive against theme styles) */
.cp-delivery.open .cp-delivery-popup .cp-popup-body {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
}

.cp-zip-label {
	display: inline;
	margin-bottom: 8px;
	color: #5f5f5f;
	font-size: 15px;
	font-weight: 500;
}

.cp-zip-row {
	display: inline-block;
	gap: 10px;
	margin-top: 12px !important;
}

.cp-zip {
	flex: 1;
	border: 1px solid #d6d6d6;
	border-radius: 6px;
	padding: 10px 12px;
	font-size: 14px;
}

.cp-go {
	background: #d5d5d5;
	color: #777;
	border: 0;
	border-radius: 6px;
	padding: 10px 16px;
	font-weight: 700;
	cursor: not-allowed;
}

.cp-go:disabled {
	border: 0;
	border-radius: 6px !important;
	padding: 12px 18px !important;
	font-weight: 700;
	min-height: unset;
	cursor: not-allowed;
}

.cp-go.enabled {
	background: rgb(0, 151, 206);
	color: #fff;
	cursor: pointer;
	border-radius: 7px !important;
	font-size: 12px;
	min-height: unset !important;
	margin-left: 10px;
	padding: 11px 20px;
}

.cp-zip-note {
	margin-top: 8px;
	color: #888;
	font-size: 12px;
}

/* Date card styles */
.cp-date-options {
	margin-top: 14px;
	display: flex;
}

.cp-date-card {
	border: 2px solid #eeeeee;
	border-radius: 10px;
	padding: 5px 16px;
	width: max-content;
	box-shadow: 0 1px 0 rgba(0, 0, 0, .03);
	position: relative;
	cursor: pointer;
}

.cp-date-card+.cp-date-card {
	margin-left: 12px;
}

.cp-date-card--included {
	background: #f6fdf9;
}

.cp-date-card--express {
	border-color: #e0e0e0;
	background: #f4f4f4;
}

.cp-date-price {
    color: #e05252;
    font-weight: 500;
    font-size: 12px;
}

body .container-wrap .cp-date-card h4 {
    margin: 0;
    font-size: 15px !important;
    color: #2a2a2a;
    font-weight: 500 !important;
}
/* Green check at bottom-right of card */
.cp-date-card--included.active::after {
	content: "";
	position: absolute;
	right: -8px;
	bottom: -6px;
	width: 17px;
	height: 17px;
	background: #19a45b;
	border-radius: 50%;
}

.cp-date-card--included.active::before {
	content: "";
	position: absolute;
	right: -5px;
	bottom: 0px;
	width: 8px;
	height: 3px;
	border: 2px solid #ffffff;
	border-top: 0;
	z-index: 99;
	border-right: 0;
	transform: rotate(-45deg);
}

/* Flip above when needed */
.cp-delivery.flip .cp-delivery-popup {
	top: auto;
	bottom: 100%;
	margin-top: 0;
	margin-bottom: 10px;
}

.cp-delivery.flip .cp-popup-arrow {
	top: auto;
	bottom: -10px;
	transform: rotate(225deg);
}

/* Mode toggles */
.cp-delivery.mode-date .cp-zip-label,
.cp-delivery.mode-date .cp-zip-row,
.cp-delivery.mode-date .cp-zip-note {
	display: none;
}

.cp-delivery.mode-input .cp-date-options {
	display: none;
}

.cp-delivery.mode-input .cp-zip-display {
	display: none !important;
}

.cp-date-badge {
	font-size: 12px;
	color: #19a45b;
}

.cp-date-card h4 {
	margin: 0px !important;
}

input#cp-zip {
	max-width: 70px;
	padding: 5px !important;
	font-weight: 600;
	background: #f4f4f4;
	margin-left: 10px;
}

input#cp-zip::placeholder {
	font-size: 12px;
}

span.cp-zip-text {
    text-decoration: underline;
}

.cp-date-card.cp-date-card--express.active {
    border-color: #e05152;
}
.cp-date-card.cp-date-card--included.active {
    border-color: #19a45b;
}

.cp-date-card--express.active::before {
    content: "";
    position: absolute;
    right: -5px;
    bottom: 0px;
    width: 8px;
    height: 3px;
    border: 2px solid #ffffff;
    border-top: 0;
    z-index: 99;
    border-right: 0;
    transform: rotate(-45deg);
}

.cp-date-card--express.active::after {
    content: "";
    position: absolute;
    right: -8px;
    bottom: -6px;
    width: 17px;
    height: 17px;
    background: #e05152;
    border-radius: 50%;
}


/* Responsiveness */
@media (max-width: 520px) {
	.cp-delivery-popup {
		width: 94vw;
	}

	.cp-popup-arrow {
		left: 20px;
	}
}

@media (max-width: 724px) {
	.cp-popup-header {
		flex-direction: column;
		align-items: start;
	}

	.cp-delivery-popup {
		width: 100%;
	}

	button.cp-popup-close {
		position: absolute;
		right: 5px;
		top: 5px;
	}

	label.cp-zip-label {
		display: block;
		margin-top: 10px;
	}

	.cp-zip-row {
		margin: 0px !important;
	}

	input#cp-zip {
		margin: 0px;
	}
}

@media (max-width: 460px) {
	body h3.cp-popup-title {
		display: flex;
		flex-direction: column;
		align-items: start;
	}

	span.cp-zip-display {
		margin: 0px !important;
		margin-top: 5px !important;
	}

	.cp-popup-header {
		gap: 0px;
	}
	label.cp-zip-label {
		font-size: 13px !important;
	}
}

@media (max-width: 380px) {
	body .cp-date-card h4 {
		margin: 0px !important;
		font-size: 11px !important;
	}
	label.cp-zip-label {
		font-size: 12px !important;
	}
}