/**
 *	Styling for the widget section of the theme
 */

.widget {
	padding: 1.2em;
	#secondary & {
		border: solid 1px alpha(black, -0.92);
		border-radius: .8em;
	}
	#oro-before-content & {
		margin-bottom: 0;
		.widget-title {
			text-align: center;
		}
	}
	.widget-title {
		margin-top: 0;
		margin-bottom: 0.4em;
		font-size: 1.6em;
		@extend %bold;
	}
	&.widget_search {
		label {
			margin: 0;
			width: 100%;
		}
		input[type="search"] {
			border-radius: 1.25em;
			border: solid 1px alpha(black, -0.92);
			width: 100%;
			padding: .3em .5em;
		}
		input[type="submit"] {
			display: none;
		}
	}
	&.widget_oro_cats_tab {
		overflow: auto;
		ul {
			position: relative;
			display: flex;
			justify-content: center;
			margin-bottom: 0;
			li {
				display: inline-block;
				float: left;
				margin: 0;
				position: relative;
				text-transform: uppercase;
				width: auto;
				overflow: hidden;
				a {
					color: white;
					background-color: $primary;
					padding: .5em 1.2em;
					font-size: .9em;
					@include line-clamp(1);
					@extend %bold;
					&:hover {
						color: white;
					}
				}
				&:before {
					content: "";
					margin-right: 0;
				}
				&:first-child {
					border-radius: .55em 0 0 .55em;
				}
				&:last-child {
					border-radius: 0 .55em .55em 0;
				}
			}
			&.is-vertical {
				font-size: .9em;
			}
		}
		.tabs-slider {
			position: relative;
			content: "";
			top: 100%;
			left: 0;
			width: 0;
			height: 0;
			border-top: solid 10px $primary;
			border-bottom: solid 10px transparent;
			border-left: 10px solid transparent;
			border-right: 10px solid transparent;
		}
		.ui-tabs {
			text-align: center;
		}
		.category_panel {
			&.is-vertical {
				.oro-card-wrapper {
					padding: 0;
					border: 0;
				}
				.oro-thumb {
					border-radius: 0.8em;
					overflow: hidden;
				}
			}
		}
/*
		.oro-card {
			.oro-card-wrapper {
				padding: 0;
				border: 0;
				.oro-thumb {
					border-radius: .8em;
					overflow: hidden;
				}
			}
			.entry-header {
				margin: .5em 1em 0;
			}
			.entry-title {
				border-bottom: 0;
				border-top: 0;
				text-transform: none;
			}
		}
*/
	}
	&.widget_oro_cat_slider {
		.swiper-container {
			overflow: hidden;
			border-radius: 1.2em;
			position: relative;
			
		}
	
		.swiper-wrapper {
			display: flex;
		}
	
		.swiper-slide {
			position: relative;
			width: 100%; // Ensure each slide takes up 100% of the container width
			.overlay{
				background: rgba(0, 0, 0, 0.5);
				position: absolute;
				top: 0;
				right: 0;
				left: 0;
				bottom: 0;
			}
		}
	
		.swiper-pagination {
			position: absolute;
			bottom: 10px;
			left: 50%;
			transform: translateX(-50%);
			text-align: center;
	
			.swiper-pagination-bullet {
				width: 10px;
				height: 10px;
				background-color: $primary;
				opacity: 0.7;
				&.swiper-pagination-bullet-active {
					opacity: 1;
					background-color: lighten($primary, 100%);
				}
			}
		}
	
		.swiper-button-prev,
		.swiper-button-next {
			position: absolute;
			opacity: 0;
			top: 50%;
			transform: translateY(-50%);
			width: auto;
			padding: 1rem;
			color: rgb(12, 12, 12);
			background-color: #eee;
			border-radius: 0.6em;
			z-index: 10;
			font-size: 1.5rem;
			&::after{
				font-size: 1.2rem;
			}
	
			&.swiper-button-prev {
				left: 10px;
				border-radius: .2em;
			}
	
			&.swiper-button-next {
				right: 10px;
				border-radius: .2em;
			}
	
			i {
				font-size: 1.25em;
	
				@media (min-width: 768px) {
					font-size: 2em;
				}
	
				@media (min-width: 992px) {
					font-size: 3em;
				}
			}
		}
	
		.slide-title {
			position: absolute;
			display: inline-block;
			top: 39%;
			max-width:80% ;
			right: 10%;
			left: 10%;
			margin: auto;
			background: none !important;
			h3 {
				display: inline-block;
				margin: 0.5em 0.8em;
				font-size: 1.6em;
				text-transform: capitalize;
				text-shadow: 0px 2px 1px rgba(0,0,0,0.4),
                0px 8px 13px rgba(0,0,0,0.1),
                0px 18px 23px rgba(0,0,0,0.1);
				@media screen and (min-width: 768px) {
					font-size: 2em;
					#secondary & {
						font-size: 1.2em;
					}
				}
			}

			a {
				color: white;
			}
		}
	}
	
	.swiper-container:hover{
		.swiper-button-prev,
		.swiper-button-next{
			opacity: 1;
			transition: ease-in-out .5s;
		}
	}
	&.widget_oro_recent_posts {
		overflow: auto;
		.entry-title {
			margin: 0;
			font-size: 1em;
			line-height: 1.45em;
		}
		.is-horizontal {
			.entry-title {
				margin-top: .8em;
			}
			.oro-widget-post-thumb {
				border-radius: 0.8em;
			}
		}
		.oro-widget-post {
			align-items: flex-start;
			margin-bottom: 1.8em;
			@media screen and (min-width: 768px) {
				margin-bottom: 1.2em;
			}
		}
		.oro-widget-post-thumb {
			border-radius: 0.3em;
			overflow: hidden;
			@include transition(box-shadow 300ms $standard);
			&:hover {
				box-shadow: $shadow2;
			}
		}
		.oro-widget-post-title {
			padding-left: .75em;
			@media screen and (min-width: 768px) {
				margin-top: 0;
			}
			.recent-date {
				font-size: 0.8em;
				color: #aaa;
			}
		}
	}
	&.widget_oro_featured_cat {
		@extend .widget_oro_recent_posts;
	}
	ul {
		margin-left: 0;
		list-style: none;
		@extend %heading-font;
		li {
			margin: .75em 0 0.75em 1em;
			position: relative;
			a {
				color: lightness(white, -35%);
				@include transition(color 100ms $standard);
				&:hover {
					text-decoration: underline;
				}
			}
			&:last-child {
				margin-bottom: 0;
			}
			&:before {
				position: absolute;
				content: "\f105";
				font-family: "FontAwesome";
				font-size: 1em;
				margin-left: -1em;
				color: $primary;
				top: 0;
			}
		}
	}
}


.countdown-wrapper {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 20px 0;
    border-radius: 10px;
    font-family: Arial, sans-serif;
    color: #333;

    .countdown-block {
        text-align: center;
        margin: 0 10px;
    }

    .countdown-number {
        font-size: 2.5em;
        font-weight: bold;
        color: var(--number-color, #ff6b6b); // Default color
    }

    .countdown-label {
        font-size: 0.85em;
        text-transform: uppercase;
        color: var(--label-color, #888); // Default color
    }

    .countdown-expired {
        font-size: 1.5em;
        font-weight: bold;
        color: #ff6b6b;
        text-align: center;
    }
}
