// TODO: css for shortcodes.
/* ========================================================== */
/* Quote Border ============================================= */
.quote-border {
	background-color: #f4f4f4;
	padding         : 20px;
	margin-bottom   : 10px;
	font-style      : italic;
	border          : 1px solid #ddd;
	.border-radius(3px);
}

/* ========================================================== */
/* Video ==================================================== */
iframe {
	border       : none;
	margin-bottom: 10px;
	max-width    : 100%;
}

/* =========================================================== */
/* Ya Why Choose Us  ========================================= */
.block-whychoose {
	margin-bottom: 30px !important;
	display      : inline-block;

	.image-whychoose {
		float: left;
		width: 64px;
	}

	.content-whychoose {
		margin-left: 80px;

		h2 {
			color         : #000;
			font-size     : 13px;
			text-transform: uppercase;
		}

		.description {
			color: #666;
		}
	}
}

/*========================================================*/
/* Search Faqs ===========================================*/
.vc_wp_search .widget_search .searchform {
	.screen-reader-text {
		display: none;
	}

	input[type="submit"] {
		text-indent: -9999px;
		display    : block;
		border     : 0;
		width      : 34px !important;
		height     : 34px;
		background : url('../assets/img/search-icon.png') no-repeat scroll center center #666 !important;

		&:hover {
			background: url('../assets/img/search-icon.png') no-repeat scroll center center var(--color) !important;
		}
	}

	input[type="text"] {
		border: 1px solid @border-color;
	}
}

/* ======================================================================== */
/* Titlte ================================================================= */
.wpb_single_image .vc_single_image-wrapper {
	img {
		&:hover {
			.opacity(.75);
		}
	}
}

/* =================================================================== */
/* =================================================================== */
#wp-calendar {
	width: 100%;

	caption {
		padding: 10px 0;
	}

	tr {
		th {
			text-align: center;
		}

		td {
			padding: 10px 0;
		}
	}
}

/* ======================================================== */
/* ======================================================== */
#subscribe_popup {
	text-align       : left;
	display          : none;
	background-repeat: no-repeat;
	background-color : #fff;
	position         : relative;
	width            : 840px;

	.subscribe-popup-container {
		padding: 15px;

		.image-newsletter {
			width: 50%;
		}

		.subscribe-content {
			width     : 50%;
			text-align: center;
			padding   : 60px 0;
		}

		h2 {
			color        : @body-color;
			font-size    : 36px;
			font-weight  : 700 !important;
			margin-bottom: 17px;
		}

		.description {
			font-size    : 14px;
			color        : #666;
			font-weight  : 400;
			line-height  : 24px;
			margin-bottom: 30px;
		}

		.subscribe-form {
			margin-bottom: 15px;
			border       : 1px solid @border-color;
			max-width    : 390px;
			position     : relative;

			p,
			input {
				margin: 0;
			}

			input[type="email"] {
				padding      : 0 15px;
				height       : 43px;
				line-height  : 43px;
				overflow     : hidden;
				display      : block;
				font-size    : 13px;
				border-radius: 0;
				border       : 0;
			}

			input[type="submit"] {
				background   : url(@{url}/icon-newsletter.png) no-repeat center center #fff;
				position     : absolute;
				height       : 43px;
				width        : 43px;
				overflow     : hidden;
				top          : 0;
				right        : 0;
				text-indent  : -9999px;
				border       : 0;
				border-radius: 0;

				&:before {
					display: none;
				}

				&:hover {
					opacity: 0.85;
				}
			}
		}

		.subscribe-checkbox {
			line-height: 30px;
			clear      : both;

			input {
				cursor: pointer;
			}

			label {
				vertical-align: top;
				line-height   : 25px;
				margin        : 0;
				font-weight   : normal;
				color         : @body-color;
				font-weight   : 500;

				span {
					display       : inline-block;
					vertical-align: top;
					line-height   : 20px;
					color         : #666;
					font-weight   : 400;
				}
			}
		}
	}

	.subscribe-social {
		padding   : 0;
		text-align: center;
		position  : relative;
		z-index   : 3;
		margin-top: 10px;

		h3 {
			color         : #fff;
			font-weight   : 700 !important;
			font-size     : 16px;
			text-transform: uppercase;
		}

		>.subscribe-social-inner {
			.emarket-socials ul {
				margin: 0;

				>li>a {
					display      : block;
					width        : 30px;
					height       : 30px;
					border-radius: 50%;
					font-size    : 12px;
					line-height  : 30px;
					color        : #555;
					background   : #fff;
					margin       : 0 5px;
					border       : 1px solid @border-color;

					&:hover {
						border          : 1px solid var(--color);
						background-color: var(--color);
						color           : #fff;
					}
				}
			}
		}
	}
}

.block-title-widget {
	h2 {
		font-size     : 16px;
		color         : @body-color;
		font-weight   : 700;
		text-transform: uppercase;
		padding       : 20px;
		margin        : 0;
	}
}

.sidebar .widget.widget_layered_nav ul {
	border: 0;

	>li {
		border: 0;
	}
}

.sidebar .widget.widget_product_categories {
	border: 1px solid @border-color;

	.block-title-widget {
		h2 {
			font-size     : 14px;
			text-transform: capitalize;
			color         : @body-color;
			border-bottom : 0;
			font-weight   : 700;
			margin-bottom : 10px;
			padding       : 27px 20px 0;
		}
	}

	.product-categories {
		border       : 0;
		margin-bottom: 17px;

		>li {
			border : 0;
			padding: 8px 20px;

			>a {
				font-size: 14px;
				color    : #777;
				cursor   : pointer;							
			}
			&:hover, &.active, &.current-cat {
				> a{
					color: var(--color);
				}
			}

			&.showMore>a {
				border-bottom: 0;
				color        : #0066c0;
				position     : relative;
				cursor       : pointer;

				&:before {
					content     : '\f107';
					font-family : 'Font Awesome 5 Free';font-weight:700;
					margin-right: 10px;
				}

				&:hover {
					color: var(--color);
				}
			}
			ul.children{
				> li{
					padding: 8px 0;
					border: 0;
					> a{
						color: #777;
						&:hover{
							color: var(--color);
						}
					}
					&:first-child{
						border: 0;
					}
				}
			}
		}
	}
}