/*
	All css to dailyvit product comes here!
*/

.woocommerce button.cat-btn {
	display: flex;
	align-items: center;
	font-size: 14px;
	cursor: pointer;
	padding: 10px 15px;
	background-color: #f2f2f2;
	color: #000;
	border-radius: 45px;
	transition: all 300ms ease;
}

.cat-btn .button-icon {
	height: 21px;
	width: 21px;
	margin-right: 5px;
	transition: filter 300ms ease;
}

.woocommerce button.cat-btn[selected]
/* .cat-btn:hover { */ {
	background-color: var(--primary-clr);
	color: #fff;
}

.woocommerce button.cat-btn[selected] .button-icon
/* .cat-btn:hover .button-icon { */ {
	filter: invert();
}

.dailyvit-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-gap: 5rem;
	margin-top: 2rem;
}

@media screen and (max-width: 1165px) {
	.dailyvit-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media screen and (max-width: 870px) {
	.dailyvit-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media screen and (max-width: 550px) {
	.dailyvit-grid {
		grid-gap: 3rem;
	}
}
.dailyvit-products-wrapper .dailyvit-product-card picture {
    height: 100%;
    width: 100%;
    display: block;
}

.dailyvit-products-wrapper .dailyvit-product-card figure {
	position: relative;
	line-height: unset;
	aspect-ratio: 1/1;
}

.dailyvit-products-wrapper .dailyvit-product-card figure .img-overlay {
	position: absolute;
	top: 0px;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 2rem;
	background-color: rgba(0, 0, 0, 0.5);
	opacity: 0;
	transition: opacity 500ms ease-in-out;
	overflow: hidden;
}

.img-overlay .overlay-content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100%;
}

.dailyvit-products-wrapper .dailyvit-product-card figure:hover .img-overlay {
	opacity: 1;
}

.img-overlay .overlay-content p,
.img-overlay .overlay-content a {
	color: #fff;
	font-size: clamp(1.4rem, 3vw, 1.6rem);
}

.img-overlay .overlay-content a {
	margin: 2rem 0 0 0;
	display: block;
	color: inherit !important;
	font-weight: var(--font-semibold);
	text-decoration: underline;
	line-height: 1.5;
}

.dailyvit-product-card .info p:first-of-type {
	font-size: var(--small-heading);
    font-weight: var(--font-semibold);
    margin-bottom: 0.5em;
    line-height: normal;
}

.dailyvit-products-wrapper .dailyvit-product-card .info p:first-of-type {
	font-size: clamp(1.4rem, 2vw, 1.8rem);
    font-weight: var(--font-semibold);
    margin-bottom: 0.2rem;
    line-height: normal;
}

.dailyvit-product-card p.mini {
	color: #878787;
	font-size: 1.2rem;
	line-height: 1;
}

.dailyvit-product-card .card-content {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 2rem 0 0 0;
	grid-gap: 1rem;
}

@media screen and (max-width: 650px) {
	.dailyvit-products-wrapper .dailyvit-product-card figure .img-overlay {
		display: none;
	}
}

@media screen and (max-width: 514px) {
	.dailyvit-product-card .card-content {
		flex-wrap: wrap;
	}
	.dailyvit-product-card .card-content .info {
		flex: 0 0 100%;
		margin-bottom: 1rem;
	}
}

.dailyvit-product-card .added_to_cart.wc-forward {
	display: none;
}

.woocommerce .card-content button, .woocommerce .card-content .button {
    max-height: fit-content;
	min-width: fit-content;
}

/* product controls */
.controls {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: .5rem;
}

.controls .add-symbol,
.controls .subtract-symbol {
	cursor: pointer;
	/* background-color: var(--) */
	background-color: #f2f2f2;
	border-radius: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	line-height: 1;
	width: 20px;
	height: 20px;
	padding: 0px;
	color: #000;
	font-size: 14px;
	text-align: center;
}

.controls .add-symbol span,
.controls .subtract-symbol span {
	font-size: 17px;
	line-height: 1;
}

.controls .add-symbol.loading,
.controls .subtract-symbol.loading {
	opacity: 0.5;
}

.controls .quantity-box {
	border: 1px solid #bbbbbb;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	line-height: 1;
	width: 20px;
	height: 20px;
	text-align: center;
}
.controls .quantity-box span {
	font-size: 12px;
}

.take-time {
	display: none;
}

button.add-vitamin {
	margin-top: 0;
	font-size: 1.2rem;
	letter-spacing: 1;
	background-color: #002d38;
	color: #fff;
}

.selected-products-wrapper {
	display: grid;
	grid-template-columns: repeat(2, 330px);
	grid-gap: 2rem 2rem;
}

@media screen and (max-width: 980px) {
	.selected-products-wrapper {
		grid-template-columns: 1fr;
		grid-gap: 1rem;
		max-width: 400px;
	}
}

.selected-products-wrapper .controls {
	justify-content: unset;
}

.selected-products-wrapper .dailyvit-product-card {
	padding: 1.5rem;
	border: 1px solid #dedede;
	border-radius: 20px;
}

.selected-products-wrapper .dailyvit-product-card figure {
	display: none;
}

.selected-products-wrapper .dailyvit-product-card .card-content {
	padding: unset;
}

.selected-products-wrapper .dailyvit-product-card .card-content {
	display: flex;
	flex-wrap: wrap;
	row-gap: 1rem;
}

.selected-products-wrapper .dailyvit-product-card .card-content .info {
	flex: 1 1 100%;
}

.dailyvit-product-card .product-card-labels {
	flex: 1 1 100%;
	font-size: 1.6rem;
	text-align: left;
}

.selected-products-wrapper .dailyvit-product-card .product-card-labels {
	text-align: unset;
}

.selected-products-wrapper .dailyvit-product-card .card-content .controls {
	grid-gap: .5rem;
}
.selected-products-wrapper .dailyvit-product-card .card-content .take-time {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}
.dailyvit-checkbox-wrapper label {
	font-size: 1.6rem;
	display: inline-flex;
	align-items: center;
	line-height: 1;
	padding: .4rem .4rem .4rem 1rem;
	border: 1px solid #666666;
	border-radius: 20px;
	min-width: 104px;
}

.hidden,
[data-selected='1'] button {
	display: none;
}

#product-908 .summary.entry-summary .price {
	display: none;
}

.daylyvit-price p {
	font-size: var(--h3);
}

.daylyvit-price p span {
	padding-right: 0.5rem;
}

.daylyvit-org-price p {
	font-size: var(--paragraph-small);
}


/* Searchfilter */

.dailyvit-searchfilter {
	/* display: flex;
	flex-wrap: wrap; */
	margin: 4rem 0 5rem 0;
}
/* container to keep the spacing when search div is positioned as fixed */
.dailyvit-searchfilter .search-container {
	height: 42.19px;
}

.dailyvit-searchfilter .search {
	display: flex;
	/* z-index: 101; */
	position: relative;
}

input[name='dailyvit-search'] {
	font-size: 16px;
	text-indent: 20px;
	flex: 0 0 80%;
	margin: 0 1rem 0 0;
	padding: 10px 35px 10px 20px;
	border: none;
	border-radius: 100px;
	background-color: #f2f2f2;
	outline: none;
	background-image: url('img/search-icon.svg');
	background-position: 15px 15px;
	background-repeat: no-repeat;
}

button.clear-search {
	margin: 0;
}

@media screen and (max-width: 980px) {
	input[name='dailyvit-search'] {
		flex: 1 1 90%;
	}
}

.category-list {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin: 3rem 0;
}

/* remove signup/register button from subscription products */
.product-type-subscription form.cart {
	display: none !important;
}

.scroll-to-daylivit {
	width: 144px;
}

.summary.entry-summary h3 {
	margin: 0;
}

.dailyvit-searchfilter .search.fixed {
	position: fixed;
	display: flex;
	justify-content: center;
	width: 100%;
	top: var(--total-header-height);
	left: 0;
	right: 0;
	padding: 0.5rem var(--side-padding) 0.5rem var(--side-padding);
	background-color: #fff;
	z-index: 10;
	box-shadow: 0px 4px 10px rgb(0 0 0 / 5%);
	box-shadow: var(--box-shadow);
}

.search.fixed input[name='dailyvit-search'] {
	flex: 1 1 90%;
	max-width: 1194px;
}

.disabled {
	pointer-events: none;
    background-color: #dcdcdc !important;
    color: var(--text-clr) !important;
    opacity: 0.5;
	cursor: not-allowed !important;
}

.disabled:hover {
	cursor: not-allowed !important;
}

.dailyvit-product-card .info p.price {
	font-size: 1.4rem;
}

.meta-vitamins {
	margin-top: 2rem;
}

.meta-vitamins p {
	margin-bottom: .4em;
	font-weight: 400;
}
.meta-vitamins p:first-child {
	font-weight: 500;
}

#no-vitamins-found {
	display: none;
}

/* Custom checkbox */

.dailyvit-checkbox-wrapper.disabled {
	border-radius: 12px;
}
.dailyvit-checkbox-wrapper input[type="checkbox"] {
	display: none;
	visibility: hidden;
}

.dailyvit-checkbox-wrapper .cbx {
	margin: auto;
	-webkit-user-select: none;
	user-select: none;
	cursor: pointer;
}

.dailyvit-checkbox-wrapper .cbx span {
	display: inline-block;
	vertical-align: middle;
	transform: translate3d(0, 0, 0);
}

.dailyvit-checkbox-wrapper .cbx span:first-child {
	position: relative;
	width: 18px;
	height: 18px;
	border-radius: 3px;
	transform: scale(1);
	vertical-align: middle;
	border: 1px solid #9098A9;
	transition: all 0.2s ease;
}

.dailyvit-checkbox-wrapper .cbx span:first-child svg {
	position: absolute;
	top: 3px;
	left: 2px;
	fill: none;
	stroke: #FFFFFF;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 16px;
	stroke-dashoffset: 16px;
	transition: all 0.3s ease;
	transition-delay: 0.1s;
	transform: translate3d(0, 0, 0);
}

.dailyvit-checkbox-wrapper .cbx span:first-child:before {
	content: "";
	width: 100%;
	height: 100%;
	background: var(--primary-clr);
	display: block;
	transform: scale(0);
	opacity: 1;
	border-radius: 50%;
}

.dailyvit-checkbox-wrapper .cbx span:last-child {
	padding-left: 8px;
}

.dailyvit-checkbox-wrapper .cbx:hover span:first-child {
	border-color: var(--primary-clr);
}

.dailyvit-checkbox-wrapper .inp-cbx:checked+.cbx span:first-child {
	background: var(--primary-clr);
	border-color: var(--primary-clr);
	animation: wave 0.4s ease;
}

.dailyvit-checkbox-wrapper .inp-cbx:checked+.cbx span:first-child svg {
	stroke-dashoffset: 0;
}

.dailyvit-checkbox-wrapper .inp-cbx:checked+.cbx span:first-child:before {
	transform: scale(3.5);
	opacity: 0;
	transition: all 0.6s ease;
}

@keyframes wave {
	50% {
		transform: scale(0.9);
	}
}

.quick-select {
	display: flex;
	gap: 1rem;
	align-items: center;
}

/* Checkout */
.woocommerce-checkout #dailyvit-checkout-fields,
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 {
	margin-bottom: 3rem;
}

.woocommerce-checkout #customer_details .woocommerce-account-fields {
	margin-top: 1rem;
}

/* Change order of the checkout form if user is defined as a company */
body.is_company .woocommerce-checkout #customer_details {
	display: grid;
}

body.is_company .woocommerce-checkout #customer_details .col-1 {
	order: 2;
}

body.is_company .woocommerce-checkout #customer_details .col-2 {
	order: 1;
}