/**
 * Add .wm-pattern-styles-tabs to a group or container block to create a Tab UI from a Query Loop. 
 * Select the Query Loop block and add tag the block with the WM Pattern Libary attribute Tabs pattern.
 * Copy this file to your theme's assets/css/patterns directory to customize/extend the functionality. 
 * This file will automatically enqueue when .wm-pattern-styles-tabs is detected.
 *
 * JS file: assets/js/patterns/wm-pattern-styles-tabs.js
 *
 * @version 1.0.0
 * @since 2025-10-16
 */


/* Tab button styling */
.wm-pattern-styles-tabs .wmx-loop-toggle-btns {
    cursor: pointer;
    transition: all 0.3s ease;
}

.wm-pattern-styles-tabs .wmx-loop-toggle-btns {
    cursor: pointer;
}
.tabs-custom-content ul li h2{
	font-family: 'Baloo' !important;
}
.wm-pattern-styles-tabs .wmx-loop-toggle-btns.active {
    /* Add your active button styles here */
    opacity: 1;
}

.wm-pattern-styles-tabs .wmx-loop-toggle-btns.active{
	background: #f45a2a !important;
}
.wm-pattern-styles-tabs .wmx-loop-toggle-btns:not(.active) {
    transition: all 0.3s ease;
}

/* Hide all tab content by default */
.wmx-loop-tab-targets .wp-block-post-template .wp-block-post {
    display: none !important;
}

/* Show only the active tab content */
.wmx-loop-tab-targets .wp-block-post-template .wp-block-post.active {
    display: block !important;
}

.wm-pattern-styles-tabs .horizontal-tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px;
}
.horizontal-tabs li{
	width: 90%;
}

/*  */
.brighter-smiles-tabs .wp-block-query .horizontal-tabs {
	justify-content: center;
}
.brighter-smiles-tabs .wp-block-query .horizontal-tabs li{
	width: 150px;
    height: 150px;
    border-radius: 50%;
    overflow: hidden;
	background: green;
}
.brighter-smiles-tabs .wp-block-query .horizontal-tabs li .wp-block-post-featured-image img{
	width: 150px;
    height: 150px;
}
.brighter-smiles-tabs .uagb-container-inner-blocks-wrap .wp-block-uagb-container:nth-of-type(2) .uagb-container-inner-blocks-wrap{
	background: #fff;
    padding: 30px;
    border-radius: 20px;
	width: 63% !important;
}
.brighter-smiles-tabs .uagb-container-inner-blocks-wrap .wp-block-uagb-container:nth-of-type(2) .uagb-container-inner-blocks-wrap ul li h5{
	background-color: unset !important;
	text-align: center;
}
.brighter-smiles-tabs .wp-block-uagb-container.uagb-block-f12d0241 .uagb-container-inner-blocks-wrap{
	flex-direction: column-reverse !important;
}
.brighter-smiles-tabs .wp-block-uagb-container.uagb-block-692a19ce .uagb-container-inner-blocks-wrap ul li{
	position: relative;
	z-index: 1;
}
 .brighter-smiles-tabs .wp-block-uagb-container.uagb-block-692a19ce .uagb-container-inner-blocks-wrap ul li:first-child{
    left: -20%;
    bottom: 80px;
}
.brighter-smiles-tabs .wp-block-uagb-container.uagb-block-692a19ce .uagb-container-inner-blocks-wrap ul li:nth-of-type(2){
    left: -9%;
    bottom: -30px;
}
.brighter-smiles-tabs .wp-block-uagb-container.uagb-block-692a19ce .uagb-container-inner-blocks-wrap ul li:nth-of-type(3){
	left: -1%;
    bottom: 15px;
}
.brighter-smiles-tabs .wp-block-uagb-container.uagb-block-692a19ce .uagb-container-inner-blocks-wrap ul li:last-child{
	right: -20%;
    bottom: 135px;
}
.brighter-smiles-tabs .uagb-container-inner-blocks-wrap .wp-block-uagb-container:nth-of-type(2) .uagb-container-inner-blocks-wrap ul li h5 a{
	color: var(--ast-global-color-0);
	font-family: "Baloo 2";
    font-weight: 600;
    font-size: 32px;
	line-height: 1.2;
}
.brighter-smiles-tabs .uagb-container-inner-blocks-wrap .wp-block-uagb-container:nth-of-type(2) .uagb-container-inner-blocks-wrap ul li p{
	font-size: 16px;
	line-height: 1.7;
	color: var(--ast-global-color-7);	
	text-align: center;
}
/*  */

/* MEDIA QUERY CSS START */
@media screen and (max-width: 1024px) {
  .brighter-smiles-tabs .wp-block-uagb-container.uagb-block-692a19ce .uagb-container-inner-blocks-wrap ul li:first-child {
    left: -15%;
  }
  .brighter-smiles-tabs .wp-block-uagb-container.uagb-block-692a19ce .uagb-container-inner-blocks-wrap ul li:last-child {
	right: -15%;
  }
}
@media screen and (max-width: 991px) {
	.brighter-smiles-tabs .uagb-container-inner-blocks-wrap .wp-block-uagb-container:nth-of-type(2) .uagb-container-inner-blocks-wrap {
		width: 100% !important;
	}
   .brighter-smiles-tabs .wp-block-uagb-container.uagb-block-692a19ce .uagb-container-inner-blocks-wrap ul li:first-child {
        left: 0;
        top: 0;
   }
	.brighter-smiles-tabs .wp-block-uagb-container.uagb-block-692a19ce .uagb-container-inner-blocks-wrap ul li:nth-of-type(2) {
    	left: 0%;
    	bottom: 0;
	}
	.brighter-smiles-tabs .wp-block-uagb-container.uagb-block-692a19ce .uagb-container-inner-blocks-wrap ul li:nth-of-type(3) {
    	left: 0%;
    	bottom: 0;
	}
  .brighter-smiles-tabs .wp-block-uagb-container.uagb-block-692a19ce .uagb-container-inner-blocks-wrap ul li:last-child {
		left: 0;
        top: 0;
  }
}
/* MEDIA QUERY CSS END */