/**
 * Pro Features - Tabs, Accordions, Search Overlay
 * Coach Dave Academy Theme
 *
 * This file contains styles for advanced UI components.
 * Requires variables.css to be loaded first.
 * Conditionally loaded when pro features are used.
 *
 * @package CoachDaveAcademy
 * @version 1.1.0
 */

/* ==========================================================================
   Logo Sizing
   ========================================================================== */

.layers-logo-small .custom-logo-link img,
.layers-logo-small .site-logo-link img,
.layers-logo-small .mark img {
	width: auto;
	max-height: 20px;
}

.layers-logo-medium .custom-logo-link img,
.layers-logo-medium .site-logo-link img,
.layers-logo-medium .mark img {
	width: auto;
	max-height: 40px;
}

.layers-logo-large .custom-logo-link img,
.layers-logo-large .site-logo-link img,
.layers-logo-large .mark img {
	width: auto;
	max-height: 80px;
}

.layers-logo-massive .custom-logo-link img,
.layers-logo-massive .site-logo-link img,
.layers-logo-massive .mark img {
	width: auto;
	max-height: 120px;
}

/* ==========================================================================
   Post Carousel (Slider)
   ========================================================================== */

.widget-post-carousel .post-carousel-row-swiper .grid {
	padding: 0;
	margin: 0;
}

.widget-post-carousel .swiper-container .swiper-wrapper {
	max-width: none;
}

.widget-post-carousel .swiper-container .swiper-slide {
	margin-left: 0;
	margin-right: 0;
	max-width: none;
}

.widget-post-carousel .swiper-pagination {
	position: relative;
	margin: var(--space-5) 0;
}

.widget-post-carousel .swiper-slide .overlay {
	display: block;
	width: auto;
	height: auto;
}

/* ==========================================================================
   Call-to-Action Buttons
   ========================================================================== */

.button-collection .button {
	margin: 0 var(--space-2);
}

.button-collection.text-left .button {
	margin: 0 var(--space-2) 0 0;
}

.button-collection.text-right .button {
	margin: 0 0 0 var(--space-2);
}

/* ==========================================================================
   Social Icons
   ========================================================================== */

/* Social Button Sizes */
.button-social {
	padding: var(--space-2) var(--space-4);
	line-height: 1;
}

.button-social.btn-small {
	padding: var(--space-2) var(--space-4);
}

.button-social.btn-medium {
	padding: var(--space-2) var(--space-4);
}

.button-social.btn-large {
	padding: var(--space-2) var(--space-5);
}

.button-social.btn-massive {
	padding: var(--space-2-5) var(--space-8);
}

/* Social Icon Sizes */
.button-social i {
	width: var(--text-md);
	font-size: var(--text-sm);
}

.button-social.btn-medium i {
	width: var(--text-lg);
	font-size: 1.8rem;
}

.button-social.btn-large i {
	width: var(--text-xl);
	font-size: 2.2rem;
}

.button-social.btn-massive i {
	width: 2.2rem;
	font-size: 2.2rem;
}

/* Social Network Name */
.button-social .network-name {
	padding-left: var(--space-2);
	margin-left: var(--space-0-5);
	border-left: 1px solid rgba(255, 255, 255, 0.3);
	text-transform: capitalize;
}

/* ==========================================================================
   Tabs
   ========================================================================== */

.layers-pro-tabs .nav-tabs.no-background {
	background: none;
}

.tab-row.has-borders li > a {
	border-width: 0;
}

/* Tab Content */
.tab-content > .row {
	display: none;
}

.tab-content > .row:first-child {
	display: block;
}

/* ==========================================================================
   Accordion
   ========================================================================== */

.accordion-list > li {
	margin-bottom: 1px;
}

.accordion-list > li > a {
	border-bottom: 1px solid transparent;
	display: block;
	transition: var(--transition-fast);
}

.accordion-list > li:first-child > a {
	border-top: 1px solid transparent;
}

.accordion-list > li > a::before {
	content: "\e600";
	font-family: 'layers-icons';
	color: rgba(0, 0, 0, 0.25);
	font-size: 0.8em;
	margin: 0 0.3em 0 0;
	font-weight: var(--font-bold);
	transition: var(--transition-fast);
	display: inline-block;
}

.accordion-list > li.active > a::before {
	transition: var(--transition-base);
	transform: rotate(90deg);
}

.accordion-list > li > section {
	border-bottom: 1px solid transparent;
	position: absolute;
	visibility: hidden;
}

/* Accordion Item Styling */
.accordion-item-styling .accordion-list > li > a {
	border-bottom-color: var(--color-bg-lighter);
}

.accordion-item-styling .accordion-list > li > a:hover {
	background: rgba(0, 0, 0, 0.01);
}

.accordion-item-styling .accordion-list > li:first-child > a {
	border-top-color: var(--color-bg-lighter);
}

.accordion-item-styling .accordion-list > li > section {
	border-bottom-color: var(--color-bg-lighter);
}

/* Accordion Button Sizes */
.accordion-button {
	padding: var(--space-2) var(--space-2-5);
}

.accordion-button.accordion-small {
	padding: var(--space-1) var(--space-2);
	font-size: var(--text-xs);
}

.accordion-button.accordion-small::before {
	font-size: 0.9rem;
	margin: 0 0.4em 0 0;
}

.accordion-button.accordion-large {
	padding: var(--space-2-5) var(--space-4-5);
	font-size: 1.8rem;
}

.accordion-button.accordion-large::before {
	font-size: var(--text-sm);
	margin: 0 0.5em 0 0;
}

.accordion-button.accordion-massive {
	padding: var(--space-4) var(--space-5);
	font-size: var(--text-lg);
}

.accordion-button.accordion-massive::before {
	font-size: var(--text-md);
	margin: 0 0.5em 0 0;
}

/* ==========================================================================
   Slider Video Background
   ========================================================================== */

.swiper-slide video {
	position: absolute;
	top: 0;
	left: 0;
	min-width: 100%;
	min-height: 100%;
	z-index: auto;
	background-size: cover;
	object-fit: cover;
}

.swiper-slide video source {
	width: 100%;
	height: 100%;
}

.layerspro-slider-video {
	position: absolute;
	z-index: 0;
	width: 100%;
	height: 100%;
}

.layerspro-slider-video iframe {
	max-width: none;
	position: absolute;
	display: block;
}

.layerspro-slider-video.layers-slider-video-ultra-wide iframe {
	width: 100%;
	height: 350%;
	top: -125%;
	left: 0;
}

.layerspro-slider-video.layers-slider-video-super-wide iframe {
	width: 100%;
	height: 250%;
	top: -75%;
	left: 0;
}

.layerspro-slider-video.layers-slider-video-wide iframe {
	width: 100%;
	height: 200%;
	top: -50%;
	left: 0;
}

.layerspro-slider-video.layers-slider-video-square iframe {
	width: 160%;
	height: 100%;
	top: 0;
	left: -30%;
}

.layerspro-slider-video.layers-slider-video-tall iframe {
	width: 250%;
	height: 100%;
	top: 0;
	left: -75%;
}

.layerspro-slider-video.layers-slider-video-super-tall iframe {
	width: 400%;
	height: 100%;
	top: 0;
	left: -150%;
}

/* ==========================================================================
   Search Overlay
   ========================================================================== */

/* Search Header Icon */
.header-search {
	display: flex;
	line-height: 40px;
	margin-left: var(--space-2-5);
}

.header-search + .header-cart {
	margin-left: var(--space-5);
}

.header-center .header-search,
.nav-clear .header-search {
	line-height: var(--space-5);
}

/* Header Sidebar Search */
.header-side-wrapper .header-search {
	margin-left: 0;
}

/* Search Overlay Interface */
.search-interface-overlay {
	visibility: hidden;
	opacity: 0;
	display: flex;
	align-items: center;
	position: fixed;
	top: 0;
	left: -150%;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0);
	z-index: var(--z-modal);
	transition:
		all 0s 0s cubic-bezier(0.32, 0, 0, 1),
		transform 0.3s 0.15s cubic-bezier(0.32, 0, 0, 1),
		background 0.3s 0s cubic-bezier(0.32, 0, 0, 1);
	transform: scale(2);
}

.search-interface-holder {
	width: 100%;
	max-width: var(--container-default);
	margin: auto;
	padding: 0 var(--space-5);
}

.search-interface-overlay .search-text {
	opacity: 0;
	font-size: var(--text-lg);
	color: rgba(255, 255, 255, 0.5);
	transform: translate3d(0, -20px, 0);
	transition: 0.3s all ease-in-out 0.4s;
}

.search-interface-overlay .search-field {
	opacity: 0;
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	padding: 0 0 var(--space-2-5);
	background: none;
	border: 0;
	border-bottom: 2px solid transparent;
	color: var(--color-white);
	font-size: var(--text-4xl);
	line-height: 1.4;
	transform: translate3d(0, -15px, 0);
	transition:
		border-color 0.3s ease-in-out 0.4s,
		opacity 0.3s ease-in-out 0.2s,
		transform 0.3s ease-in-out 0.2s;
}

.search-interface-overlay .search-submit {
	display: none;
}

/* Search Close Button */
.search-close {
	opacity: 0;
	position: absolute;
	right: var(--space-16);
	top: var(--space-16);
	width: 38px;
	padding: var(--space-2);
	background: rgba(255, 255, 255, 0.75);
	border-radius: var(--radius-full);
	border: 2px solid transparent;
	text-align: center;
	color: rgba(0, 0, 0, 0.7);
	font-size: var(--text-sm);
	line-height: 1.3;
	transition:
		opacity 0.3s ease-in-out 0.25s,
		transform 0.3s ease-in-out 0.25s;
}

.search-close:hover {
	color: var(--color-white);
	background: rgba(255, 255, 255, 0.25);
	border-color: rgba(255, 255, 255, 0.5);
}

.search-close:active {
	background: rgba(255, 255, 255, 0.1);
	border-color: transparent;
}

/* Play In Animation */
.search-interface-play-in {
	visibility: visible;
	opacity: 1;
	left: 0;
	background: rgba(0, 0, 0, 0.84);
	transform: scale(1);
}

.search-interface-play-in .search-text,
.search-interface-play-in .search-field,
.search-interface-play-in .search-close {
	transform: translate3d(0, 0, 0);
	opacity: 1;
}

.search-interface-play-in .search-field {
	border-bottom-color: var(--color-white);
}

/* Play Out Animation */
.search-interface-play-out {
	visibility: hidden;
	opacity: 0;
	left: -150%;
	background: rgba(0, 0, 0, 0);
	transition:
		all 0s 0.5s cubic-bezier(0.32, 0, 0, 1),
		opacity 0.2s 0.3s cubic-bezier(0.32, 0, 0, 1),
		background 0.2s 0.3s cubic-bezier(0.32, 0, 0, 1);
}

.search-interface-play-out .search-text,
.search-interface-play-out .search-close {
	transform: translate3d(0, -20px, 0);
	transition:
		opacity 0.45s ease-in-out 0s,
		transform 0.45s ease-in-out 0s;
}

.search-interface-play-out .search-field {
	border-bottom-color: transparent;
	transform: translate3d(0, -10px, 0);
	transition:
		border-bottom-color 0.2s ease-in-out 0.05s,
		opacity 0.4s ease-in-out 0.05s,
		transform 0.4s ease-in-out 0.05s;
}

/* ==========================================================================
   Responsive Styles
   ========================================================================== */

/* Mobile (max-width: 480px) */
@media only screen and (max-width: 480px) {
	.header-site .logo {
		display: block;
		max-width: 80%;
	}

	.layers-logo-massive .site-logo-link + .site-description,
	.layers-logo-large .site-logo-link + .site-description,
	.layers-logo-massive .custom-logo-link + .site-description,
	.layers-logo-large .custom-logo-link + .site-description {
		margin-left: 0;
	}

	/* Hide search on mobile */
	.header-search,
	.search-interface-overlay {
		display: none;
	}

	/* Hide on mobile utility */
	.hide-phone {
		display: none;
	}
}

/* Tablet (481px - 768px) */
@media only screen and (min-width: 481px) and (max-width: 768px) {
	/* Hide on tablet utility */
	.hide-tablet {
		display: none;
	}
}

/* Desktop (769px+) */
@media only screen and (min-width: 769px) {
	/* Hide on desktop utility */
	.hide-desktop {
		display: none;
	}
}