.ct-section {
width:100%;
background-size:cover;
background-repeat:repeat;
}
.ct-section>.ct-section-inner-wrap {
display:flex;
flex-direction:column;
align-items:flex-start;
}
.ct-div-block {
display:flex;
flex-wrap:nowrap;
flex-direction:column;
align-items:flex-start;
}
.ct-new-columns {
display:flex;
width:100%;
flex-direction:row;
align-items:stretch;
justify-content:center;
flex-wrap:wrap;
}
.ct-link-text {
display:inline-block;
}
.ct-link {
display:flex;
flex-wrap:wrap;
text-align:center;
text-decoration:none;
flex-direction:column;
align-items:center;
justify-content:center;
}
.ct-link-button {
display:inline-block;
text-align:center;
text-decoration:none;
}
.ct-link-button {
background-color: #1e73be;
border: 1px solid #1e73be;
color: #ffffff;
padding: 10px 16px;
}
.ct-image {
max-width:100%;
}
.ct-fancy-icon>svg {
width:55px;height:55px;}
.ct-inner-content {
width:100%;
}
.ct-slide {
display:flex;
flex-wrap:wrap;
text-align:center;
flex-direction:column;
align-items:center;
justify-content:center;
}
.ct-nestable-shortcode {
display:flex;
flex-wrap:nowrap;
flex-direction:column;
align-items:flex-start;
}
.oxy-comments {
width:100%;
text-align:left;
}
.oxy-comment-form {
width:100%;
}
.oxy-login-form {
width:100%;
}
.oxy-search-form {
width:100%;
}
.oxy-tabs-contents {
display:flex;
width:100%;
flex-wrap:nowrap;
flex-direction:column;
align-items:flex-start;
}
.oxy-tab {
display:flex;
flex-wrap:nowrap;
flex-direction:column;
align-items:flex-start;
}
.oxy-tab-content {
display:flex;
width:100%;
flex-wrap:nowrap;
flex-direction:column;
align-items:flex-start;
}
.oxy-testimonial {
width:100%;
}
.oxy-icon-box {
width:100%;
}
.oxy-pricing-box {
width:100%;
}
.oxy-posts-grid {
width:100%;
}
.oxy-gallery {
width:100%;
}
.ct-slider {
width:100%;
}
.oxy-tabs {
display:flex;
flex-wrap:nowrap;
flex-direction:row;
align-items:stretch;
}
.ct-modal {
flex-direction:column;
align-items:flex-start;
}
.ct-span {
display:inline-block;
text-decoration:inherit;
}
.ct-widget {
width:100%;
}
.oxy-dynamic-list {
width:100%;
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
			.ct-div-block,
			.oxy-post-content,
			.ct-text-block,
			.ct-headline,
			.oxy-rich-text,
			.ct-link-text { max-width: 100%; }
			img { flex-shrink: 0; }
			body * { min-height: 1px; }
		}            .oxy-testimonial {
                flex-direction: row;
                align-items: center;
            }
                        .oxy-testimonial .oxy-testimonial-photo-wrap {
                order: 1;
            }
            
                        .oxy-testimonial .oxy-testimonial-photo {
                width: 125px;                height: 125px;                margin-right: 20px;
            }
            
                        .oxy-testimonial .oxy-testimonial-photo-wrap, 
            .oxy-testimonial .oxy-testimonial-author-wrap, 
            .oxy-testimonial .oxy-testimonial-content-wrap {
                align-items: flex-start;                text-align: left;            }
            
                                                            .oxy-testimonial .oxy-testimonial-text {
                margin-bottom:8px;font-size: 21px;
line-height: 1.4;
-webkit-font-smoothing: subpixel-antialiased;
            }
            
                                    .oxy-testimonial .oxy-testimonial-author {
                font-size: 18px;
-webkit-font-smoothing: subpixel-antialiased;
            }
                            

                                                .oxy-testimonial .oxy-testimonial-author-info {
                font-size: 12px;
-webkit-font-smoothing: subpixel-antialiased;
            }
            
             
            
                        .oxy-icon-box {
                text-align: left;                flex-direction: column;            }
            
                        .oxy-icon-box .oxy-icon-box-icon {
                margin-bottom: 12px;
                align-self: flex-start;            }
            
                                                                        .oxy-icon-box .oxy-icon-box-heading {
                font-size: 21px;
margin-bottom: 12px;            }
            
                                                                                    .oxy-icon-box .oxy-icon-box-text {
                font-size: 16px;
margin-bottom: 12px;align-self: flex-start;            }
            
                        .oxy-icon-box .oxy-icon-box-link {
                margin-top: 20px;                            }
            
            
            /* GLOBALS */

                                                            .oxy-pricing-box .oxy-pricing-box-section {
                padding-top: 20px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px;
text-align: center;            }
                        
                        .oxy-pricing-box .oxy-pricing-box-section.oxy-pricing-box-price {
                justify-content: center;            }
            
            /* IMAGE */
                                                                                    .oxy-pricing-box .oxy-pricing-box-section.oxy-pricing-box-graphic {
                justify-content: center;            }
            
            /* TITLE */
                                                            
                                    .oxy-pricing-box .oxy-pricing-box-title-title {
                font-size: 48px;
            }
            
                                    .oxy-pricing-box .oxy-pricing-box-title-subtitle {
                font-size: 24px;
            }
            

            /* PRICE */
                                                .oxy-pricing-box .oxy-pricing-box-section.oxy-pricing-box-price {
                                                flex-direction: row;                                            }
            
                                    .oxy-pricing-box .oxy-pricing-box-currency {
                font-size: 28px;
            }
            
                                    .oxy-pricing-box .oxy-pricing-box-amount-main {
                font-size: 80px;
line-height: 0.7;
            }
            
                                    .oxy-pricing-box .oxy-pricing-box-amount-decimal {
                font-size: 13px;
            }
                        
                                    .oxy-pricing-box .oxy-pricing-box-term {
                font-size: 16px;
            }
            
                                    .oxy-pricing-box .oxy-pricing-box-sale-price {
                font-size: 12px;
color: rgba(0,0,0,0.5);
                margin-bottom: 20px;            }
            
            /* CONTENT */

                                                                        .oxy-pricing-box .oxy-pricing-box-section.oxy-pricing-box-content {
                font-size: 16px;
color: rgba(0,0,0,0.5);
            }
            
            /* CTA */

                                                                        .oxy-pricing-box .oxy-pricing-box-section.oxy-pricing-box-cta {
                justify-content: center;            }
            
        
                                .oxy-progress-bar .oxy-progress-bar-background {
            background-color: #000000;            background-image: linear-gradient(-45deg,rgba(255,255,255,.12) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.12) 50%,rgba(255,255,255,.12) 75%,transparent 75%,transparent);            animation: none 0s paused;        }
                
                .oxy-progress-bar .oxy-progress-bar-progress-wrap {
            width: 85%;        }
        
                                                        .oxy-progress-bar .oxy-progress-bar-progress {
            background-color: #66aaff;padding: 40px;animation: none 0s paused, none 0s paused;            background-image: linear-gradient(-45deg,rgba(255,255,255,.12) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.12) 50%,rgba(255,255,255,.12) 75%,transparent 75%,transparent);        
        }
                
                        .oxy-progress-bar .oxy-progress-bar-overlay-text {
            font-size: 30px;
font-weight: 900;
-webkit-font-smoothing: subpixel-antialiased;
        }
        
                        .oxy-progress-bar .oxy-progress-bar-overlay-percent {
            font-size: 12px;
        }
        
        .ct-slider .unslider-nav ol li {border-color: #ffffff; }.ct-slider .unslider-nav ol li.unslider-active {background-color: #ffffff; }.ct-slider .ct-slide {
				padding: 0px;			}
		
                        .oxy-superbox .oxy-superbox-secondary, 
            .oxy-superbox .oxy-superbox-primary {
                transition-duration: 0.5s;            }
            
            
            
            
            
        
        
        
        
            .oxy-shape-divider {
                width: 0px;
                height: 0px;
                
            }
            
            .oxy_shape_divider svg {
                width: 100%;
            }
            .oxy-pro-menu .oxy-pro-menu-container:not(.oxy-pro-menu-open-container):not(.oxy-pro-menu-off-canvas-container) .sub-menu{
box-shadow:px px px px ;}

.oxy-pro-menu .oxy-pro-menu-show-dropdown .oxy-pro-menu-list .menu-item-has-children > a svg{
transition-duration:0.4s;
}

.oxy-pro-menu .oxy-pro-menu-show-dropdown .oxy-pro-menu-list .menu-item-has-children > a div{
margin-left:0px;
}

.oxy-pro-menu .oxy-pro-menu-mobile-open-icon svg{
width:30px;
height:30px;
}

.oxy-pro-menu .oxy-pro-menu-mobile-open-icon{
padding-top:15px;
padding-right:15px;
padding-bottom:15px;
padding-left:15px;
}

.oxy-pro-menu .oxy-pro-menu-mobile-open-icon, .oxy-pro-menu .oxy-pro-menu-mobile-open-icon svg{
transition-duration:0.4s;
}

.oxy-pro-menu .oxy-pro-menu-mobile-close-icon{
top:20px;
left:20px;
}

.oxy-pro-menu .oxy-pro-menu-mobile-close-icon svg{
width:24px;
height:24px;
}

.oxy-pro-menu .oxy-pro-menu-mobile-close-icon, .oxy-pro-menu .oxy-pro-menu-mobile-close-icon svg{
transition-duration:0.4s;
}

.oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-off-canvas-container, .oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-open-container{
background-color:#ffffff;
}

.oxy-pro-menu .oxy-pro-menu-off-canvas-container, .oxy-pro-menu .oxy-pro-menu-open-container{
background-image:url();
}

.oxy-pro-menu .oxy-pro-menu-off-canvas-container .oxy-pro-menu-list .menu-item-has-children > a svg, .oxy-pro-menu .oxy-pro-menu-open-container .oxy-pro-menu-list .menu-item-has-children > a svg{
font-size:24px;
}

.oxy-pro-menu .oxy-pro-menu-dropdown-links-toggle.oxy-pro-menu-open-container .menu-item-has-children ul, .oxy-pro-menu .oxy-pro-menu-dropdown-links-toggle.oxy-pro-menu-off-canvas-container .menu-item-has-children ul{
background-color:rgba(0,0,0,0.2);
border-top-style:solid;
}

.oxy-pro-menu .oxy-pro-menu-container:not(.oxy-pro-menu-open-container):not(.oxy-pro-menu-off-canvas-container) .oxy-pro-menu-list{
                    flex-direction: row;
               }
.oxy-pro-menu .oxy-pro-menu-container .menu-item a{
                    text-align: left;
                    justify-content: flex-start;
                }
.oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-open-container .menu-item, .oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-off-canvas-container .menu-item{
                    align-items: flex-start;
                }

            .oxy-pro-menu .oxy-pro-menu-off-canvas-container{
                    top: 0;
                    bottom: 0;
                    right: auto;
                    left: 0;
               }
.oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-open-container .oxy-pro-menu-list .menu-item a, .oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-off-canvas-container .oxy-pro-menu-list .menu-item a{
                    text-align: left;
                    justify-content: flex-start;
                }

            .oxy-site-navigation {
--oxynav-brand-color:#4831B0;
--oxynav-neutral-color:#FFFFFF;
--oxynav-activehover-color:#EFEDF4;
--oxynav-background-color:#4831B0;
--oxynav-border-radius:0px;
--oxynav-other-spacing:8px;
--oxynav-transition-duration:0.3s;
--oxynav-transition-timing-function:cubic-bezier(.84,.05,.31,.93);
}

.oxy-site-navigation .oxy-site-navigation__mobile-close-wrapper{
text-align:left;
}

.oxy-site-navigation > ul{ left: 0; }
.oxy-site-navigation {
                        --oxynav-animation-name: none; 
                    }

                .oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(1){ 
                    background-color: var(--oxynav-brand-color);
                    transition: var(--oxynav-transition-duration);
                    margin-left: var(--oxynav-other-spacing);
                    border: none;
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(2){ 
                    background: transparent;
                    border: 1px solid currentColor;
                    transition: var(--oxynav-transition-duration);
                    margin-left: var(--oxynav-other-spacing);
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(2):not(:hover) > img{
                    filter: invert(0) !important;
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:hover{
                    background-color: var(--oxynav-activehover-color);
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(1) > a{
                    color: var(--oxynav-neutral-color);
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(2) > a{
                    color: var(--oxynav-brand-color);
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:hover > a{
                    color: var(--oxynav-brand-color);
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(1) > a::after{
                    color: var(--oxynav-neutral-color);   
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(2) > a::after{
                    color: var(--oxynav-brand-color);   
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:hover > a::after{
                    color: var(--oxynav-brand-color);   
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true'] > ul{
                    display: none;
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true'] > button, .oxy-site-navigation > ul:not(.open) > li[data-cta='true'] > ul{
                    display: none;
                }

                .ct-section-inner-wrap, .oxy-header-container{
  max-width: 1120px;
}
body {font-family: Arial, Helvetica, sans-serif;}body {line-height: 1.3;font-size: 16px;font-weight: 400;color: #404040;}.oxy-nav-menu-hamburger-line {background-color: #404040;}h1, h2, h3, h4, h5, h6 {font-family: Tahoma, Geneva, sans-serif;font-size: 30px;font-weight: 700;color: #ffffff;}h2, h3, h4, h5, h6{font-size: 30px;}h3, h4, h5, h6{font-size: 24px;}h4, h5, h6{font-size: 20px;}h5, h6{font-size: 18px;}h6{font-size: 16px;}a {color: #196db7;text-decoration: none;}a:hover {text-decoration: none;}.ct-link-text {color: #196db7;text-decoration: ;}.ct-link-text:hover {color: #ddcece;}.ct-link {color: #196db7;font-weight: 600;text-decoration: ;}.ct-link-button {border-radius: 3px;}.ct-section-inner-wrap {
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
}.ct-new-columns > .ct-div-block {
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 10px;
}.oxy-header-container {
padding-right: 20px;
padding-left: 20px;
}@media (max-width: 992px) {
				.ct-columns-inner-wrap {
					display: block !important;
				}
				.ct-columns-inner-wrap:after {
					display: table;
					clear: both;
					content: "";
				}
				.ct-column {
					width: 100% !important;
					margin: 0 !important;
				}
				.ct-columns-inner-wrap {
					margin: 0 !important;
				}
			}
.oxel_accordion {
 border-top-color:#adb4b9;
 border-right-color:#adb4b9;
 border-bottom-color:#adb4b9;
 border-left-color:#adb4b9;
 border-top-width:1px;
 border-right-width:1px;
 border-bottom-width:1px;
 border-left-width:1px;
 border-top-style:none;
 border-right-style:none;
 border-bottom-style:none;
 border-left-style:none;
 width:100%;
 padding-top:0px;
 margin-top:0px;
 background-color:#000000;
 font-weight:200;
 border-radius:10px;
}
@media (max-width: 479px) {
.oxel_accordion {
 padding-left:10px;
 margin-left:0px;
 margin-right:0px;
 margin-bottom:0px;
 padding-bottom:0px;
 padding-right:0px;
 padding-top:0px;
}
}

.oxel_accordion__row {
background-color :color(5);
border: 1px solid color(5);
}.oxel_accordion__row {
 font-family:Arial, Helvetica, sans-serif;
 width:90%;
 padding-top:8px;
 padding-left:8px;
 padding-right:8px;
 text-align:justify;
 font-weight:600;
 margin-bottom:0px;
 background-color:#000000;
 border-top-style:none;
 border-right-style:none;
 border-bottom-style:none;
 border-left-style:none;
 padding-bottom:12px;
 border-radius:10px;
cursor: pointer;
}
.oxel_accordion__row:not(.ct-section):not(.oxy-easy-posts),
.oxel_accordion__row.oxy-easy-posts .oxy-posts,
.oxel_accordion__row.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:row;
justify-content:space-between;
}
@media (max-width: 479px) {
.oxel_accordion__row {
 padding-left:0px;
 padding-right:0px;
 background-color:#000000;
 margin-left:10px;
}
}

.oxel_accordion__icon:hover{
color: #10ce2d;}.oxel_accordion__icon:hover{
}
.oxel_accordion__icon {
color: #39a0f9;}.oxel_accordion__icon 
>svg {width: 22px;height: 22px;}.oxel_accordion__icon {
 margin-right:0px;
 transition-duration:0.3s;
 font-size:16px;
 font-weight:100;
}
.oxel_accordion__row_left {
}
.oxel_accordion__row_left:not(.ct-section):not(.oxy-easy-posts),
.oxel_accordion__row_left.oxy-easy-posts .oxy-posts,
.oxel_accordion__row_left.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:row;
align-items:center;
}
.oxel_accordion__content {
color: #333333;}.oxel_accordion__content 
>svg {width: 16px;height: 16px;}.oxel_accordion__content {
 width:33.3%;
 padding-top:8px;
 padding-left:8px;
 padding-right:8px;
 padding-bottom:8px;
 border-bottom-color:#98a1a8;
 border-bottom-width:2px;
 border-bottom-style:none;
 opacity:0;
 transition-duration:3s;
 border-top-style:none;
 border-right-style:none;
 border-left-style:none;
 transition-property:max-height;
 text-align:left;
 margin-top:0px;
 font-size:16px;
 font-weight:100;
}
.oxel_accordion__content:not(.ct-section):not(.oxy-easy-posts),
.oxel_accordion__content.oxy-easy-posts .oxy-posts,
.oxel_accordion__content.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
align-items:flex-start;
}
@media (max-width: 479px) {
.oxel_accordion__content {
 padding-left:8px;
 overflow:visible;
 margin-left:0px;
}
}

.oxel_accordion__content__hidden {
 max-height:0px;
 padding-left:8px;
 padding-right:8px;
 padding-top:0px;
 z-index:-1;
 padding-bottom:0px;
 transition-duration:0s;
}
.oxel_accordion__content__hidden:not(.ct-section):not(.oxy-easy-posts),
.oxel_accordion__content__hidden.oxy-easy-posts .oxy-posts,
.oxel_accordion__content__hidden.ct-section .ct-section-inner-wrap{
display:flex;
}
.oxel_accordion__row__label {
color: #333333;}.oxel_accordion__row__label 
>svg {width: 16px;height: 16px;}.oxel_accordion__row__label {
 color:#ffffff;
 font-size:14px;
 margin-left:10px;
 font-weight:400;
}
@media (max-width: 479px) {
.oxel_accordion__row__label {
 font-size:14px;
}
}

.oxel-vidlist {
 width:100%;
}
.oxel-vidlist__columns {
 width:100%;
 position:relative;
}
.oxel-vidlist__columns:not(.ct-section):not(.oxy-easy-posts),
.oxel-vidlist__columns.oxy-easy-posts .oxy-posts,
.oxel-vidlist__columns.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:row;
align-items:flex-start;
}
@media (max-width: 991px) {
.oxel-vidlist__columns {
}
.oxel-vidlist__columns:not(.ct-section):not(.oxy-easy-posts),
.oxel-vidlist__columns.oxy-easy-posts .oxy-posts,
.oxel-vidlist__columns.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
}
}

.oxel-vidlist__column--left {
 width:60%;
 text-align:center;
}
.oxel-vidlist__column--left:not(.ct-section):not(.oxy-easy-posts),
.oxel-vidlist__column--left.oxy-easy-posts .oxy-posts,
.oxel-vidlist__column--left.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
}
.oxel-vidlist__column--right {
 right:0px;
 width:40%;
 text-align:left;
 height:100%;
 position:absolute;
 left:60%;
 top:0px;
 background-color:#cfd3d7;
}
.oxel-vidlist__column--right:not(.ct-section):not(.oxy-easy-posts),
.oxel-vidlist__column--right.oxy-easy-posts .oxy-posts,
.oxel-vidlist__column--right.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
align-items:flex-start;
justify-content:flex-start;
}
@media (max-width: 991px) {
.oxel-vidlist__column--right {
 max-height:200%;
}
}

.oxel-vidlist__column {
}
@media (max-width: 991px) {
.oxel-vidlist__column {
 width:100%;
 position:static;
}
}

.oxel-vidlist__video {
}
.oxel-vidlist__video--main {
}
.oxel-vidlist__list-item:hover{
 background-color:#dee1e3;
}
.oxel-vidlist__list-item {
 width:100%;
 padding-top:16px;
 padding-left:16px;
 padding-right:16px;
 padding-bottom:16px;
 text-align:left;
 color:initial;
 transition-duration:0.3s;
 transition-timing-function:ease-in-out;
}
.oxel-vidlist__list-item:not(.ct-section):not(.oxy-easy-posts),
.oxel-vidlist__list-item.oxy-easy-posts .oxy-posts,
.oxel-vidlist__list-item.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:row;
align-items:center;
justify-content:flex-start;
}
.oxel-vidlist__list-item-title {
 width:70%;
}
.oxel-vidlist__icon {
color: #606e79;}.oxel-vidlist__icon 
>svg {width: 32px;height: 32px;}.oxel-vidlist__icon {
 margin-left:16px;
 margin-right:16px;
 height:32px;
}
.oxel-vidlist__icon--inactive {
color: #606e79;}.oxel-vidlist__icon--inactive 
>svg {width: 32px;height: 32px;}.oxel-vidlist__icon--inactive {
}
.oxel-vidlist__icon--active {
color: #606e79;}.oxel-vidlist__icon--active 
>svg {width: 32px;height: 32px;}.oxel-vidlist__icon--active {
}
.oxel-vidlist__list-item--active {
 background-color:#dee1e3;
}
.oxel-vidlist__list-item-left {
 text-align:center;
}
.oxel-vidlist__list-item-left:not(.ct-section):not(.oxy-easy-posts),
.oxel-vidlist__list-item-left.oxy-easy-posts .oxy-posts,
.oxel-vidlist__list-item-left.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:row;
align-items:center;
justify-content:center;
}
.oxel-image-accordion {
}
.oxel-image-accordion:not(.ct-section):not(.oxy-easy-posts),
.oxel-image-accordion.oxy-easy-posts .oxy-posts,
.oxel-image-accordion.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:row;
}
@media (max-width: 767px) {
.oxel-image-accordion {
 height:600px;
}
.oxel-image-accordion:not(.ct-section):not(.oxy-easy-posts),
.oxel-image-accordion.oxy-easy-posts .oxy-posts,
.oxel-image-accordion.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
}
}

.oxel-image-accordion__item {
 position:relative;
 height:400px;
 overflow:hidden;
 transition-duration:0.6s;
 transition-timing-function:cubic-bezier(.69,.05,.67,.88);
 transition-property:all;
}
@media (max-width: 767px) {
.oxel-image-accordion__item {
 height:auto;
}
}

.oxel-image-accordion__details {
 z-index:10;
 position:absolute;
 left:18px;
 bottom:16px;
 width:10000px;
}
.oxel-image-accordion__details:not(.ct-section):not(.oxy-easy-posts),
.oxel-image-accordion__details.oxy-easy-posts .oxy-posts,
.oxel-image-accordion__details.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:row;
align-items:center;
}
@media (max-width: 767px) {
.oxel-image-accordion__details {
 position:absolute;
 bottom:8px;
 left:8px;
}
}

.oxel-image-accordion__icon {
background-color: #f9f9fa;
border: 1px solid #f9f9fa;
padding: 10px;color: #374047;}.oxel-image-accordion__icon 
>svg {width: 14px;height: 14px;}.oxel-image-accordion__icon {
 margin-right:16px;
}
@media (max-width: 767px) {
.oxel-image-accordion__icon {
padding: 6px;}.oxel-image-accordion__icon {
}
}

.oxel-image-accordion__link {
 color:#f9f9fa;
}
.oxel-image-accordion__image {
 position:absolute;
 width:100%;
 height:100%;
}
.oxel_switcher__content {
 width:100%;
 padding-top:32px;
 padding-left:32px;
 padding-right:32px;
 padding-bottom:32px;
}
.oxel_switcher__content:not(.ct-section):not(.oxy-easy-posts),
.oxel_switcher__content.oxy-easy-posts .oxy-posts,
.oxel_switcher__content.ct-section .ct-section-inner-wrap{
display:none;
flex-direction:unset;
}
.oxel_switcher {
 width:100%;
 min-width:100%;
}
.oxel_switcher__toggle {
 width:64px;
 background-color:#374047;
 border-radius:999em;
 margin-left:16px;
 margin-right:16px;
 padding-bottom:0px;
 transition-duration:0.3s;
 transition-timing-function:ease-in-out;
}
.oxel_switcher__toggle__icon {
color: #f9f9fa;}.oxel_switcher__toggle__icon 
>svg {width: 32px;height: 32px;}.oxel_switcher__toggle__icon {
 transition-duration:0.3s;
 transition-timing-function:ease-in-out;
}
.oxel_switcher__toggle_label {
 font-size:14px;
 color:#374047;
 font-weight:600;
 letter-spacing:4px;
 text-transform:uppercase;
 opacity:0.5;
 transition-duration:0.3s;
 transition-timing-function:ease-in-out;
}
.oxel_switcher__toggle_label--active {
 opacity:1;
}
.oxel_switcher__content--active {
}
.oxel_switcher__content--active:not(.ct-section):not(.oxy-easy-posts),
.oxel_switcher__content--active.oxy-easy-posts .oxy-posts,
.oxel_switcher__content--active.ct-section .ct-section-inner-wrap{
display:flex;
}
.oxel_icon_button__container:hover{
 background-color:#cfd3d7;
}
.oxel_icon_button__container {
 background-color:#eceeef;
 padding-top:8px;
 padding-left:16px;
 padding-right:16px;
 padding-bottom:8px;
 transition-duration:0.3s;
}
.oxel_icon_button__container:not(.ct-section):not(.oxy-easy-posts),
.oxel_icon_button__container.oxy-easy-posts .oxy-posts,
.oxel_icon_button__container.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:row;
align-items:center;
}
.oxel_icon_button_text {
 color:#374047;
}
.oxel_icon_button_icon {
color: #606e79;}.oxel_icon_button_icon 
>svg {width: 18px;height: 18px;}.oxel_icon_button_icon {
 margin-right:8px;
}
.oxel_dropdown_buttonv2__trigger {
 padding-top:8px;
 padding-bottom:8px;
 padding-left:16px;
 padding-right:16px;
 background-color:#374047;
 border-top-style:none;
 border-right-style:none;
 border-bottom-style:none;
 border-left-style:none;
 position:relative;
cursor: pointer;
}
.oxel_dropdown_buttonv2__trigger:not(.ct-section):not(.oxy-easy-posts),
.oxel_dropdown_buttonv2__trigger.oxy-easy-posts .oxy-posts,
.oxel_dropdown_buttonv2__trigger.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:row;
align-items:center;
}
.oxel_dropdown_buttonv2 {
 background-color:#374047;
 position:relative;
 width:min-content ;
}
.oxel_dropdown_buttonv2:not(.ct-section):not(.oxy-easy-posts),
.oxel_dropdown_buttonv2.oxy-easy-posts .oxy-posts,
.oxel_dropdown_buttonv2.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:row;
align-items:center;
}
.oxel_dropdown_buttonv2__submenu {
 position:absolute;
 left:0px;
 min-width:100%;
 padding-top:4px;
 width:200px;
 z-index:10;
 top:100%;
padding-inline-start: 0; margin-block-start: 0; margin-block-end: 0;
}
.oxel_dropdown_buttonv2__submenu--hidden {
 opacity:0;
pointer-events: none;
}
.oxel_dropdown_buttonv2__submenu--hidden:not(.ct-section):not(.oxy-easy-posts),
.oxel_dropdown_buttonv2__submenu--hidden.oxy-easy-posts .oxy-posts,
.oxel_dropdown_buttonv2__submenu--hidden.ct-section .ct-section-inner-wrap{
display:none;
}
.oxel_dropdown_buttonv2__submenubutton:hover{
 background-color:#dee1e3;
}
.oxel_dropdown_buttonv2__submenubutton {
 text-align:left;
 background-color:#eceeef;
 min-width:100%;
 color:#374047;
 transition-duration:0.3s;
 transition-timing-function:ease-in-out;
}
.oxel_dropdown_buttonv2__submenubutton:not(.ct-section):not(.oxy-easy-posts),
.oxel_dropdown_buttonv2__submenubutton.oxy-easy-posts .oxy-posts,
.oxel_dropdown_buttonv2__submenubutton.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
align-items:flex-start;
}
.oxel_dropdown_buttonv2__submenulabel {
 padding-top:8px;
 padding-bottom:8px;
 padding-left:16px;
 padding-right:16px;
 width:100%;
 color:#374047;
}
.oxel_dropdown_buttonv2__label {
 color:#f9f9fa;
white-space: nowrap;
}
.oxel_dropdown_buttonv2__symbol {
background-image: linear-gradient(135deg, rgba(0,0,0,0) 50%, #ffffff 50%);transform:rotate(45deg); width:8px;
 height:8px;
 margin-top:-4px;
 margin-left:16px;
min-width: 0 !important; min-height: 0 !important;
}
.oxel_horizontal_divider {
 margin-top:16px;
 margin-bottom:16px;
 width:100%;
}
.oxel_horizontal_divider:not(.ct-section):not(.oxy-easy-posts),
.oxel_horizontal_divider.oxy-easy-posts .oxy-posts,
.oxel_horizontal_divider.ct-section .ct-section-inner-wrap{
flex-direction:unset;
}
.oxel_horizontal_divider__line {
 height:2px;
 background-color:#98a1a8;
}
.oxel_horizontal_divider__icon {
color: #98a1a8;}.oxel_horizontal_divider__icon 
>svg {width: 16px;height: 16px;}.oxel_horizontal_divider__icon {
flex-shrink: 0;
}
.oxel_horizontal_divider__icon:not(.ct-section):not(.oxy-easy-posts),
.oxel_horizontal_divider__icon.oxy-easy-posts .oxy-posts,
.oxel_horizontal_divider__icon.ct-section .ct-section-inner-wrap{
display:flex;
}
.oxel_number_counter {
 padding-top:0px;
 padding-bottom:0px;
 margin-top:0px;
 margin-right:0px;
 margin-bottom:0px;
 margin-left:0px;
}
.oxel_number_counter:not(.ct-section):not(.oxy-easy-posts),
.oxel_number_counter.oxy-easy-posts .oxy-posts,
.oxel_number_counter.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:row;
}
.oxel_number_counter__number {
 font-family:Tahoma, Geneva, sans-serif;
 color:#374047;
}
.oxel_number_counter__label {
 font-family:Arial, Helvetica, sans-serif;
 color:#ffffff;
 font-size:12px;
}
.oxel_dynamicslider {
 width:100%;
}
@media (max-width: 479px) {
.oxel_dynamicslider {
}
}

.swiper-container {
}
.oxel_dynamicslider__container {
 height:400px;
}
.swiper-wrapper {
}
@media (max-width: 479px) {
.swiper-wrapper {
 width:100%;
}
.swiper-wrapper:not(.ct-section):not(.oxy-easy-posts),
.swiper-wrapper.oxy-easy-posts .oxy-posts,
.swiper-wrapper.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
}
}

.swiper-slide {
}
.custom-text {
 font-size:30px;
 margin-bottom:0px;
 margin-top:0px;
 padding-bottom:0px;
 padding-top:0px;
 width:100%;
 text-align:left;
 padding-left:0px;
 margin-left:0px;
 margin-right:0px;
 padding-right:0px;
 line-height:1;
 font-weight:800;
 text-decoration:underline;
}
.custom-text:not(.ct-section):not(.oxy-easy-posts),
.custom-text.oxy-easy-posts .oxy-posts,
.custom-text.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
}
@media (max-width: 479px) {
.custom-text {
 text-align:left;
 font-size:26px;
}
}

.costum-text-hard {
 color:#ffffff;
}
.custom-text-hard {
 font-size:16px;
 text-align:center;
}
.ss-tracks {
}
.ss-station-wrap {
}
.ss-station-wrap:not(.ct-section):not(.oxy-easy-posts),
.ss-station-wrap.oxy-easy-posts .oxy-posts,
.ss-station-wrap.ct-section .ct-section-inner-wrap{
display:none;
}
.shine-button {
}
.shine {
 background-color:color(4);
}
.shine-btn {
background-color :color(5);
border: 1px solid color(5);
color: #ffffff;
}.shine-btn {
 max-width:80%;
 padding-left:0px;
 margin-left:0px;
 margin-bottom:10px;
}
@media (max-width: 479px) {
.shine-btn {
 width:100%;
 margin-left:0px;
 margin-right:0px;
}
}

.oxy-close-modal {
color: #333333;}.oxy-close-modal 
>svg {width: 38px;height: 38px;}.oxy-close-modal {
background-color :color(4);
border: 1px solid color(4);
}.oxy-close-modal {
color: #333333;}.oxy-close-modal 
>svg {width: 38px;height: 38px;}.oxy-close-modal {
 font-size:10px;
 margin-right:10px;
}
@media (max-width: 479px) {
.oxy-close-modal {
}.oxy-close-modal 
>svg {width: 24px;height: 24px;}.oxy-close-modal {
}
}

.tabs-9597-tab:before{
  content:"";
}
.tabs-9597-tab:after{
  content:"";
}
.tabs-9597-tab:hover{
 background-color:#185389;
 box-shadow:0px 0px 12px 0px color(4);
}
.tabs-9597-tab {
 padding-top:10px;
 padding-bottom:10px;
 width:100%;
 border-radius:10px;
 padding-left:0px;
 padding-right:0px;
 border-top-color:#303030;
 border-right-color:#303030;
 border-bottom-color:#303030;
 border-left-color:#303030;
 border-top-width:1px;
 border-right-width:1px;
 border-bottom-width:1px;
 border-left-width:1px;
 border-top-style:solid;
 border-right-style:solid;
 border-bottom-style:solid;
 border-left-style:solid;
 color:#ffffff;
 margin-left:0px;
}
.tabs-9597-tab:not(.ct-section):not(.oxy-easy-posts),
.tabs-9597-tab.oxy-easy-posts .oxy-posts,
.tabs-9597-tab.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:row;
align-items:center;
justify-content:center;
}
@media (max-width: 479px) {
.tabs-9597-tab {
 margin-left:0px;
 width:100%;
 text-align:center;
}
.tabs-9597-tab:not(.ct-section):not(.oxy-easy-posts),
.tabs-9597-tab.oxy-easy-posts .oxy-posts,
.tabs-9597-tab.ct-section .ct-section-inner-wrap{
justify-content:center;
}
}

.tabs-9597-tab-active {
}
.tabs-contents-9597-tab {
 padding-top:10px;
 border-radius:10px;
 background-color:#282e30;
 padding-left:10px;
 padding-right:10px;
 padding-bottom:10px;
}
.tabs-contents-9597-tab:not(.ct-section):not(.oxy-easy-posts),
.tabs-contents-9597-tab.oxy-easy-posts .oxy-posts,
.tabs-contents-9597-tab.ct-section .ct-section-inner-wrap{
display:flex;
}
@media (max-width: 479px) {
.tabs-contents-9597-tab {
 padding-left:0px;
 padding-right:0px;
}
}

.oxy-stock-content-styles {
}
.chrome-btn {
color: #333333;}.chrome-btn 
>svg {width: 55px;height: 55px;}.chrome-btn {
}
@media (max-width: 479px) {
.chrome-btn {
}.chrome-btn {
 margin-right:10px;
 margin-left:10px;
}
}

.player-modal {
background-image: linear-gradient(#100419, #000000); border-radius:10px;
}
.data-ss-name {
}
.data-ss-avatar {
}
.profile-modal {
background-color :#28083f;
border: 1px solid #28083f;
color: #ffffff;
}.profile-modal {
 width:100%;
 margin-top:4px;
}
.player-repeater-modal {
 width:50%;
 padding-top:0px;
 padding-right:0px;
 padding-bottom:0px;
 padding-left:0px;
 margin-top:20px;
 margin-right:0px;
 margin-bottom:0px;
 margin-left:0px;
 border-radius:10px;
}
.player-repeater-modal:not(.ct-section):not(.oxy-easy-posts),
.player-repeater-modal.oxy-easy-posts .oxy-posts,
.player-repeater-modal.ct-section .ct-section-inner-wrap{
display:none;
}
@media (max-width: 479px) {
.player-repeater-modal {
 width:100%;
 margin-left:0px;
 margin-top:0px;
 margin-right:0px;
 margin-bottom:0px;
 padding-top:0px;
 padding-right:0px;
 padding-bottom:0px;
 padding-left:0px;
 z-index:9999;
}
}

.player-repeater-modal-style {
}
@media (max-width: 479px) {
.player-repeater-modal-style {
 width:100%;
}
}

.player-repeater-modal-size {
}
@media (max-width: 479px) {
.player-repeater-modal-size {
 padding-left:0px;
 padding-top:0px;
 padding-right:0px;
 padding-bottom:0px;
 margin-top:0px;
 margin-right:0px;
 margin-bottom:0px;
 margin-left:0px;
 width:100%;
}
}

.columns-modal {
 border-radius:10px;
 border-top-color:color(4);
 border-right-color:color(4);
 border-bottom-color:color(4);
 border-left-color:color(4);
 border-top-width:1px;
 border-right-width:1px;
 border-bottom-width:1px;
 border-left-width:1px;
 border-top-style:solid;
 border-right-style:solid;
 border-bottom-style:solid;
 border-left-style:solid;
 background-color:#170826;
}
.menu-modal {
}
@media (max-width: 479px) {
.menu-modal {
 position:static;
}
}

.groups {
}
.edit-avatar {
}
.avatar-modal {
}
.details-modal {
}
.edit-track {
}
.knob-icon {
}
.chrome-knob-icon {
}
.ssx-accordion {
 width:100%;
}
.hide-scrollbar {
 width:100%;
 margin-right:12px;
 border-radius:0px;
 overflow:hidden;
}
.log-out {
 color:#ffffff;
}
.ss-pwa-install {
}
.tabs-3767-tab {
}
.tabs-3767-tab-active {
}
.tabs-contents-3767-tab {
 padding-right:0px;
 padding-left:0px;
 padding-top:0px;
 padding-bottom:0px;
}
.banner-image {
}
.advert-block {
}
.advert-mid-page {
}
.advert-mid-page:not(.ct-section):not(.oxy-easy-posts),
.advert-mid-page.oxy-easy-posts .oxy-posts,
.advert-mid-page.ct-section .ct-section-inner-wrap{
display:flex;
}
.ss-menu-panel {
}
.ss-offcanvas {
}
@media (max-width: 479px) {
.ss-offcanvas {
}
}

.header-repeater {
}
@media (max-width: 479px) {
.header-repeater {
}
.header-repeater:not(.ct-section):not(.oxy-easy-posts),
.header-repeater.oxy-easy-posts .oxy-posts,
.header-repeater.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
}
}

.ss-modal-scroll {
 margin-bottom:200px;
}
@media (max-width: 479px) {
.ss-modal-scroll {
 margin-bottom:0px;
 padding-bottom:0px;
}
}

.ss-modal-body {
}
.ssx-oxy-accordion {
}
.ss-divs {
 margin-bottom:10px;
 margin-top:18px;
}
.ss-divs:not(.ct-section):not(.oxy-easy-posts),
.ss-divs.oxy-easy-posts .oxy-posts,
.ss-divs.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:row;
justify-content:center;
}
@media (max-width: 479px) {
.ss-divs {
 text-align:center;
 padding-left:19px;
 padding-top:0px;
 padding-right:0px;
 padding-bottom:0px;
 margin-top:20px;
 margin-bottom:10px;
}
.ss-divs:not(.ct-section):not(.oxy-easy-posts),
.ss-divs.oxy-easy-posts .oxy-posts,
.ss-divs.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
}
}

.how-to-video {
 width:100%;
}
.ens-search {
 width:100%;
 padding-top:0px;
 padding-right:0px;
 padding-bottom:0px;
 padding-left:0px;
 border-radius:20px;
 margin-bottom:18px;
}
.post-pages {
}
.post-wrap {
}
.email-div {
 text-align:left;
 padding-top:10px;
 padding-bottom:10px;
 padding-left:2px;
 padding-right:2px;
 background-color:#222426;
 border-radius:10px;
}
.email-div:not(.ct-section):not(.oxy-easy-posts),
.email-div.oxy-easy-posts .oxy-posts,
.email-div.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:row;
}
@media (max-width: 479px) {
.email-div {
}
.email-div:not(.ct-section):not(.oxy-easy-posts),
.email-div.oxy-easy-posts .oxy-posts,
.email-div.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
}
}

.password-div {
 text-align:left;
}
.display-name-div {
}
.tabs-6304-tab {
 border-radius:10px;
 background-color:#196db7;
 width:100%;
}
.tabs-6304-tab:not(.ct-section):not(.oxy-easy-posts),
.tabs-6304-tab.oxy-easy-posts .oxy-posts,
.tabs-6304-tab.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:row;
align-items:center;
}
.tabs-6304-tab-active {
}
.tabs-contents-6304-tab {
}
.tabs-0325-tab {
}
.tabs-0325-tab-active {
}
.tabs-contents-0325-tab {
}
/* =========================================
   GRADIENT TEXT
   ========================================= */

.custom-text{
  background: linear-gradient(90deg, #ffffff 0%, #39a0f9 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.custom-text-hard{
  background: linear-gradient(180deg, #ffffff 0%, #39a0f9 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}






/* Default: full-width submit buttons */
.wpforms-form button.wpforms-submit,
.wpforms-form input[type="submit"]{
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
}
/* =================================
   WPForms 617 – send icon submit
   Requires: Form CSS Class = inline-fields
   ================================= */

/* Tighten outer wrapper spacing */
#wpforms-617.wpforms-container,
#wpforms-617.wpforms-container-full,
#wpforms-617{
  padding-top: 0px !important;
  padding-bottom: 4px !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Remove extra internal top gap */
#wpforms-617 .wpforms-field-container{
  padding-top: 0 !important;
  margin-top: 0 !important;
}
#wpforms-617 .wpforms-field{
  padding-top: 0 !important;
  margin-top: 0 !important;
}
#wpforms-617 .wpforms-field-container .wpforms-field:first-child{
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Keep submit aligned near the top */
#wpforms-617 .wpforms-submit-container{
  padding-top: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  align-self: flex-start !important;
}

/* Icon submit button (form 617 only) */
#wpforms-form-617 button.wpforms-submit,
#wpforms-form-617 input[type="submit"]{
  width: 50px !important;
  height: 50px !important;
  min-width: 50px !important;

  border-radius: 10px !important;

  /* hide text */
  font-size: 0 !important;
  color: transparent !important;

  /* icon */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23a646ea' d='M2 21l21-9L2 3v7l15 2-15 2v7z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 16px 16px !important;
}

/* Optional hover polish */
#wpforms-form-617 button.wpforms-submit:hover,
#wpforms-form-617 input[type="submit"]:hover{
  filter: brightness(1.15);
}

/* ===============================
   Track Entries (Repeater Style)
   =============================== */

/* Wrapper */
.ss-entries{
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px; /* space between entries */
}

/* Each entry = one repeater row */
.ss-entry{
  padding: 12px 14px;
  border-radius: 12px;

  background: rgba(255,255,255,0.06); /* change this */
  border: 1px solid rgba(184,100,244,0.22);

  box-shadow: 0 6px 14px rgba(0,0,0,0.25);
}

/* Header row (name + time) */
.ss-entry-head{
  display: flex;
  align-items: center;
  gap: 8px;

  font-size: 12px;
  opacity: 0.85;
}

/* Name */
.ss-entry-name{
  font-weight: 800;
  color: rgba(255,255,255,0.95);
}

/* Separator dot */
.ss-entry-dot{
  opacity: 0.5;
}

/* Timestamp */
.ss-entry-time{
  color: rgba(255,255,255,0.65);
}

/* Body (dropdown value / message) */
.ss-entry-body{
  margin-top: 6px;
  font-size: 13px;
  color: rgba(255,255,255,0.9);
}

/* Empty state */
.ss-entry-empty{
  opacity: 0.6;
  font-size: 13px;
}

/* Change background of the dropdown menu options */
.wpforms-field-select-style-modern .choices__list--dropdown .choices__item {
    background-color: #28083f !important; /* Your desired background color */
    color: #ffffff; /* Your desired text color */
}

/* Change background of the highlighted (hover) option */
.wpforms-field-select-style-modern .choices__list--dropdown .choices__item--selectable.is-highlighted {
    background-color: #000000 !important; /* Highlight color */
}
}
/* hidden email field for comments */
.wpforms-field.wpforms-field-hidden {
  display: none !important;
}

/* WPForms confirmation box (normal + AJAX submit) */
.wpforms-confirmation-container-full,
div[submit-success] > .wpforms-confirmation-container-full:not(.wpforms-redirection-message){
  background: #28083f !important;
  text-color: #ffffff !important;
  border: 1px solid #671aaf !important;
  padding: 16px 18px !important;
  border-radius: 10px !important;
  box-sizing: border-box;
}


/* =========================
   SelfSound Player (Global)
   FIXES:
   - Visit Profile no overlap (proper flow + spacing)
   - Meter reverted to darker “board” look
   - Column divider border reverted to darker original
   - Inner borders remain #6516af
   - Button backgrounds remain #28083f
   - Wrapper border stays darker original
   ========================= */

.ss-track,
.ss-track * { box-sizing: border-box; }

.ss-track{
  --p1:#b864f4;
  --p2:#7021a8;

  /* requested colors */
  --ss-border:#6516af;   /* inner borders */
  --ss-btn-bg:#28083f;   /* button background */

  --bg:#000;
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.70);

  border-radius:16px;

  /* wrapper stays dark/original */
  background: linear-gradient(180deg, rgba(184,100,244,.14), rgba(112,33,168,.10)), var(--bg);
  border:1px solid rgba(184,100,244,.25);

  box-shadow: 0 10px 24px rgba(0,0,0,.45);
  overflow:hidden;
  width:100%;
  line-height:1.25;

  /* share positioning */
  position:relative;
}

.ss-track a{ color:inherit; text-decoration:none; }
.ss-track button{ font:inherit; }

/* Layout */
.ss-track.ss-two-col{ display:grid; grid-template-columns:170px 1fr; }

/* LEFT */
.ss-track .ss-col-left{
  padding:16px;

  /* ✅ column divider reverted darker */
  border-right:1px solid rgba(184,100,244,.18);

  display:flex;
  align-items:flex-start;
  justify-content:center;
  flex-direction:column;
  gap:12px;
}

/* RIGHT */
.ss-track .ss-col-right{
  padding:16px;
  min-width:0;

  /* ✅ make right column a vertical flow so nothing overlaps */
  display:flex;
  flex-direction:column;
}

/* Cover */
.ss-track .ss-cover{
  width:100%;
  max-width:138px;
  aspect-ratio:1/1;
  border-radius:16px;
  overflow:hidden;

  /* keep inner border purple */
  border:1px solid var(--ss-border);

  box-shadow:0 10px 18px rgba(0,0,0,.35);
  background:rgba(255,255,255,.06);
}
.ss-track .ss-cover-img{ width:100%; height:100%; object-fit:cover; display:block; }
.ss-track .ss-cover-fallback{
  width:100%; height:100%;
  background: radial-gradient(circle at 30% 30%, rgba(184,100,244,.22), rgba(112,33,168,.08));
}

/* LEFT: Track info button under image */
.ss-track .ss-track-info{
  width:100%;
  max-width:138px;
  text-align:center;

  background:var(--ss-btn-bg);
  border:1px solid var(--ss-border);

  color:rgba(255,255,255,.88);
  padding:10px 12px;
  border-radius:14px;
  font-size:12px;
  font-weight:800;
  display:inline-block;
}
.ss-track .ss-track-info:hover{ filter:brightness(1.12); }

/* Title */
.ss-track .ss-title{
  color:var(--text);
  font-weight:900;
  letter-spacing:.2px;
  font-size:16px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  display:block;
}
.ss-track .ss-title.ss-title-link{
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ss-track .ss-title.ss-title-link:hover{ opacity:.92; }

/* Subline */
.ss-track .ss-subline{
  margin-top:6px;
  color:var(--muted);
  font-size:12px;
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}
.ss-track .ss-author{ color:rgba(255,255,255,.86); }
.ss-track .ss-author-link:hover{ text-decoration:underline; }
.ss-track .ss-dot{ opacity:.5; }

/* Genre */
.ss-track .ss-genre{ opacity:.92; white-space:nowrap; }

/* Plays */
.ss-track .ss-plays{
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:#6818b2;
  font-weight:800;
}
.ss-track .ss-play-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#a646ea;
}
.ss-track .ss-play-icon svg{ width:22px; height:22px; display:block; }

/* Player row */
.ss-track .ss-player-row{
  margin-top:12px;
  display:flex;
  align-items:center;
  gap:10px;

  /* ✅ creates guaranteed space before Visit Profile */
  margin-bottom:12px;
}

/* Play button */
.ss-track .ss-play-mini{
  width:28px; height:28px;
  border-radius:10px;

  border:1px solid var(--ss-border);
  background:var(--ss-btn-bg);

  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  flex:0 0 auto;

  padding:0;
  appearance:none;
  -webkit-appearance:none;
}
.ss-track .ss-play-mini:hover{ filter:brightness(1.12); }
.ss-track .ss-play-mini svg{ display:block; }

/* Meter (✅ reverted to darker board + darker border like before) */
.ss-track .ss-meter{
  position:relative;
  flex:1;
  min-width:0;
  height:40px;
  border-radius:12px;

  /* darker board */
  background: rgba(0,0,0,.38);

  /* darker original style border */
  border:1px solid rgba(184,100,244,.18);

  overflow:hidden;
}
.ss-track .ss-wave{ position:absolute; inset:0; }

/* Progress still works + keep inner purple border */
.ss-track .ss-progress{
  position:absolute;
  inset:10px;
  border-radius:999px;

  background: rgba(255,255,255,.08);
  border:1px solid rgba(184,100,244,.18);

  cursor:pointer;
  overflow:hidden;
}
.ss-track .ss-progress-fill{
  position:absolute; inset:0;
  width:0%;
  background: linear-gradient(90deg, var(--p1), var(--p2));
}
.ss-track .ss-progress-knob{
  position:absolute;
  top:50%;
  left:0%;
  width:12px; height:12px;
  transform: translate(-50%, -50%);
  border-radius:999px;
  background:#fff;
  border:2px solid var(--ss-border);
}

/* Time */
.ss-track .ss-time{
  color:var(--muted);
  font-size:12px;
  white-space:nowrap;
  flex:0 0 auto;
}
.ss-track .ss-sep{ opacity:.6; padding:0 6px; }

/* RIGHT: Visit profile button under meter (✅ no overlap) */
.ss-track .ss-visit-profile{
  width:100%;
  text-align:center;

  background:var(--ss-btn-bg);
  border:1px solid var(--ss-border);

  color:rgba(255,255,255,.92);
  padding:10px 12px;
  border-radius:12px;
  font-size:12px;
  font-weight:800;

  display:block;

  /* ✅ makes sure it sits below player row, never on top of meter */
  margin-top:0;
}
.ss-track .ss-visit-profile:hover{ filter:brightness(1.12); }

/* Actions */
.ss-track .ss-actions{
  margin-top:12px;
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

/* Force button/link styling consistency */
.ss-track .ss-skip,
.ss-track .ss-download{
  background:var(--ss-btn-bg);
  border:1px solid var(--ss-border);
  color:rgba(255,255,255,.88);
  padding:8px 10px;
  border-radius:12px;
  font-size:12px;
  cursor:pointer;

  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;

  appearance:none;
  -webkit-appearance:none;
}
.ss-track .ss-skip{ line-height:1; }
.ss-track .ss-download:hover,
.ss-track .ss-skip:hover{ filter:brightness(1.12); }

/* Share */
.ss-track .ss-share{
  position:absolute;
  right:12px;
  bottom:12px;
  z-index:20;
}
.ss-track .ss-share-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;

  background:var(--ss-btn-bg);
  border:1px solid var(--ss-border);
  color:rgba(255,255,255,.88);

  padding:8px 10px;
  border-radius:12px;
  font-size:12px;
  font-weight:800;
  cursor:pointer;

  appearance:none;
  -webkit-appearance:none;
}
.ss-track .ss-share-btn:hover{ filter:brightness(1.12); }
.ss-track .ss-share-icon{ display:inline-flex; }
.ss-track .ss-share-icon svg{ display:block; }

.ss-track .ss-share-menu{
  position:absolute;
  right:0;
  bottom:calc(100% + 10px);
  min-width:210px;

  padding:10px;
  border-radius:14px;
  background: rgba(0,0,0,.92);
  border:1px solid var(--ss-border);
  box-shadow: 0 14px 30px rgba(0,0,0,.55);

  display:none;
}
.ss-track .ss-share-menu.is-open{ display:block; }

.ss-track .ss-share-item{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;

  background:var(--ss-btn-bg);
  border:1px solid var(--ss-border);
  color:rgba(255,255,255,.90);

  padding:10px 10px;
  border-radius:12px;
  font-size:12px;
  font-weight:800;
  cursor:pointer;

  appearance:none;
  -webkit-appearance:none;
}
.ss-track .ss-share-item + .ss-share-item{ margin-top:8px; }
.ss-track .ss-share-item:hover{ filter:brightness(1.12); }
.ss-track .ss-copy-status{ opacity:.7; font-size:12px; font-weight:800; }
.ss-track .ss-share-arrow{ opacity:.8; }

/* Responsive */
@media (max-width:640px){
  .ss-track.ss-two-col{ grid-template-columns:1fr; }
  .ss-track .ss-col-left{
    border-right:none;

    /* ✅ divider reverted darker on mobile too */
    border-bottom:1px solid rgba(184,100,244,.18);

    justify-content:flex-start;
    align-items:stretch;
  }
  .ss-track .ss-cover{ max-width:100%; width:100%; aspect-ratio:1/1; }
  .ss-track .ss-track-info{ max-width:100%; }
  .ss-track .ss-player-row{ align-items:flex-start; }
  .ss-track .ss-time{ font-size:11px; }
}

@media (max-width:420px){
  .ss-track .ss-col-left,
  .ss-track .ss-col-right{ padding:14px; }
  .ss-track .ss-meter{ height:36px; }
  .ss-track .ss-progress{ inset:9px; }
  .ss-track .ss-share-label{ display:none; }
}


/* =========================
   FULL CARD "TOY SHINE" SWEEP
   White sheen glides across the entire card periodically
   ========================= */

.ss-track{
  position: relative;
  isolation: isolate;
}

/* keep content above the shine */
.ss-track > *{
  position: relative;
  z-index: 2;
}

/* The sweeping sheen */
.ss-track::before{
  content:"";
  position:absolute;
  inset:-2px;                 /* slightly beyond edges so it doesn’t clip */
  border-radius:inherit;
  pointer-events:none;
  z-index:1;

  /* wide diagonal highlight */
  background: linear-gradient(
    115deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0) 42%,
    rgba(255,255,255,.18) 48%,
    rgba(255,255,255,.65) 50%,
    rgba(255,255,255,.18) 52%,
    rgba(255,255,255,0) 58%,
    rgba(255,255,255,0) 100%
  );

  /* make it feel glossy, not a harsh stripe */
  filter: blur(0.6px);
  opacity: 0;

  /* start off-screen */
  transform: translateX(-140%) translateY(10%) rotate(0.001deg);

  /* periodic sweep */
  animation: ssToyShine 7.5s ease-in-out infinite;
}

/* Optional: subtle extra sparkle on the border during sweep */
.ss-track::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  z-index:0;

  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0));
  opacity: 0;
  animation: ssToyBorderGlow 7.5s ease-in-out infinite;
}

/* The sweep: only “on” briefly, then chill */
@keyframes ssToyShine{
  0%   { opacity:0; transform: translateX(-140%) translateY(10%); }
  10%  { opacity:0; }
  18%  { opacity:.85; }
  30%  { opacity:.85; transform: translateX(140%) translateY(-10%); }
  38%  { opacity:0; }
  100% { opacity:0; transform: translateX(140%) translateY(-10%); }
}

/* Border glow synced with sweep */
@keyframes ssToyBorderGlow{
  0%   { opacity:0; }
  12%  { opacity:0; }
  22%  { opacity:.25; }
  32%  { opacity:.25; }
  42%  { opacity:0; }
  100% { opacity:0; }
}

/* Optional: on hover, sweep a bit stronger */
.ss-track:hover::before{
  filter: blur(0.9px);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .ss-track::before,
  .ss-track::after{
    animation:none;
    opacity:0;
  }
}







/* ===== ACF FORM GLOBAL STYLES (SelfSound Dark / Blue) ===== */

:root{
  --acf-bg: #111319;
  --acf-bg-2: #0f1116;
  --acf-border: #196db7;
  --acf-text: #ffffff;
  --acf-muted: rgba(255,255,255,0.65);
  --acf-muted-2: rgba(255,255,255,0.50);
  --acf-focus: rgba(25,109,183,0.45);
}

/* Remove default ACF field separators */
.acf-fields,
.acf-field {
  border: none !important;
}

.acf-field::before,
.acf-field::after {
  display: none !important;
}

/* Field labels (titles) */
.acf-label label {
  color: var(--acf-text) !important;
  font-weight: 600;
}

/* Field instructions / descriptions (ACF + ACFE common) */
.acf-field .acf-label p,
.acf-field .acf-label .description,
.acf-field .acf-input p,
.acf-field .acf-input .description,
.acf-field .acf-input .acf-input-prepend,
.acf-field .acf-input .acf-input-append,
.acf-description,
.description,
.acf-notice,
.acf-field .acf-notice {
  color: var(--acf-muted) !important;
}

/* Any small helper / meta text in ACF */
.acf-field .acf-label .acf-required,
.acf-field .acf-label .acf-tip,
.acf-field .acf-label .acf-help {
  color: var(--acf-muted-2) !important;
}

/* All input fields */
.acf-input input[type="text"],
.acf-input input[type="email"],
.acf-input input[type="url"],
.acf-input input[type="password"],
.acf-input input[type="number"],
.acf-input input[type="search"],
.acf-input input[type="file"],
.acf-input select,
.acf-input textarea {
  width: 100% !important;
  height: 50px;
  background-color: var(--acf-bg) !important;
  color: var(--acf-text) !important;

  border: 1px solid var(--acf-border) !important;
  border-radius: 10px;

  padding: 0 15px;
  box-sizing: border-box;

  box-shadow: none !important;
}

/* Textarea override */
.acf-input textarea {
  height: auto;
  min-height: 150px;
  padding: 15px;
  resize: vertical;
}

/* Placeholder text */
.acf-input input::placeholder,
.acf-input textarea::placeholder {
  color: var(--acf-muted) !important;
}

/* Select cleanup */
.acf-input select {
  appearance: none;
}

/* Focus state */
.acf-input input:focus,
.acf-input textarea:focus,
.acf-input select:focus {
  outline: none !important;
  box-shadow: 0 0 0 2px var(--acf-focus) !important;
  border-color: var(--acf-border) !important;
}

/* File upload spacing */
.acf-input input[type="file"] {
  padding: 10px;
  height: auto;
}

/* ======================================
   ACF FORM — LOWER CENTERED SPINNER
   ====================================== */

.song-upload-form {
  position: relative;
}

/* Dim overlay */
.song-upload-form::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(17, 19, 25, 0.72); /* matches #111319 */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 40;
}

/* Activate overlay */
.song-upload-form:has(.acf-spinner.is-active)::after {
  opacity: 1;
}

/* Spinner container */
.song-upload-form .acf-spinner {
  background: none !important;
  width: 56px;
  height: 56px;
  border-radius: 50%;

  position: absolute;
  top: 62%;
  left: 50%;
  transform: translate(-50%, -50%);

  opacity: 1 !important;
  z-index: 50;
  display: none;
}

/* Active */
.song-upload-form .acf-spinner.is-active {
  display: block;
}

/* Spinner ring */
.song-upload-form .acf-spinner::before {
  content: "";
  position: absolute;
  inset: 0;
  box-sizing: border-box;

  border: 4px solid rgba(255,255,255,0.18);
  border-top-color: var(--acf-border);
  border-radius: 50%;

  animation: acf-spin 0.8s linear infinite;
  box-shadow: 0 0 10px rgba(25,109,183,0.45);
}

/* Spin animation */
@keyframes acf-spin {
  to { transform: rotate(360deg); }
}

/* ===============================
   SUBMIT BUTTON
   =============================== */

.song-upload-form .acf-form-submit input[type="submit"],
.song-upload-form .acf-form-submit button {
  width: 100% !important;
  height: 50px !important;
  line-height: 50px !important;

  background-color: var(--acf-border) !important;
  color: var(--acf-text) !important;

  border: 1px solid var(--acf-border) !important;
  border-radius: 10px !important;

  margin-top: 10px !important;
  padding: 0 20px !important;

  font-size: 16px !important;
  font-weight: 700 !important;

  cursor: pointer !important;
  box-shadow: none !important;
  text-decoration: none !important;
  appearance: none !important;

  transition: filter 0.15s ease, transform 0.08s ease;
}

/* Hover */
.song-upload-form .acf-form-submit input[type="submit"]:hover,
.song-upload-form .acf-form-submit button:hover {
  filter: brightness(0.92);
}

/* Active press */
.song-upload-form .acf-form-submit input[type="submit"]:active,
.song-upload-form .acf-form-submit button:active {
  transform: translateY(1px);
}

/* Focus */
.song-upload-form .acf-form-submit input[type="submit"]:focus,
.song-upload-form .acf-form-submit button:focus {
  outline: none !important;
  box-shadow: 0 0 0 2px var(--acf-focus) !important;
}

/* ===============================
   FILE UPLOAD BUTTON
   =============================== */

.song-upload-form .acf-input input[type="file"]::file-selector-button {
  height: 50px;
  background-color: var(--acf-border);
  color: var(--acf-text);
  border: 1px solid var(--acf-border);
  border-radius: 10px;
  padding: 0 18px;
  cursor: pointer;

  transition: filter 0.15s ease, transform 0.08s ease;
}

.song-upload-form .acf-input input[type="file"]::file-selector-button:hover {
  filter: brightness(0.92);
}

.song-upload-form .acf-input input[type="file"]::file-selector-button:active {
  transform: translateY(1px);
}

/* Firefox */
.song-upload-form .acf-input input[type="file"]::-moz-file-upload-button {
  height: 50px;
  background-color: var(--acf-border);
  color: var(--acf-text);
  border: 1px solid var(--acf-border);
  border-radius: 10px;
  padding: 0 18px;
  cursor: pointer;

  transition: filter 0.15s ease, transform 0.08s ease;
}

.song-upload-form .acf-input input[type="file"]::-moz-file-upload-button:hover {
  filter: brightness(0.92);
}

.song-upload-form .acf-input input[type="file"]::-moz-file-upload-button:active {
  transform: translateY(1px);
}

/* ===============================
   ACFE Icon Submit Button (NO MASK)
   Works even when mask/data-mask fails
   =============================== */

.acfe-icon-submit a,
.acfe-icon-submit button,
.acfe-icon-submit input{
  width:48px;
  height:48px;
  padding:0;
  border-radius:10%;
  border:none;
  cursor:pointer;

  /* Hide text */
  font-size:0;
  color:transparent;
  text-indent:-9999px;
  overflow:hidden;

  /* Blue button + WHITE SVG icon centered */
  background-color:#1075ce !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M19 7v4H7.83l2.58-2.59L9 7l-5 5 5 5 1.41-1.41L7.83 13H21V7z'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:20px 20px !important;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  transition:background-color .15s ease, transform .12s ease;
}

.acfe-icon-submit a:hover,
.acfe-icon-submit button:hover,
.acfe-icon-submit input:hover{
  background-color:#0e66b4 !important;
  transform:translateY(-1px);
}

.acfe-icon-submit a:active,
.acfe-icon-submit button:active,
.acfe-icon-submit input:active{
  transform:translateY(0);
}

.acfe-icon-submit a:focus-visible,
.acfe-icon-submit button:focus-visible,
.acfe-icon-submit input:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(16,117,206,0.4);
}

/* Password field wrapper */
.acf-field-password {
  position: relative;
}

/* Eye icon */
.acf-password-toggle {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  font-size: 16px;
  opacity: 0.6;
  user-select: none;
}

.acf-password-toggle:hover {
  opacity: 1;
}

/* Give space so text doesn't go under icon */
.acf-field-password input {
  padding-right: 38px;
}

/* ===============================
   ACF field instructions / help text
   =============================== */

.acf-field .acf-description,
.acf-field .description,
.acf-label .description {
  color: #ffffff;
  font-size: 13px;
  line-height: 1.4;
}
/* ===============================
   ACF Toggle (True/False) label text
   =============================== */

.acf-field-true-false .acf-switch-label {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* If description text is shown under toggle */
.acf-field-true-false .acf-description,
.acf-field-true-false .description {
  color: rgba(255, 255, 255, 0.55) !important;
}















/* ===== Oxygen Modal Fit + Scroll Fix ===== */
.player-modal-fit.oxy-modal-backdrop,
.player-modal-fit .oxy-modal-backdrop{
  align-items: center;
  justify-content: center;
}

/* Make the modal box fit the viewport */
.player-modal-fit .oxy-modal-v2,
.player-modal-fit.oxy-modal-v2,
.player-modal-fit .oxy-modal,
.player-modal-fit.oxy-modal{
  width: min(1100px, 92vw);
  max-width: 92vw;
  max-height: 92vh;           /* key: prevents top from being cut off */
  display: flex;
  flex-direction: column;      /* key: header stays, body scrolls */
  overflow: hidden;            /* key: prevent weird double scroll */
  box-sizing: border-box;
}

/* Only the INNER content scrolls */
.player-modal-fit .oxy-modal-inner,
.player-modal-fit .oxy-modal-content,
.player-modal-fit.oxy-modal-v2 .oxy-modal-inner,
.player-modal-fit.oxy-modal-v2 .oxy-modal-content{
  flex: 1 1 auto;
  overflow-y: auto;            /* key: scroll content properly */
  -webkit-overflow-scrolling: touch;
  max-height: 100%;
  box-sizing: border-box;
}

/* Optional: keep images from overflowing/cropping */
.player-modal-fit img{
  max-width: 100%;
  height: auto;
}

/* Mobile: true full height + no cut-off */
@media (max-width: 767px){
  .player-modal-fit .oxy-modal-v2,
  .player-modal-fit.oxy-modal-v2,
  .player-modal-fit .oxy-modal,
  .player-modal-fit.oxy-modal{
    width: 100vw;
    max-width: 100vw;
    max-height: 100vh;
    border-radius: 0;
  }

  .player-modal-fit .oxy-modal-inner,
  .player-modal-fit .oxy-modal-content,
  .player-modal-fit.oxy-modal-v2 .oxy-modal-inner,
  .player-modal-fit.oxy-modal-v2 .oxy-modal-content{
    height: 100vh;
    max-height: 100vh;
  }
}
/* Make sure the modal box is the positioning context */
.player-modal-fit .oxy-modal-v2,
.player-modal-fit.oxy-modal-v2,
.player-modal-fit .oxy-modal,
.player-modal-fit.oxy-modal{
  position: relative !important;
}

.player-modal-back-btn{
  display: inline-flex;
  align-items: center;
  gap: 6px;

  background: #000;
  color: #fff;
  border: none;
  border-radius: 8px;

  padding: 10px 12px;
  font-size: 14px;
  line-height: 1;

  cursor: pointer;
  margin: 12px 0 12px 12px; /* top/left spacing */
}

.player-modal-back-btn:hover{
  opacity: 0.85;
}






/* Hide the target_post_id field in the ACFE form */
.acf-field[data-name="target_post_id"]{
  display:none !important;
}
/* ===============================
   COMMENTS WRAPPER
================================ */
#comments,
.comments-area {
  max-width: 760px;
  margin: 32px auto;
  padding: 0 4px;
}

/* ===============================
   COMMENTS TITLE (COUNT)
================================ */
.comments-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 16px;
  opacity: 0.8;
  color: #39a0f9;
}

/* ===============================
   COMMENT LIST RESET
================================ */
.comment-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ===============================
   SINGLE COMMENT
================================ */
.comment {
  display: flex;
  gap: 12px;
  padding: 14px;
  margin-bottom: 12px;
  border-radius: 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
}

/* ===============================
   AVATAR (FIX HUGE IMAGE)
================================ */
.comment-author img,
.comment-author .avatar {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50%;
  flex-shrink: 0;
  margin-right: 6px;
}

/* ===============================
   COMMENT BODY WRAPPER
================================ */
.comment-body {
  width: 100%;
}

/* ===============================
   AUTHOR + DATE
================================ */
.comment-meta {
  margin-bottom: 6px;
}

.comment-author .fn {
  font-size: 14px;
  font-weight: 600;
  color: #39a0f9;
}

.comment-metadata {
  font-size: 12px;
  opacity: 0.6;
}

.comment-metadata a {
  color: #39a0f9;
  text-decoration: none;
}

/* ===============================
   COMMENT CONTENT
================================ */
.comment-content {
  font-size: 14px;
  line-height: 1.5;
  color: #ffffff;
}

.comment-content p {
  margin: 0 0 6px;
}

/* ===============================
   NESTED COMMENTS (REPLIES)
================================ */
.comment .children {
  margin-top: 10px;
  padding-left: 16px;
  border-left: 2px solid rgba(255,255,255,0.08);
}

/* ===============================
   REPLY LINK (OPTIONAL)
================================ */
.comment-reply-link {
  font-size: 12px;
  opacity: 0.6;
  text-decoration: none;
  color: #39a0f9;
}

.comment-reply-link:hover {
  opacity: 1;
}

/* === REMOVE BOTTOM BLOAT === */

/* Kill bottom paragraph spacing */
.comment-content p:last-child {
  margin-bottom: 0 !important;
}

/* Reduce bottom padding only */
.comment {
  padding-bottom: 8px; /* was effectively ~14px */
}

/* Remove hidden body spacing */
.comment-body {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Tighten meta spacing slightly */
.comment-meta {
  margin-bottom: 4px;
}

/* Optional: tighten line height a hair */
.comment-content {
  line-height: 1.45;
}
/* Hide WP edit link (if your theme outputs it) */
.comment-edit-link { display: none !important; }

/* Delete button styling */
.ss-comment-actions { margin-top: 6px; }
.ss-comment-delete {
  font-size: 12px;
  opacity: .65;
  background: transparent;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  padding: 4px 10px;
  cursor: pointer;
  color: #ffffff;
}
.ss-comment-delete:hover {
  color: #39a0f9;
  opacity: 1;
}

/* Like/Unlike */
.ss-comment-reactions{
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.ss-comment-like{
  font-size: 12px;
  color: #ffffff;
  background: transparent;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  padding: 4px 10px;
  cursor: pointer;
}

.ss-comment-like:hover{ color: #39a0f9; opacity: 1; }

.ss-comment-like.is-liked{
  color: #39a0f9;
  border-color: rgba(255,255,255,.35);
}

.ss-like-count{
  font-size: 12px;
  opacity: .65;
  color: #39a0f9;
}

/* Make comment card a positioning context */
.comment {
  position: relative;
}

/* Move likes to top-right */
.ss-comment-reactions {
  position: absolute;
  top: 10px;
  right: 12px;
  margin: 0;
}

/* Slightly smaller so it feels subtle */
.ss-comment-like,
.ss-like-count {
  font-size: 11px;
}
/* Post author badge */
.comment.bypostauthor .comment-author .fn::after,
.comment.bypostauthor .fn::after {
  content: "Author";
  font-size: 11px;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  opacity: 0.75;
  color: #39a0f9;
}
/* Highlight my comments */
.comment.ss-by-me {
  border-color: rgba(255,255,255,0.20);
  background: rgba(255,255,255,0.06);
}
/* Clamp long comments */
.comment .comment-content.ss-clamped {
  display: -webkit-box;
  -webkit-line-clamp: 5;      /* change lines here */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Read more button */
.ss-readmore {
  margin-top: 6px;
  font-size: 12px;
  opacity: .65;
  background: transparent;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  padding: 4px 10px;
  cursor: pointer;
  color: #39a0f9;
}
.ss-readmore:hover { opacity: 1; 
}


.ss-notifications { max-width: 760px; }
.ss-notifications-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.ss-notifications-title { font-weight:600; color:#39a0f9; }
.ss-notifications-badge { margin-left:8px; padding:2px 8px; border-radius:999px; border:1px solid rgba(255,255,255,.15); opacity:.8; font-size:12px; color:#39a0f9; }
.ss-notifications-markread { font-size:12px; opacity:.7; text-decoration:none; color:#39a0f9; }
.ss-notifications-markread:hover { opacity:1; }
.ss-notifications-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
.ss-notification { padding:12px; border-radius:14px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.03); }
.ss-notification-meta { display:flex; gap:10px; align-items:center; font-size:12px; opacity:.85; color:#ffffff; }
.ss-notification-date { opacity:.6; color:#39a0f9; }
.ss-notification-text { margin-top:6px; opacity:.85; color:#ffffff; }
.ss-notification-link { display:inline-block; margin-top:6px; font-size:12px; text-decoration:none; opacity:.7; color:#39a0f9; }
.ss-notification-link:hover { opacity:1; }/* ===== SSX Playlist V7 (Dark) - CLEAN (Blue) ===== */

:root{
  --ssx7-bg: #0b0c0f;
  --ssx7-card: #111319;
  --ssx7-card2: #0f1116;
  --ssx7-border: rgba(255,255,255,0.08);
  --ssx7-text: rgba(255,255,255,0.92);
  --ssx7-muted: rgba(255,255,255,0.62);
  --ssx7-pill: rgba(255,255,255,0.06);

  --ssx7-accent: #1075ce;   /* site blue */
  --ssx7-neon: #52d6ff;     /* neon glow blue */

  --ssx-controls-w: 132px;  /* desktop controls + meter width */
  --ssx-controls-w-m: 124px;/* mobile controls + meter width */
}

/* ========= Shared / Safety ========= */
.ssx-track-row,
.ssx-bar *{
  box-sizing: border-box;
}

.ssx-pill,
.ssx-trk-title,
.ssx-trk-producer,
.ssx-bar__title,
.ssx-bar__producer{
  -webkit-tap-highlight-color: transparent;
}

/* Kill purple: hover/active/focus always blue */
.ssx-pill:hover,
.ssx-ctl:hover{
  border-color: rgba(16,117,206,0.55) !important;
  background: rgba(16,117,206,0.16) !important;
}
.ssx-pill:active,
.ssx-ctl:active{
  border-color: rgba(16,117,206,0.55) !important;
  background: rgba(16,117,206,0.16) !important;
}
.ssx-pill:focus-visible,
.ssx-ctl:focus-visible{
  outline: 2px solid rgba(16,117,206,0.55) !important;
  outline-offset: 2px;
}

.ssx-trk-title:visited,
.ssx-trk-producer:visited,
.ssx-bar__title:visited{
  color: inherit !important;
}

/* Neon numbers */
[data-ssx-bar-plays],
[data-ssx-bar-comments],
.ssx-track-row [data-ssx-plays],
.ssx-track-row [data-ssx-comments]{
  color: var(--ssx7-neon);
  text-shadow:
    0 0 6px rgba(82,214,255,0.75),
    0 0 14px rgba(82,214,255,0.35);
  font-weight: 900;
}

/* Share rules:
   Desktop: show copy, hide share
   Mobile: hide copy, show share */
.ssx-pill--share,
.ssx-pill--sharebar{ display:none !important; }

@media (max-width: 900px){
  .ssx-pill--copy,
  .ssx-pill--copybar{ display:none !important; }

  .ssx-pill--share,
  .ssx-pill--sharebar{ display:inline-flex !important; }
}

/* ========= Track Row (Repeater) ========= */
.ssx-track-row{
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 12px;
  align-items: center;

  padding: 10px 12px;
  border: 1px solid var(--ssx7-border);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--ssx7-card), var(--ssx7-card2));
  color: var(--ssx7-text);
}

.ssx-track-row.is-current{
  border-color: rgba(16,117,206,0.55);
  box-shadow: 0 0 0 1px rgba(16,117,206,0.22) inset;
}

/* Cover +10px already */
.ssx-trk-coverbtn{
  width: 64px;
  height: 64px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--ssx7-border);
  background: #000;
  padding: 0;
  cursor: pointer;
  position: relative;
  display: grid;
  place-items: center;
}

.ssx-trk-cover{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}

/* Play overlay + neon ring */
.ssx-trk-playicon{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 18px;
  font-weight: 900;
  color: rgba(255,255,255,0.95);
  background: radial-gradient(circle at center, rgba(0,0,0,0.35), rgba(0,0,0,0) 55%);
  text-shadow: 0 2px 12px rgba(0,0,0,0.6);
  pointer-events: none;
  opacity: 0.95;
}
.ssx-trk-playicon::before{
  content:"";
  position:absolute;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 2px solid rgba(82,214,255,0.85);
  box-shadow:
    0 0 8px rgba(82,214,255,0.55),
    0 0 18px rgba(16,117,206,0.35);
  background: rgba(0,0,0,0.28);
}

.ssx-trk-main{ min-width: 0; }

.ssx-trk-title{
  display:block;
  font-weight: 800;
  font-size: 14px;
  line-height: 1.2;
  color: var(--ssx7-text);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.ssx-trk-title:hover{ text-decoration: underline; }

.ssx-trk-sub{
  margin-top: 6px;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  color: var(--ssx7-muted);
  font-size: 12px;
}

.ssx-trk-producer{
  color: var(--ssx7-muted);
  text-decoration: none;
  font-weight: 700;
}
.ssx-trk-producer:hover{ color: #fff; text-decoration: underline; }

/* Pills */
.ssx-pill{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--ssx7-border);
  background: var(--ssx7-pill);
  color: var(--ssx7-muted);
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}

.ssx-pill--genre{
  color: rgba(255,255,255,0.88);
  border-color: rgba(16,117,206,0.45);
  background: rgba(16,117,206,0.16);
}

.ssx-pill--stat{ color: rgba(255,255,255,0.70); }

.ssx-trk-stats{
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.ssx-trk-stats button.ssx-pill{
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  line-height: 1;
  cursor: pointer;
}

/* Make 🎥 icon bright + noticeable */
.ssx-pill--out{
  color: rgba(255,255,255,0.95) !important;
  border-color: rgba(82,214,255,0.85) !important;
  background: rgba(16,117,206,0.14) !important;
  box-shadow:
    0 0 8px rgba(82,214,255,0.40),
    0 0 18px rgba(16,117,206,0.22) !important;
}

/* MOBILE ROW: thinner + title gets full width by forcing stats to row 2 */
@media (max-width: 900px){
  .ssx-track-row{
    grid-template-columns: 64px 1fr;
    grid-template-areas:
      "cover main"
      "stats stats";
    align-items: start;
    padding: 8px 10px; /* thinner card */
    gap: 10px;
  }

  .ssx-trk-coverbtn{ grid-area: cover; }
  .ssx-trk-main{ grid-area: main; min-width:0; }

  /* tighten vertical dead space */
  .ssx-trk-sub{ margin-top: 3px; }
  .ssx-trk-stats{
    grid-area: stats;
    margin-top: 2px;          /* THIS kills the dead gap */
    justify-content: flex-end;
  }

  .ssx-pill{ padding: 4px 7px; font-size: 11px; }
}

/* ========= Bottom Player Bar ========= */
.ssx-bar{
  position: static;
  inset: auto;
  z-index: auto;
  width: 100%;
  padding: 0;
  background: transparent;
  backdrop-filter: none;
}

.ssx-bar__inner{
  width: 100%;
  margin: 0;

  border: 1px solid var(--ssx7-border);
  border-radius: 14px;
  background: #111319;
  color: var(--ssx7-text);

  /* IMPORTANT: consistent grid that matches your request */
  display: grid;
  grid-template-columns: 46px 1fr var(--ssx-controls-w) var(--ssx-controls-w);
  grid-template-areas:
    "cover meta controls time"
    "cover actions controls time";
  gap: 10px;
  align-items: center;
  padding: 8px 10px; /* compact */
}

.ssx-bar__coverbtn{
  grid-area: cover;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--ssx7-border);
  background: #000;
  padding: 0;
  cursor: pointer;
}
.ssx-bar__cover{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.ssx-bar__meta{ grid-area: meta; min-width: 0; }

.ssx-bar__title{
  display:block;
  font-weight: 900;
  font-size: 13px;
  line-height: 1.1;
  color: var(--ssx7-text);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ssx-bar__title:hover{ text-decoration: underline; }

.ssx-bar__sub{
  margin-top: 4px; /* tighter */
  display:flex;
  gap: 10px;
  align-items: center;
  flex-wrap: nowrap;
  overflow: hidden;
}

/* Producer VERY visible (desktop especially) */
.ssx-bar__producer{
  color: rgba(255,255,255,0.95);
  font-weight: 900;
  text-decoration:none;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60%;
}
.ssx-bar__producer:hover{ text-decoration: underline; }

/* Push genre to the right so producer is readable */
.ssx-bar__genre{
  margin-left: auto;
  max-width: 40%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Controls: top-right */
.ssx-bar__controls{
  grid-area: controls;
  width: var(--ssx-controls-w);
  display:flex;
  justify-content: center;
  gap: 8px;
  align-items: center;
}

.ssx-ctl{
  width: 34px;
  height: 34px;
  border-radius: 11px;
  border: 1px solid var(--ssx7-border);
  background: rgba(255,255,255,0.05);
  color: var(--ssx7-text);
  cursor: pointer;
  display:grid;
  place-items:center;
}
.ssx-ctl--play{ width: 38px; height: 38px; }
.ssx-ctl [data-ssx-icon]{ font-size: 18px; }

/* Time/meter: FAR RIGHT under controls (same width) */
.ssx-bar__time{
  grid-area: time;
  width: var(--ssx-controls-w);
  justify-self: end;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--ssx7-muted);
}

.ssx-bar__progress{
  width: 100%;
  margin-top: 6px;
  height: 12px;
  border-radius: 999px;
  border: 1px solid var(--ssx7-border);
  background: rgba(255,255,255,0.04);
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.ssx-bar__fill{
  position:absolute; left:0; top:0; bottom:0;
  width:0%;
  background: linear-gradient(90deg, rgba(16,117,206,0.62), rgba(255,255,255,0.10));
}
.ssx-bar__knob{
  position:absolute;
  top:50%;
  left:0%;
  transform: translate(-50%,-50%);
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.88);
  box-shadow: 0 0 0 4px rgba(16,117,206,0.22);
}

/* Actions: LEFT of the meter, same row, compact */
.ssx-bar__actions{
  grid-area: actions;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  white-space: nowrap;
  position: relative;
}
.ssx-bar__actions button.ssx-pill{
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  line-height: 1;
  cursor: pointer;
}

/* Bright 🎥 in bottom bar too */
.ssx-bar__aout{
  color: rgba(255,255,255,0.95) !important;
  border-color: rgba(82,214,255,0.85) !important;
  background: rgba(16,117,206,0.14) !important;
  box-shadow:
    0 0 8px rgba(82,214,255,0.40),
    0 0 18px rgba(16,117,206,0.22) !important;
}

/* Toast */
.ssx-bar__toast{
  position: absolute;
  right: 0;
  top: -34px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--ssx7-border);
  background: rgba(0,0,0,0.7);
  color: #fff;
  font-size: 12px;
}

/* ========= Mobile Bottom Bar (tight + same structure) ========= */
@media (max-width: 900px){
  .ssx-bar__inner{
    grid-template-columns: 46px 1fr var(--ssx-controls-w-m) var(--ssx-controls-w-m);
    grid-template-areas:
      "cover meta controls time"
      "cover actions controls time";
    gap: 8px;
    padding: 6px 8px; /* shorter */
  }

  .ssx-bar__controls{ width: var(--ssx-controls-w-m); gap: 6px; justify-content: end; }
  .ssx-bar__time{
    width: var(--ssx-controls-w-m);
    font-size: 11px;
  }
  .ssx-bar__progress{ margin-top: 5px; height: 12px; }

  .ssx-bar__sub{ margin-top: 3px; }
  .ssx-pill{ padding: 4px 7px; font-size: 11px; }
}

/* Extra-small: hide genre to keep things clean */
@media (max-width: 420px){
  .ssx-bar__genre{ display: none !important; }
  .ssx-bar__title{ font-size: 12px; }
}

/* =========================================
   MOBILE BOTTOM BAR — STOP OVERFLOW
   - Icons row sits BELOW image section
   - Time/meter on its own row
   - Desktop unchanged
   ========================================= */
@media (max-width: 900px){

  /* Re-layout the bottom bar for mobile only */
  .ssx-bar__inner{
    display: grid !important;
    grid-template-columns: 46px 1fr auto !important;
    grid-template-areas:
      "cover meta controls"
      "actions actions actions"
      "time time time" !important;

    gap: 6px !important;
    padding: 6px 8px !important;
    align-items: center !important;
  }

  .ssx-bar__coverbtn{ grid-area: cover !important; }
  .ssx-bar__meta{ grid-area: meta !important; min-width: 0 !important; }
  .ssx-bar__controls{
    grid-area: controls !important;
    width: auto !important;
    justify-content: flex-end !important;
    gap: 6px !important;
  }

  /* ICON ROW under the image section */
  .ssx-bar__actions{
    grid-area: actions !important;
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: wrap !important;     /* key: prevents overflow */
    white-space: normal !important; /* key: prevents overflow */
  }

  /* TIME + METER row */
  .ssx-bar__time{
    grid-area: time !important;
    width: 100% !important;
    min-width: 0 !important;
    text-align: left !important;
    font-size: 11px !important;
  }
  .ssx-bar__progress{
    width: 100% !important;
    height: 12px !important;
    margin-top: 5px !important;
  }

  /* Slightly tighter text block */
  .ssx-bar__sub{ margin-top: 3px !important; }
}

/* =========================================
   AUDIO-ADVERT ROW (minimal) — still uses SSX row classes
   ========================================= */
.ssx-track-row--ad{
  grid-template-columns: 64px 1fr; /* remove stats column visually */
}

.ssx-track-row--ad .ssx-trk-stats{
  display: none !important;
}

.ssx-track-row--ad .ssx-trk-sub{
  display: none !important; /* no producer/genre line */
}
/* =========================================================
   SelfSound Follow Modal – SSX Leaderboard Style (1-line rows)
   avatar | name | meta | (plays) | button
   ========================================================= */

/* wrapper */
.ss-follow-modal{
  color:#fff;
  max-width: 980px;
  margin: 0 auto;
}
.ss-follow-modal *{ box-sizing:border-box; }

/* shell */
.ss-follow-modal .ss-shell{
  border: 1px solid #222426;
  border-radius: 16px;
  overflow: hidden;
  background:#0f1116;
}

/* top bar */
.ss-follow-modal .ss-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:16px;
  border-bottom:1px solid #222426;
  background:#0f1116;
}

.ss-follow-modal .ss-title{
  font-weight:900;
  font-size:14px;
  letter-spacing:.2px;
  white-space:nowrap;
  color:#fff;
}

/* search */
.ss-follow-modal .ss-search{ width: min(420px, 100%); }
.ss-follow-modal .ss-search input{
  width:100%;
  padding:11px 12px;
  border-radius:12px;
  border:1px solid #222426;
  background:#111319;
  color:#fff;
  outline:none;
  font-size:13px;
}
.ss-follow-modal .ss-search input::placeholder{ color: rgba(255,255,255,.55); }

/* panels stacked */
.ss-follow-modal .ss-cols{
  display:grid;
  grid-template-columns: 1fr !important;
  gap:18px;
  padding:18px;
}

/* panel */
.ss-follow-modal .ss-col{
  border:1px solid #222426;
  background:#0f1116;
  border-radius:14px;
  overflow:hidden;
  max-height:420px; /* keep your scroll behavior */
  display:flex;
  flex-direction:column;
}

/* panel header */
.ss-follow-modal .ss-col-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px;
  border-bottom:1px solid #222426;
  background:#0f1116;
  flex:0 0 auto;
}
.ss-follow-modal .ss-col-head b{
  font-size:13px;
  font-weight:900;
  letter-spacing:.2px;
  color:#fff;
}
.ss-follow-modal .ss-count{
  font-size:12px;
  color: rgba(255,255,255,.7);
  padding:6px 10px;
  border-radius:999px;
  border:1px solid #222426;
  background:#111319;
}

/* list (scroll inside panel) */
.ss-follow-modal .ss-list--compact{
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:10px;
  overflow:auto;
  flex:1 1 auto;
  max-height:none;
}

/* scrollbar */
.ss-follow-modal .ss-list--compact::-webkit-scrollbar{ width:8px; }
.ss-follow-modal .ss-list--compact::-webkit-scrollbar-thumb{
  background:#2a2d30;
  border-radius:999px;
}
.ss-follow-modal .ss-list--compact::-webkit-scrollbar-track{ background:#0f1116; }

/* =========================================================
   ROW = FORCE ONE HORIZONTAL LINE (like SSX leaderboard)
   ========================================================= */
.ss-follow-modal .ss-row{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:14px;

  padding:12px 16px;
  margin:0;

  background:#111319;
  border:1px solid #222426;
  border-radius:14px;
}

/* kill stacking from nested blocks */
.ss-follow-modal .ss-row *{ max-width:100%; }

/* left cluster as link */
.ss-follow-modal .ss-row__left{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  gap:12px;
  min-width:0;
  flex:1 1 auto;

  text-decoration:none;
  color:#fff !important;
}

/* avatar (match SSX: square-ish) */
.ss-follow-modal .ss-avatar{
  width:36px !important;
  height:36px !important;
  flex:0 0 36px !important;
  border-radius:8px;
  object-fit:cover;
  background:#0f1116;
  border:1px solid #222426;
}

/* text cluster must stay inline */
.ss-follow-modal .ss-row__text{
  flex:1 1 auto !important;
  min-width:0 !important;

  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  gap:10px !important;
}

/* name */
.ss-follow-modal .ss-name{
  display:inline-flex !important;
  align-items:center !important;

  color:#fff !important;
  font-weight:700;
  font-size:15px;
  line-height:1.15;

  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  min-width:0 !important;
  max-width: 320px;
}

/* handle becomes "meta" style */
.ss-follow-modal .ss-handle{
  display:inline-flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  align-items:center !important;

  color:#39a0f9 !important;            /* SSX metaLink blue */
  font-size:13px;
  opacity:0.85;

  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  min-width:0 !important;
  max-width: 260px;
}

/* right side pinned */
.ss-follow-modal .ss-row__right{
  flex:0 0 auto !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:10px;
  white-space:nowrap !important;
}

/* plays pill (optional like SSX count) */
.ss-follow-modal .ss-plays{
  flex:0 0 auto !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:6px !important;

  background:#0f1116;
  border:1px solid #222426;
  border-radius:999px;
  padding:6px 10px;

  color:#fff !important;
  font-weight:800;
  font-size:14px;
  font-variant-numeric:tabular-nums;
  white-space:nowrap !important;
}

.ss-follow-modal .ss-dot{
  width:7px;
  height:7px;
  border-radius:999px;
  background:#39a0f9; /* match SSX play icon blue */
}

/* buttons */
.ss-follow-modal .ss-btn{
  border:1px solid #222426;
  background:#0f1116;
  color:#fff !important;
  padding:10px 14px;
  border-radius:999px;
  font-weight:900;
  font-size:12px;
  cursor:pointer;
  white-space:nowrap;
}

.ss-follow-modal .ss-follow-btn[data-following="1"]{
  background:#111319;
  border-color:#2a2d30;
}

/* hover like SSX */
.ss-follow-modal .ss-row:hover{
  background:#151822;
  border-color:#2a2d30;
}
.ss-follow-modal .ss-btn:hover{
  box-shadow:none;
  background:#151822;
  border-color:#2a2d30;
}

/* empty state */
.ss-follow-modal .ss-empty{
  padding:16px;
  text-align:center;
  color: rgba(255,255,255,.65);
  border:1px dashed #2a2d30;
  border-radius:12px;
  background:#0f1116;
  margin:12px;
}

/* mobile */
@media (max-width:480px){
  .ss-follow-modal .ss-row{ padding:10px 12px; gap:12px; }
  .ss-follow-modal .ss-avatar{ width:32px !important; height:32px !important; flex-basis:32px !important; }
  .ss-follow-modal .ss-name{ font-size:14px; max-width: 220px; }
  .ss-follow-modal .ss-handle{ display:none !important; } /* same as SSX meta hide */
  .ss-follow-modal .ss-btn{ padding:9px 12px; }
  .ss-follow-modal .ss-plays{ padding:6px 9px; font-size:13px; }
}
/* ===========================
   MOCKUP PLAYER STYLES
   =========================== */

.mockup-bar{
  --accent1:#b864f4;
  --accent2:#7021a8;

  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 14px;
  border-radius:16px;
  background:
    linear-gradient(180deg, rgba(184,100,244,.14), rgba(112,33,168,.10)),
    #000;
  border:1px solid rgba(184,100,244,.28);
  box-shadow:0 10px 22px rgba(0,0,0,.45);
}

/* clickable areas */
.mockup-logo-link{
  display:flex;
  flex:0 0 auto;
  text-decoration:none;
}

.mockup-main-link{
  display:flex;
  align-items:center;
  gap:12px;
  flex:1;
  text-decoration:none;
  color:inherit;
  cursor:pointer;
}

/* logo */
.mockup-cover{
  width:60px;
  height:60px;
  border-radius:12px;
  background-size:cover;
  background-position:center;
  border:1px solid rgba(184,100,244,.35);
  box-shadow:0 6px 14px rgba(0,0,0,.35);
}

/* text */
.mockup-text{
  display:flex;
  flex-direction:column;
  line-height:1.15;
  min-width:0;
}

.mockup-title{
  font-size:14px;
  font-weight:900;
  color:rgba(255,255,255,.95);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.mockup-sub{
  font-size:11px;
  font-weight:700;
  color:rgba(255,255,255,.65);
}

/* fake waveform */
.mockup-wave{
  flex:1;
  height:14px;
  border-radius:999px;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(184,100,244,.45) 0 2px,
      rgba(0,0,0,0) 2px 6px
    );
  opacity:.55;
  mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
}

/* play icon */
.mockup-play{
  width:34px;
  height:34px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(184,100,244,.35);
  color:#fff;
  flex:0 0 auto;
}

/* hover */
.mockup-main-link:hover{
  transform:translateY(-1px);
  transition:transform .12s ease;
}
/* FORCE HEADER PLAYER LAYOUT (prevents stacking) */
.mockup-bar{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  flex-wrap:nowrap !important;
  gap:12px !important;
}

.mockup-logo-link{
  flex:0 0 auto !important;
}

.mockup-main-link{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  gap:12px !important;
  flex:1 1 auto !important;
  min-width:0 !important;
}
/* =========================
   Selfsound Search (NEW COLORS)
   BG: #0d406d
   Borders: #10ce2d
   Text: #ffffff
   ========================= */

.ss-user-search{
  position: relative;
  width: 100%;
  max-width: 420px;
}

/* Search bar */
.ss-user-search__form{
  display:flex;
  align-items:center;
  gap:8px;
  background:#111319;
  border:2px solid #1075ce;
  border-radius:12px;
  padding:6px 8px;
}

.ss-user-search__form:focus-within{
  box-shadow: 0 0 0 3px rgba(16,206,45,.35);
}

/* Input */
.ss-user-search__input{
  flex:1;
  background:transparent;
  border:0;
  outline:none;
  color:#ffffff;
  font-size:14px;
  padding:8px;
}

.ss-user-search__input::placeholder{
  color:rgba(255,255,255,.75);
}

/* Button + icon */
.ss-user-search__btn{
  background:transparent;
  border:0;
  cursor:pointer;
  padding:6px;
}

.ss-user-search__btn svg{
  width:18px;
  height:18px;
  stroke:#ffffff;
  stroke-width:2;
  fill:none;
  opacity:.9;
}

/* Dropdown */
.ss-user-search__dropdown{
  position:absolute;
  top:calc(100% + 10px);
  left:0;
  right:0;
  background:#0d406d;
  border:2px solid #1075ce;
  border-radius:14px;
  box-shadow:0 18px 50px rgba(0,0,0,.45);
  overflow:hidden;
  z-index:999999;
}

/* Section headers */
.ss-user-search__section{
  padding:10px 14px;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(255,255,255,.8);
  border-top:1px solid rgba(16,206,45,.35);
}

.ss-user-search__section:first-child{
  border-top:0;
}

/* Result item */
.ss-user-search__item{
  display:block;
  padding:12px 14px;
  background:transparent;
  border:0;
  width:100%;
  text-align:left;
  cursor:pointer;
}

.ss-user-search__item:hover,
.ss-user-search__item.is-active{
  background:rgba(255,255,255,.08);
}

/* Text */
.ss-user-search__name{
  font-weight:600;
  color:#ffffff;
}

.ss-user-search__sub{
  font-size:12px;
  margin-top:2px;
  color:rgba(255,255,255,.85);
}

/* Badge */
.ss-user-search__badge{
  display:inline-block;
  font-size:10px;
  padding:2px 6px;
  border-radius:999px;
  border:1px solid rgba(16,206,45,.85);
  margin-right:8px;
  color:#ffffff;
  opacity:.95;
}

/* Empty state */
.ss-user-search__empty{
  padding:14px;
  font-size:13px;
  color:rgba(255,255,255,.85);
}
/* =========================================================
   OXEL ACCORDION (BEM) → SSX BILLBOARD (FIX OVERLAY ON OPEN)
   Symptom fixed:
   - Can't select/highlight text because an overlay sits on top.
   Solution:
   - On OPEN: raise content z-index, disable pointer-events on overlay-like layers,
     enable selection/pointer-events on actual content.
   ========================================================= */

/* ---------- ROW CARD + 6px GAP ---------- */
.oxel_accordion__row{
  margin:0 0 6px 0 !important;
  background:#111319 !important;
  border:1px solid #222426 !important;
  border-radius:14px !important;
  overflow:hidden !important;
  box-shadow:none !important;
  position:relative !important;   /* allow z-index stacking */
  z-index:0 !important;
}
.oxel_accordion__row:last-child{ margin-bottom:0 !important; }

.oxel_accordion__row:hover{
  background:#151822 !important;
  border-color:#2a2d30 !important;
}

/* ---------- TITLE BAR ---------- */
.oxel_accordion__title{
  padding:12px 16px !important;
  margin:0 !important;

  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;

  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:14px !important;

  color:#fff !important;
  font-weight:700 !important;
  font-size:15px !important;
  line-height:1.2 !important;

  min-height:52px !important;
  min-width:0 !important;
}

.oxel_accordion__title > a,
.oxel_accordion__title > button{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:14px !important;

  width:100% !important;
  padding:0 !important;
  margin:0 !important;

  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;

  color:inherit !important;
  font:inherit !important;
  text-decoration:none !important;

  cursor:pointer !important;
  min-width:0 !important;
}

.oxel_accordion__title *{
  min-width:0 !important;
  max-width:100% !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

/* icon */
.oxel_accordion__icon{
  color:#39a0f9 !important;
  opacity:.9 !important;
  flex:0 0 auto !important;
}

/* ---------- CONTENT BASELINE ---------- */
.oxel_accordion__content{
  margin:0 !important;
  padding:0 !important;              /* prevents gaps while closed */
  background:transparent !important;
  border-top:0 !important;

  position:relative !important;
  z-index:0 !important;
  overflow:hidden !important;         /* let Oxel animate height */
}

/* =========================================================
   OPEN STATE
   Works when aria-expanded="true" is on the toggle in title.
   We include both + and ~ in case content isn't immediately adjacent.
   ========================================================= */

/* 1) Raise the content layer above anything else */
.oxel_accordion__title > button[aria-expanded="true"] + .oxel_accordion__content,
.oxel_accordion__title > button[aria-expanded="true"] ~ .oxel_accordion__content,
.oxel_accordion__title > a[aria-expanded="true"] + .oxel_accordion__content,
.oxel_accordion__title > a[aria-expanded="true"] ~ .oxel_accordion__content{
  overflow:visible !important;
  z-index:9999 !important;
}

/* 2) Apply the panel styling to the inner wrapper (prevents weird overlay/clipping) */
.oxel_accordion__title > button[aria-expanded="true"] + .oxel_accordion__content > :first-child,
.oxel_accordion__title > button[aria-expanded="true"] ~ .oxel_accordion__content > :first-child,
.oxel_accordion__title > a[aria-expanded="true"] + .oxel_accordion__content > :first-child,
.oxel_accordion__title > a[aria-expanded="true"] ~ .oxel_accordion__content > :first-child{
  padding:12px 16px 16px !important;
  background:#111319 !important;
  border-top:1px solid #222426 !important;

  position:relative !important;
  z-index:10000 !important;

  color:#fff !important;

  pointer-events:auto !important;
  user-select:text !important;
  -webkit-user-select:text !important;
}

/* 3) FORCE text visible and selectable */
.oxel_accordion__title > button[aria-expanded="true"] + .oxel_accordion__content > :first-child *,
.oxel_accordion__title > button[aria-expanded="true"] ~ .oxel_accordion__content > :first-child *,
.oxel_accordion__title > a[aria-expanded="true"] + .oxel_accordion__content > :first-child *,
.oxel_accordion__title > a[aria-expanded="true"] ~ .oxel_accordion__content > :first-child *{
  color:inherit !important;
  visibility:visible !important;
  opacity:1 !important;

  pointer-events:auto !important;
  user-select:text !important;
  -webkit-user-select:text !important;
}

/* 4) Kill overlay click-catchers inside OPEN content
   This targets common overlay patterns: absolute/fixed/sticky layers spanning full area.
   We disable pointer-events so they can't block selection/clicks.
*/
.oxel_accordion__title > button[aria-expanded="true"] + .oxel_accordion__content *:is([style*="position:absolute"],[style*="position: fixed"],[style*="position:fixed"],[style*="position: sticky"],[style*="position:sticky"]),
.oxel_accordion__title > button[aria-expanded="true"] ~ .oxel_accordion__content *:is([style*="position:absolute"],[style*="position: fixed"],[style*="position:fixed"],[style*="position: sticky"],[style*="position:sticky"]),
.oxel_accordion__title > a[aria-expanded="true"] + .oxel_accordion__content *:is([style*="position:absolute"],[style*="position: fixed"],[style*="position:fixed"],[style*="position: sticky"],[style*="position:sticky"]),
.oxel_accordion__title > a[aria-expanded="true"] ~ .oxel_accordion__content *:is([style*="position:absolute"],[style*="position: fixed"],[style*="position:fixed"],[style*="position: sticky"],[style*="position:sticky"]){
  pointer-events:none !important;
}

/* Links */
.oxel_accordion__title > button[aria-expanded="true"] + .oxel_accordion__content a,
.oxel_accordion__title > button[aria-expanded="true"] ~ .oxel_accordion__content a,
.oxel_accordion__title > a[aria-expanded="true"] + .oxel_accordion__content a,
.oxel_accordion__title > a[aria-expanded="true"] ~ .oxel_accordion__content a{
  color:#39a0f9 !important;
  text-decoration:none !important;
}
.oxel_accordion__title > button[aria-expanded="true"] + .oxel_accordion__content a:hover,
.oxel_accordion__title > button[aria-expanded="true"] ~ .oxel_accordion__content a:hover,
.oxel_accordion__title > a[aria-expanded="true"] + .oxel_accordion__content a:hover,
.oxel_accordion__title > a[aria-expanded="true"] ~ .oxel_accordion__content a:hover{
  text-decoration:underline !important;
}

/* wrapper spacing kill */
.oxel_accordion{ gap:0 !important; row-gap:0 !important; }

/* ---------- MOBILE ---------- */
@media (max-width:480px){
  .oxel_accordion__title{
    padding:10px 12px !important;
    min-height:48px !important;
    font-size:14px !important;
    gap:12px !important;
  }

  .oxel_accordion__title > button[aria-expanded="true"] + .oxel_accordion__content > :first-child,
  .oxel_accordion__title > button[aria-expanded="true"] ~ .oxel_accordion__content > :first-child,
  .oxel_accordion__title > a[aria-expanded="true"] + .oxel_accordion__content > :first-child,
  .oxel_accordion__title > a[aria-expanded="true"] ~ .oxel_accordion__content > :first-child{
    padding:10px 12px 14px !important;
  }
}/* ===============================
   SSX Action Icons
   =============================== */
.ssx-track-actions{
  display:flex;
  gap:10px;
  align-items:center;
}

.ssx-icon-btn{
  width:36px;
  height:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  cursor:pointer;
  padding:0;
}

.ssx-icon-btn svg{
  width:18px;
  height:18px;
  fill:none;
  stroke: currentColor;
  stroke-width:2;
  opacity:0.95;
}

/* New site accent */
.ssx-edit-btn{ color:#196db7; }
.ssx-delete-btn{ color:#ff4d4d; }

/* ===============================
   SSX Modal (NO display:none)
   =============================== */

/* Modal base: keep it in DOM so ACF uploader binds properly */
.ssx-edit-modal{
  position:fixed;
  inset:0;
  z-index:999999;

  display:flex;
  align-items:center;
  justify-content:center;

  background:rgba(0,0,0,0.70);
  padding:18px;

  /* hidden state */
  opacity:0;
  visibility:hidden;
  pointer-events:none;

  transition: opacity 160ms ease, visibility 160ms ease;
}

/* Visible */
.ssx-edit-modal.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

/* prevent page scroll when modal open */
body.ssx-modal-open{
  overflow:hidden;
}

.ssx-edit-modal-inner{
  width:min(920px, 100%);
  max-height:88vh;
  overflow:auto;
  background:#111319;
  border:1px solid rgba(255,255,255,0.10);
  border-radius:18px;
  padding:18px;
  position:relative;
}

.ssx-modal-close{
  position:absolute;
  top:10px;
  right:12px;
  width:40px;
  height:40px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color:#fff;
  font-size:22px;
  cursor:pointer;
}

.ssx-modal-head{ padding-right:56px; }
.ssx-modal-title{
  font-size:18px;
  font-weight:700;
  color:rgba(255,255,255,0.94);
}
.ssx-modal-sub{
  margin-top:4px;
  font-size:13px;
  color:rgba(255,255,255,0.62);
}

.ssx-modal-loading,
.ssx-modal-error{
  padding:16px;
  border-radius:14px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.86);
}.ssx-star-rating{display:inline-flex;gap:4px;line-height:1}
.ssx-star{font-size:28px;user-select:none}
.ssx-star.is-empty{opacity:.22}
.ssx-star.is-filled{opacity:1}

/* Blue */
.ssx-stars--blue .ssx-star{color:#1075ce}
.ssx-stars--blue .ssx-star.is-filled{text-shadow:0 0 10px rgba(16,117,206,.28)}

/* Yellow */
.ssx-stars--yellow .ssx-star{color:#ffd24a}
.ssx-stars--yellow .ssx-star.is-filled{text-shadow:0 0 10px rgba(255,210,74,.30)}
/* Hide install buttons unless install is available (Chrome/Android) */
.ss-pwa-install {
  display: none;

  /* CENTER THE TEXT */
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Show when install is available */
.ss-pwa-can-install .ss-pwa-install {
  display: inline-flex;
}

/* If installed, keep hidden */
.ss-pwa-installed .ss-pwa-install {
  display: none;
}
/* =========================
   SSX Leaderboard – FORCE ONE LINE PER ITEM
   avatar | name | meta | ▶ count
   ========================= */

.ssx-leaderboard{ width:100%; }

.ssx-leaderboard__list{
  margin:0;
  padding:0;
  list-style:none;            /* no outside numbering */
}

/* force one horizontal line */
.ssx-leaderboard__row{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:14px;

  padding:12px 16px;
  margin:8px 0;

  background:#111319;
  border:1px solid #222426;
  border-radius:14px;
}

/* kill stacking from nested blocks */
.ssx-leaderboard__row *{
  max-width:100%;
}

/* avatar */
.ssx-leaderboard__avatar{
  width:36px !important;
  height:36px !important;
  flex:0 0 36px !important;

  border-radius:8px;
  object-fit:cover;
  background:#0f1116;
}

/* main cluster MUST be inline */
.ssx-leaderboard__main{
  flex:1 1 auto !important;
  min-width:0 !important;

  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  gap:10px !important;
}

/* name */
.ssx-leaderboard__name{
  display:inline-flex !important;
  align-items:center !important;

  color:#fff;
  font-weight:700;
  font-size:15px;
  text-decoration:none;

  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  min-width:0 !important;
}

/* meta must NOT go below */
.ssx-leaderboard__meta{
  display:inline-flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  gap:8px !important;

  white-space:nowrap !important;
  margin:0 !important;
  padding:0 !important;
  font-size:13px;
  opacity:0.75;
}

/* links in meta */
.ssx-leaderboard__metaLink{
  color:#39a0f9;
  text-decoration:none;
}

/* count pinned right */
.ssx-leaderboard__count{
  flex:0 0 auto !important;
  display:inline-flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  gap:6px !important;

  color:#fff;
  font-weight:800;
  font-size:14px;
  font-variant-numeric:tabular-nums;
  white-space:nowrap !important;
}

.ssx-leaderboard__play{
  color:#39a0f9;
  font-size:13px;
  line-height:1;
}

/* hover */
.ssx-leaderboard__row:hover{
  background:#151822;
  border-color:#2a2d30;
}

/* mobile */
@media (max-width:480px){
  .ssx-leaderboard__row{ padding:10px 12px; gap:12px; }
  .ssx-leaderboard__avatar{ width:32px !important; height:32px !important; flex-basis:32px !important; }
  .ssx-leaderboard__name{ font-size:14px; }
  .ssx-leaderboard__meta{ display:none !important; } /* optional: hide meta on tiny screens */
}

/* =========================================
   Inline single-field ACF / ACFE form
   Scope: .ssx-inline-submit
   OPTION B — NEVER STACK (Desktop + Mobile)
   ========================================= */

/* 1. Form layout — ALWAYS inline */
.ssx-inline-submit{
  display: flex;
  flex-wrap: nowrap;              /* 🔒 never allow wrapping */
  align-items: flex-end;
  gap: 0px;
  width: 100%;
}

/* 2. Fields container expands */
.ssx-inline-submit .acf-fields{
  flex: 1 1 auto;
  min-width: 0;                   /* 🔑 prevents mobile overflow wrap */
}

/* 3. Remove field spacing */
.ssx-inline-submit .acf-field{
  margin: 0;
}

/* 4. Submit wrapper — vertical position controlled HERE */
.ssx-inline-submit .acf-form-submit{
  flex: 0 0 44px;                 /* 🔒 fixed button width */
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;

  /* 👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇
     Here is the vertical line jsun — CHANGE THIS VALUE
     Increase px = move button DOWN
     Decrease px = move button UP
  */
  transform: translateY(-16px);
  /* 👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆 */
}

/* 5. Inputs */
.ssx-inline-submit input[type="text"],
.ssx-inline-submit input[type="email"],
.ssx-inline-submit input[type="search"],
.ssx-inline-submit input[type="url"],
.ssx-inline-submit input[type="number"],
.ssx-inline-submit textarea{
  height: 50px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.15);
  background: #0f1116;
  color: rgba(255,255,255,0.92);
  width: 100%;
  margin: 0;
  box-sizing: border-box;
}

/* 6. Square blue submit button */
.ssx-inline-submit .acf-form-submit input[type="submit"],
.ssx-inline-submit .acf-form-submit button[type="submit"]{
  width: 48px;
  height: 48px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 10px;
  background: #1075ce;
  color: #fff;
  font-size: 26px;
  line-height: 44px;
  cursor: pointer;
}

/* 7. Hover */
.ssx-inline-submit .acf-form-submit input[type="submit"]:hover,
.ssx-inline-submit .acf-form-submit button[type="submit"]:hover{
  filter: brightness(1.05);
  background: #0000FF;
}

/* 8. Mobile — SAME layout as desktop (no stacking ever) */
@media (max-width: 480px){
  .ssx-inline-submit{
    flex-wrap: nowrap;            /* 🔒 double lock */
    align-items: flex-end;
  }

  .ssx-inline-submit .acf-fields{
    flex: 1 1 auto;
    min-width: 0;
  }

  .ssx-inline-submit .acf-form-submit{
    flex: 0 0 44px;
  }
}
/* =========================================================
   SSX Genre Shuffle - FULL UPDATED CSS
   Fixes:
   - Mobile overflow (wraps select + button)
   - Keeps injected shuffle queue invisible BUT NOT display:none
     (so V7 can read the injected rows instead of falling back)
   ========================================================= */

.ssx-genre-shuffle{
  width:100%;
  max-width:100%;
  background:#0b0c0f;
  border:1px solid rgba(255,255,255,0.08);
  border-radius:18px;
  padding:18px;
  box-sizing:border-box;
  position:relative; /* ok to have, doesn't affect layout */
}

/* Top row layout */
.ssx-genre-shuffle__top{
  display:flex;
  align-items:stretch;
  gap:10px;
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  flex-wrap:wrap; /* key: prevents overflow on mobile */
}

/* Select */
.ssx-genre-shuffle__select{
  flex: 1 1 220px;
  height: 58px;
  border-radius: 14px;
  padding: 0 14px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.92);
  outline: none;

  min-width:0;     /* key: prevent flex overflow */
  width:100%;
  max-width:100%;
  box-sizing:border-box;
}

/* Button */
.ssx-genre-shuffle__btn{
  flex: 1 1 220px;
  height:58px;
  padding: 0 18px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(16,117,206,0.22);
  color: rgba(255,255,255,0.95);

  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  font-weight:900;
  cursor:pointer;
  white-space:nowrap;

  width:100%;
  max-width:100%;
  box-sizing:border-box;
}

.ssx-genre-shuffle__icon{
  font-size:22px;
}

/* =========================================================
   CRITICAL FIX:
   Do NOT use display:none on injected shuffle rows.
   V7 may ignore hidden elements and fall back to page playlist.
   Keep it invisible/off-screen but DOM-present.
   ========================================================= */
.ssx-genre-shuffle__hidden{
  position:absolute !important;
  left:-999999px !important;
  top:auto !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}

/* Optional: reduce any accidental spacing on injected rows */
.ssx-track-row--shufflehidden{
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
}

/* Safety: never exceed container width */
.ssx-genre-shuffle,
.ssx-genre-shuffle *{
  max-width:100%;
  box-sizing:border-box;
}

/* Optional: smaller padding on tight screens */
@media (max-width: 480px){
  .ssx-genre-shuffle{
    padding:14px;
  }
  .ssx-genre-shuffle__btn{
    padding:10px 12px;
  }
}/* ===============================
   SelfSound Reusable Section Style
   Usage: add class "ss-divs"
   =============================== */

.ss-divs{
  /* Base colors */
  --ss-bg-1: #0b0f14;
  --ss-bg-2: #0f1620;
  --ss-blue: #196db7;

  /* Text defaults */
  color: #f2f6ff;

  /* Background stack */
  background:
    radial-gradient(1100px 500px at 15% 0%, rgba(25,109,183,.30), transparent 55%),
    radial-gradient(900px 450px at 90% 10%, rgba(25,109,183,.18), transparent 60%),
    linear-gradient(180deg, var(--ss-bg-1), var(--ss-bg-2));

  /* Structure */
  border-radius: 18px;
  border: 1px solid rgba(25,109,183,.25);
  box-shadow: 0 18px 50px rgba(0,0,0,.55);

  /* Spacing defaults (safe for most layouts) */
  padding: clamp(20px, 3vw, 40px);

  /* Prevent layout issues in builders */
  position: relative;
  overflow: hidden;
}

/* Optional: softer inner content panels */
.ss-divs .ss-panel{
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  padding: 14px;
}

/* Optional: subtle top glow overlay */
.ss-divs::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: radial-gradient(900px 300px at 20% 0%, rgba(25,109,183,.22), transparent 60%);
  pointer-events:none;
}
/* Hide Pagination */
.oxy-pagination,
.pagination,
.page-numbers,
.nav-links,
.navigation,
.wp-pagenavi,
a[rel="next"],
a[rel="prev"]{
  display: none !important;
}

/* Re-enable pagination ONLY inside repeaters that have this class */
.post-pages .oxy-pagination,
.post-pages .pagination,
.post-pages .page-numbers,
.post-pages .nav-links,
.post-pages .wp-pagenavi{
  display: block !important;
}

.post-pages a[rel="next"],
.post-pages a[rel="prev"],
.post-pages .page-numbers a{
  display: inline-block !important;
}


/* Pagination Container */
.post-pages .page-numbers {
  display: flex;
  gap: 8px;
  margin-top: 20px;
  flex-wrap: wrap;
}




/* Style pagination buttons */
.post-pages .page-numbers a,
.post-pages .page-numbers span {
  padding: 8px 14px;
  background: #196db7;
  color: #ffffff !important;
  border: 1px solid #196db7;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none !important;
  line-height: 1.2;
  transition: background 0.2s ease, transform 0.1s ease;
}

/* Hover */
.post-pages .page-numbers a:hover {
  background: #145a97;
  border-color: #145a97;
  transform: translateY(-1px);
}

/* Current page */
.post-pages .page-numbers .current {
  background: #ffffff;
  color: #196db7 !important;
  border: 1px solid #196db7;
  cursor: default;
}

/* Remove weird theme spacing if it exists */
.post-pages .page-numbers li,
.post-pages .page-numbers ul {
  list-style: none;
  margin: 0;
  padding: 0;
}



/* =========================
   PAGINATION STYLE (WP/Oxygen)
   Targets a.page-numbers + span.page-numbers
   Only inside .post-pages
========================= */

/* Layout the pagination row */
.post-pages .nav-links,
.post-pages .oxy-pagination,
.post-pages .pagination,
.post-pages .wp-pagenavi{
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  margin-top: 18px !important;
}

/* The actual buttons (WP outputs these) */
.post-pages a.page-numbers,
.post-pages span.page-numbers{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 8px 14px !important;
  border-radius: 7px !important;

  background: #196db7 !important;
  border: 1px solid #196db7 !important;
  color: #ffffff !important;

  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1 !important;

  text-decoration: none !important;
  box-shadow: none !important;
  float: none !important;
}

/* Hover */
.post-pages a.page-numbers:hover{
  background: #145a97 !important;
  border-color: #145a97 !important;
}

/* Current page (WP uses span.page-numbers.current) */
.post-pages span.page-numbers.current{
  background: #ffffff !important;
  color: #196db7 !important;
  border-color: #196db7 !important;
  cursor: default !important;
}

/* Optional: make Prev/Next a touch wider */
.post-pages a.prev.page-numbers,
.post-pages a.next.page-numbers{
  padding: 8px 16px !important;
}

/* Add proper spacing between pagination buttons */
.post-pages .nav-links,
.post-pages .oxy-pagination,
.post-pages .pagination,
.post-pages .wp-pagenavi{
  gap: 10px !important;   /* space between buttons */
}

/* Safety: if theme is forcing inline spacing weirdly */
.post-pages a.page-numbers,
.post-pages span.page-numbers{
  margin: 0 4px !important;
}



.ssx-msg{
  padding:12px 14px;
  border-radius:10px;
  font-weight:700;
  margin:12px 0;
}
.ssx-msg--success{
  background:rgba(16,117,206,.15);
  border:1px solid rgba(16,117,206,.35);
  color:#eaf4ff;
}
.ssx-msg--error{
  background:rgba(220,60,60,.12);
  border:1px solid rgba(220,60,60,.35);
  color:#ffecec;
}
/* ===============================
   SelfSound Funnel Blocks
   Clean Compact Version
================================= */

/* SECTION WRAPPER */
.ss-funnel-wrap{
  width:100%;
  background:#0f1116;
  border:1px solid #1c1f26;
  border-radius:10px;
  padding:20px;
  margin:10px 0; /* 10px vertical gap */
  color:#fff;
  box-sizing:border-box;
}

/* SECTION TITLE */
.ss-funnel-title{
  margin:0 0 18px;
  font-size:20px;
  color:#1075ce;
  line-height:1.3;
}

/* EACH ROW */
.ss-funnel-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:#161a22;
  padding:14px 16px;
  border-radius:8px;
  margin-bottom:10px;
  border:1px solid #222733;
  gap:12px;
  flex-wrap:wrap;
  box-sizing:border-box;
}

.ss-funnel-item:last-child{
  margin-bottom:0;
}

/* LEFT SIDE INFO */
.ss-funnel-info{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:200px;
}

.ss-funnel-url{
  font-size:13px;
  color:#9aa3b2;
  word-break:break-all;
}

/* ACTION BUTTONS */
.ss-funnel-actions{
  display:flex;
  gap:8px;
  align-items:center;
  margin-left:auto;
}

.ss-btn{
  border:none;
  border-radius:6px;
  padding:8px 14px;
  cursor:pointer;
  font-weight:600;
  font-size:14px;
  transition:.2s ease;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  line-height:1;
  white-space:nowrap;
}

.ss-copy-btn{
  background:#1075ce;
  color:#fff;
}

.ss-copy-btn:hover{
  background:#0d63ad;
}

.ss-copy-btn.is-copied{
  background:#28a745;
}

.ss-visit-btn{
  background:transparent;
  color:#fff;
  border:1px solid #2b3240;
}

.ss-visit-btn:hover{
  border-color:#1075ce;
  color:#1075ce;
}

/* ===============================
   MOBILE OPTIMIZATION
================================= */

@media (max-width:768px){

  .ss-funnel-wrap{
    padding:15px;
  }

  .ss-funnel-item{
    padding:12px;
  }

  .ss-funnel-title{
    font-size:18px;
  }

  .ss-funnel-item{
    flex-direction:column;
    align-items:flex-start;
  }

  .ss-funnel-actions{
    width:100%;
    margin-left:0;
  }

  .ss-btn{
    width:100%;
  }

}