@font-face {
    font-family: 'ChunkFiveRoman';
    src: url('fonts/chunkfive_roman_regular.eot');
    src: url('fonts/chunkfive_roman_regular.eot') format('embedded-opentype'),
         url('fonts/chunkfive_roman_regular.woff') format('woff'),
         url('fonts/chunkfive_roman_regular.ttf') format('truetype'),
         url('fonts/chunkfive_roman_regular.svg#ChunkFiveRoman') format('svg');
}
body{
	font-family: 'Poppins', sans-serif;
	font-weight: 400;
	background:#dadfeb;
}
/*****************/
.headerContainer{
	width: 100%;
	height: 76px;
	background: #020f2a;
	border-bottom: 1px solid #1c486c;
}
.headerInner{
	width: 1280px;
	height: 76px;
	margin: 0 auto;
}
#logo{
    float:left;
    height:63px;
    max-width:240px;
    width:100%;
    margin-top:12px;
    margin-right:20px;
}
.mainNavRight{
    float:right;
    
}
.navbar{
  margin: 0;
  border: 0;
}
.navbar .nav{
  margin: 0;
}
.mainNavRight .navbar-inner{
  background: none;
  border: none;
  padding: 0;
  filter: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}
.mainNavRight .nav > li {
  text-align: center;
  float: left;
  margin-left: 2px;
}
.mainNavRight .nav > li  > a{
  font-size: 15px;
  color: #ffffff;
  padding: 10px 12px;
  font-weight: normal;
  font-family: 'Poppins', sans-serif !important;
  margin-top: 15px;
}
.mainNavRight .nav > li  > a.login i{
	background: url(images/iconlogin.png) transparent no-repeat center;
	float: left;
	width: 20px;
	height: 18px; 
	display: inline-block;
	margin-right: 5px;
}
.mainNavRight .nav > li  > a.signup i{
	background: url(images/iconregister.png) transparent no-repeat center;
	float: left;
	width: 18px;
	height: 16px;
	display: inline-block;
	margin-right: 2px;
}
.mainNavRight .nav > li  > a.loginac i{
	background: url(images/iconhdac.png) transparent no-repeat center;
	float: left;
	width: 20px;
	height: 18px; 
	display: inline-block;
	margin-right: 5px;
}
.mainNavRight .nav > li  > a.signupac i{
	background: url(images/iconhdac1.png) transparent no-repeat center;
	float: left;
	width: 21px;
	height: 24px;
	display: inline-block;
	margin-right: 2px;
	margin-top: -2px;
}
.mainNavRight .nav > li  > a.login{
  border-radius: 3px;
  color: #ffffff;
  background: #ed4c17;
  border-bottom: 4px solid #ca390a;
  float: right;
      margin-left: 9px;
}
.mainNavRight .nav > li  > a.loginac{
	border-radius: 3px;
	color: #ffffff;
	background: #ed4c17;
	border-bottom: 4px solid #ca390a;
	float: right;
	margin-left: 0px;
	padding-right: 5px;
}
.mainNavRight .nav > li  > a.signup{
  border-radius: 3px;
  color: #ffffff;
  background: #4e83af;
  border-bottom: 4px solid #39638d;
  float: right;
      margin-left: 7px;
}
.mainNavRight .nav > li  > a.signupac{
  border-radius: 3px;
  color: #ffffff;
  background: #4e83af;
  border-bottom: 4px solid #39638d;
  float: right;
  padding-left: 5px;
    padding-right: 5px;
    margin-left: 5px;
}
.mainNavRight .nav > li  > a:hover,
.mainNavRight .nav > li > a:focus{
  color: #ffba00;
  background-color: transparent;
}
.mainNavRight .nav > li  > a.login:focus,
.mainNavRight .nav > li  > a.login:hover{
  background-color: #ea3f07;
  color: white;
}
.mainNavRight .nav > li  > a.loginac:focus,
.mainNavRight .nav > li  > a.loginac:hover{
  background-color: #ea3f07;
  color: white;
}
.mainNavRight .nav > li  > a.signup:focus,
.mainNavRight .nav > li  > a.signup:hover{
  background-color: #3692CF;
  color: white;
}
.mainNavRight .nav > li  > a.signupac:focus,
.mainNavRight .nav > li  > a.signupac:hover{
  background-color: #3692CF;
  color: white;
}

.dropdown-menu{
 background: #4E83AF;
border: 0px;
}
.dropdown-menu > li{
  text-align: left;
}
.dropdown-menu > li a{
  color: #ffffff;
  text-transform: none;
  font-family: 'ChunkFiveRoman';
}
.dropdown-menu > li a:hover{
  color: #FFFFFF;
  background: #0071bc;
}

.nav .open>a, .nav .open>a:hover, .nav .open>a:focus{
  background: transparent;
}






/*********Warrper**********/
.Warrper{
	width: 100%;
	height: 703px;
	background: url(images/bgbanner.png) transparent;
}
.bannerContainer{
	width: 100%;
	height: 703px;
	background: url(images/imgbanner.png) transparent no-repeat center top;
}
.bannerInner{
	width: 1000px;
	margin: 0 auto;
}
.bannerText{
	width: 500px;
}
.bannerText h3{
	color: #ffffff;
	font-family: 'ChunkFiveRoman';
	font-size: 60px;
	margin: 0px 0 20px;
	line-height: 80px;
	padding-top: 70px;
}
.bannerText h3 span{
	color: #4e83af;
}
.bannerText p{
	color: #ffffff;
	font-size: 30px;
	font-family: 'Source Sans Pro', sans-serif;
	font-weight: 300;
	margin: 0;
}
.bannerText p span{
	font-family: 'Source Sans Pro', sans-serif;
	font-weight: 600;
}
.bannerText a{
	width: 264px;
	height: 70px;
	line-height: 70px;
	font-family: 'ChunkFiveRoman';
	font-size: 30px;
	background: #ed4c17;
	color: #ffffff;
	text-align: center;
	text-decoration: none;
	border-bottom: 4px solid #ca390a;
	display: inline-block;
	border-radius: 3px;
	margin-top: 35px;
}
.bannerText a:hover{
	background: #da3c08;
}
/***********statisticContainer************/
.statisticContainer{
	width: 100%;
	margin-top: -104px;
}
.statisticInner{
	width: 1000px;
	margin: 0 auto;
}
.statisticInner .statistic{
	width: 757px;
}
.statisticPart{
	float: left;
	width: 33.333%;
}
.statisticPart h3{
	width: 140px;
	float: left;
	font-size: 30px;
	color: #ed4c17;
	font-family: 'ChunkFiveRoman';
	margin-bottom: 0;
}
.statisticPart p{
	float: left;
	font-size: 18px;
	color: #ffffff;
	font-family: 'Source Sans Pro', sans-serif;
	font-weight: 400;
}
.statisticPart i{
	width: 85px;
	height: 81px;
	border-radius: 3px;
	display: inline-block;
	float: left;
	margin-top: 9px;
	margin-right: 10px;
	margin-left: -10px;
}
.statisticPart1 i{
	background: url(images/iconstt1.png) #152d4e no-repeat center;
}
.statisticPart2 i{
	background: url(images/iconstt2.png) #152d4e no-repeat center;
}
.statisticPart3 i{
	background: url(images/iconstt3.png) #152d4e no-repeat center;
}
/******contentTopContainer******/
.contentTopContainer{
	width: 100%;
	overflow: hidden;
	background: #ebe2ca;
}
.contentTopInner{
	width: 1000px;
	height: 625px;
	margin: 0 auto;
	text-align: center;
	position: relative;
}
.contentTopInner h3{
	font-size: 48px;
	color: #575d65;
	font-family: 'ChunkFiveRoman';
	margin: 60px 0 50px;
}
.slider1 {
}
.slider {
	height: 555px;
	clear: both;
}

.contentTop {
	text-align: center;
}

.slider a:hover {
	background: #c4f634;
}
#clearBoth {
	clear: both;
}
.bx-prev {
	position: absolute;
	top: 53%;
	font-size: 0.1px;
	left: -80px;
	background: url(images/pewslide.png) transparent no-repeat;
    height: 63px;
    width: 36px;
    margin-top: -32px;
}
.bx-next {
	position: absolute;
	top: 53%;
	font-size: 0.1px;
	right: -75px;
	background: url(images/nextslide.png) transparent no-repeat;
	width: 36px;
    height: 63px;
    margin-top: -32px;
	z-index: 999;
}
.sliderItem  {
	margin-left: -42px;
}
.bxslider {
	margin: 0;
}
.slider2 a {
	margin-top: 58px;
}
.bx-pager-item a{
	display: none;
}
.contentTop{
	width: 100%;
	overflow: hidden;
	text-align: center;
}
.contentTopPart{
	width: 221px;
	height: 219px;
	font-size: 18px;
	color: #4f5256;
	font-family: 'ChunkFiveRoman';
	padding-top: 159px;
	border: 1px solid #ccc4af;
	min-height: 220px;
	border-radius: 3px;
	margin: 0 14px;
	margin-bottom: 20px;
	box-shadow: 0px 0px 2px 2px #e5ddc5;
	float: left;
}
.contentTopPart1{
	background: url(images/slide2icon1.png) #ffffff no-repeat center 15px;
}
.contentTopPart2{
	background: url(images/slide2icon2.png) #ffffff no-repeat center 15px;
}
.contentTopPart3{
	background: url(images/slide2icon3.png) #ffffff no-repeat center 15px;
}
.contentTopPart4{
	background: url(images/slide2icon4.png) #ffffff no-repeat center 15px;
}
.contentTopPart5{
	background: url(images/slide2icon5.png) #ffffff no-repeat center 15px;
}
.contentTopPart6{
	background: url(images/slide2icon6.png) #ffffff no-repeat center 15px;
}
.contentTopPart7{
	background: url(images/slide2icon7.png) #ffffff no-repeat center 15px;
}
.contentTopPart8{
	background: url(images/slide2icon8.png) #ffffff no-repeat center 15px;
}
.contentTopPart9{
	background: url(images/slide1icon1.png) #ffffff no-repeat center 15px;
}
.contentTopPart10{
	background: url(images/slide1icon2.png) #ffffff no-repeat center 15px;
}
.contentTopPart11{
	background: url(images/slide1icon3.png) #ffffff no-repeat center 15px;
}
.contentTopPart12{
	background: url(images/slide1icon4.png) #ffffff no-repeat center 15px;
}
.contentTopPart13{
	background: url(images/slide1icon5.png) #ffffff no-repeat center 15px;
}
.contentTopPart14{
	background: url(images/slide1icon6.png) #ffffff no-repeat center 15px;
}
.contentTopPart15{
	background: url(images/slide1icon7.png) #ffffff no-repeat center 15px;
}
.contentTopPart16{
	background: url(images/slide1icon8.png) #ffffff no-repeat center 15px;
}
/********contentBotContainer*********/
.contentBotContainer{
	width: 100%;
	background: url(images/bgcontent.png) transparent no-repeat center;
	background-size: cover;
	height: 460px;
}
.contentBotInner{
	width: 1000px;
	margin: 0 auto;
	text-align: center;
}
.contentBotInner h3{
	color: #ebe2ca;
	font-family: 'ChunkFiveRoman';
	font-size: 48px;
	margin: 0;
	padding: 50px 0;
}
.contentBotleft{
	background: url(images/imgadvhp.png) transparent no-repeat center;
	width: 241px;
	height: 241px;
	float: left;
}
.contentBotRight{
	float: right;
	width: 720px;
	overflow: hidden;
}
.contentBotRightPart{
	width: 33.3333%;
	float: left;
	padding-left: 35px;
	margin-top: 30px;
}
.contentBotRightPart h4{
	color: #2994c2;
	font-size: 22px;
	text-align: left;
	margin: 0;
}
.contentBotRightPart p{
	color: #ffffff;
	font-size: 14px;
	text-align: left;
}
.contentBotRightPart1{
	background: url(images/iconadvhp1.png) transparent no-repeat left top;
	padding-left: 30px;
}
.contentBotRightPart2{
	background: url(images/iconadvhp2.png) transparent no-repeat left top;
}
.contentBotRightPart3{
	background: url(images/iconadvhp3.png) transparent no-repeat left top;
}
.contentBotRightPart4{
	background: url(images/iconadvhp4.png) transparent no-repeat left top;
}
.contentBotRightPart5{
	background: url(images/iconadvhp5.png) transparent no-repeat left top;
}
.contentBotRightPart6{
	background: url(images/iconadvhp6.png) transparent no-repeat left top;
}
/***********advertiseContainer************/
.advertiseContainer{
	width: 100%;
	background: #ffffff;
	display: none;
}
.advertiseInner{
	width: 1000px;
	margin: 0 auto;
	overflow:hidden;
	padding-top: 20px;
	padding-bottom: 20px;
}
.advertiseInner div {
	width: 100%;
}


.advertiseInner div  a {color:#ED4C17;}
.advertiseInner  div.ads{
	float: left;
	width: 470px;
	text-align: center;
}

.advertiseInner  div.ads img {margin-bottom: 10px;}

.advertiseInner  div.add{
	float: right;
}

.advertiseInner  div.featured {
	float: left;
	width: 255px;
	margin-right:10px;

}

.advertiseInner  div.featured2 {
	float: left;
	margin-right:0px;
	margin-left: 10px;

}

.advertiseInner .title {
	background: #336b9a;
	color: #fff;
	padding: 0px 10px;
	margin-bottom: 0px;
	cursor: pointer;
	font-size:18px;
	height: 38px;
	font-family: 'ChunkFiveRoman';
	line-height: 32px;
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
	text-align: center;
}

.advertiseInner .fcontent {
	background: #ffffff;
	padding: 10px;
	border: 3px solid #39638D;
}

.advertiseInner .fcontent  ul {padding-left: 0px; list-style: none;}

.advertiseInner .fcontent span {display: none;}

/***************/
.paymentContainer{
	width: 100%;
	height: 86px;
	background: #ebe2ca;
}
.paymentInner{
	width: 1000px;
	height: 86px;
	margin: 0 auto;
	text-align: center;
}
.paymentInner a{
	display: inline-block;
	height: 40px;
	background: url(images/solid.png) transparent no-repeat;
	margin-right: 35px;
	margin-top: 25px;
}
.paymentInner a.payz{
	width: 140px ;
	background-position: 0 0;
}
.paymentInner a.payp{
	width:108px ;
	background-position: -182px 0;
}
.paymentInner a.per{
	width:193px ;
	background-position: -323px 0;
}
.paymentInner a.paye{
	width:125px ;
	background-position: -550px 0;
}
.paymentInner a.solid{
	width:190px; ;
	background-position: -703px 0;
	margin-right: 0;
}
/********footerContainer***********/
.footerContainer{
	width: 100%;
	height: 89px;
	background: #263b59;
}
.footerInner{
	width: 1000px;
	height: 89px;
	margin: 0 auto;
}
.footerLeft{
	width: 500px;
	float: left;
}
.footerLeft p{
	font-family: 'Source Sans Pro', sans-serif;
	font-weight: 400;
	font-size: 14px;
	color: #ffffff;
	line-height: 89px;
}
.footerLeft p a{
	color: #ffffff;
}
.footerRight{
	width: 500px;
	float: right;
}
.footerRight a{
	font-family: 'Source Sans Pro', sans-serif;
	font-weight: 400;
	font-size: 14px;
	color: #ffffff;
	line-height: 89px;
	margin-left: 22px;
}
@media (max-width: 1000px){
  .headerContainer, .Warrper, .bannerContainer, .statisticContainer, .contentTopContainer, .contentBotContainer,.advertiseContainer, .footerContainer{
  width: 1000px !important;
 }
 .headerInner, .bannerInner, .contentInner, .statisticInner, .contentTopInner, .contentBotInner, .advertiseInner, .footerInner{
   margin: 0 !important;
 } 
}

/*Subpage*/
.sub-page-background{
	width: 100%;
	overflow: hidden;
	background: #e4e7ed;
	 
    top:0;
    left:0;
    width:100%;
    height:100%;
    
    z-index:-1;

    background-image:
        radial-gradient(
            rgba(30,90,200,.08) 1px,
            transparent 1px
        );

    background-size:24px 24px;
}
.sub-page-backgroundInner{
    width: 1600px;
    max-width: 95%;
    margin: 0 auto;
    padding: 25px 0;
}
.sub-page-Inner{
	width: 1000px;
	margin: 0px auto;
	padding: 2px;
}
.site_title{
background: #4e83af;
height: 68px;
line-height: 68px;
color:#ffffff;
text-align: left;
font-size: 30px;
font-family: 'ChunkFiveRoman';
padding-left: 20px;
border-bottom: 4px solid #39638d;
}

/**Login**/
#loginform{
}
.loginTop{
	background: url(images/bglogin.png) #122746 no-repeat center bottom;
	padding: 60px 60px;
	overflow: hidden;
	border-top-right-radius: 3px;
	border-top-left-radius: 3px;
	color:white;
}

.bg-register{
	background: url(images/bg-register.png) #122746 no-repeat center bottom;
	padding: 40px 60px 30px;
}

#loginform .loginTop input[type="text"], #loginform .loginTop input[type="password"]{
	width: 100%;
	height: 50px;
	font-size: 24px;
	color: #413d3a;
	border-radius: 3px;
	background: #edecea;
	font-family: 'ChunkFiveRoman';
	margin-bottom: 20px;
}
#loginform .loginTop .captchainput{
	width: 100%;
	height: 50px;
	border-radius: 3px;
	background: #edecea;
	padding: 5px;
	margin-bottom: 20px;
}
#loginform .loginTop .captchainput div{
	padding: 0 !important;
}
#loginform .loginTop .captchainput input{
	width: 119px;
	height: 40px;
	font-size: 24px;
	color: #413d3a;
	background: #edecea;
	border: 0;
	font-family: 'ChunkFiveRoman';
	float: left;
}
#loginform .loginTop .captchainput img{
	float: right;
}

#registerform .loginTop input[type="submit"],
#loginform .loginTop input[type="submit"]{
	width: 141px;
	height: 52px;
	color: #ffffff;
	background: #ed4c17;
	font-size: 24px;
	font-family: 'ChunkFiveRoman';
	float: left;
	border-bottom: 3px solid #ca390a;
	margin-bottom: 0;
}
#registerform .loginTop input[type="submit"]:hover,
#loginform .loginTop input[type="submit"]:hover{
	background: #e33e08;
}
.loginBot{
	width: 100%;
	background: url(images/bgftlogin.png) transparent repeat left;
	height: 74px;
	text-align: center;
	border-bottom-left-radius: 3px;
	border-bottom-right-radius: 3px; 
}
.loginBot a{
	font-family: 'Source Sans Pro', sans-serif;
	font-weight: 400;
	font-size: 18px;
	line-height: 74px;
	color: #ffffff;
}
/*register*/

#registerform .loginTop .captchainput{
	width: 100%;
	height: 50px;
	border-radius: 3px;
	background: #edecea;
	padding: 5px;
	margin-bottom: 20px;
}

#registerform .loginTop .captchainput img{
	float: right;
}
#registerform .loginTop .captchainput div{
	padding: 0 !important;
}
#registerform .loginTop input[type="text"], #registerform .loginTop input[type="password"]{
	width: 100%;
	height: 50px;
	font-size: 24px;
	color: #413d3a;
	border-radius: 3px;
	background: #edecea;
	font-family: 'ChunkFiveRoman';
	margin-bottom: 20px;
}
#registerform .loginTop  .captchainput input{
	width: 119px;
	height: 40px;
	font-size: 24px;
	color: #413d3a;
	background: #edecea;
	border: 0;
	font-family: 'ChunkFiveRoman';
	float: left;
}
.loginBot p{
	font-family: 'Source Sans Pro', sans-serif;
	font-weight: 400;
	font-size: 18px;
	line-height: 74px;
	color: #ffffff;
}
/*ads*/
#fixedads_title{
	font-size: 24px;
	color: #4e83af;
	font-family: 'ChunkFiveRoman';
}
/*account*/
.member_sidebar li ul li:last-child{
	border-bottom: 0;
}
.accountRight{
	background: #ffffff;
	overflow: hidden;
	padding: 19px;
	border:4px solid #39638D;
}
.accountRight .widget-content{
	border: 0;
	margin-bottom: 0;
	padding: 0;
}
.calendar{
	width: 291px;
	height: 108px;
	background: url(images/imgacca.png) #336b9a no-repeat 10px center;
	color: #ffffff;
	font-size: 22px;
	font-family: 'ChunkFiveRoman';
    padding-left: 77px;
    border-radius: 3px;
    padding-top: 23px;
}
.calendar p{
	font-size: 30px;
}
.buttonAcc{
	display: inline-block;
    margin-top: -98px;
    margin-left: 196px;
}
.buttonAcc a{
	width: 121px;
	height: 40px;
	display: inline-block;
	border-radius: 3px;
	line-height: 40px;
	text-align: center;
	color: #ffffff;
	text-decoration: none;
	font-family: 'ChunkFiveRoman';
	font-size: 18px;
	margin-left: 10px;
}
.buttonAcc a.btnUp{
	background: #ed4c17;
	border-bottom: 4px solid #ca390a
}
.buttonAcc a.btnAdd{
	background: #4e83af;
	border-bottom: 4px solid #39638d;
}
.buttonAcc a:hover{
	opacity: 0.8;
}
.dashboardboxAC{
	width: 520px;
    display: inline-block;
    margin-top: -46px;
    margin-left: 207px;
    background: #dbebf8;
    border: 1px solid #4e83af;
    text-align: center;
    padding: 0;
    height: 38px;
    line-height: 38px;
    color: #4e83af;
    font-size: 14px;
	font-family: 'Source Sans Pro', sans-serif;
	font-weight: 600;
}
#tabs.tabsSummary{
	border: 0;
	border-radius: 0;
	padding: 0;
	background: #edecea;
	overflow: hidden;
	width: 725px;
}

.ui-tabs .ui-tabs-panel {padding: 10px!important;}
#tabs.tabsSummary ul,.ui-tabs-nav{
	border: 0;
	border-radius: 0;
	padding: 0;
}
#tabs.tabsSummary ul li,.ui-tabs-nav li{
	border: 0;
	border-radius: 0;
	padding: 0;
	margin: 0;
	height: 62px;
	background: #f7f6f5;
	border: 1px solid #c0bdb7;
}
#tabs.tabsSummary ul li a{
	border: 0;
	border-radius: 0;
	padding: 0;
	margin: 0;
	line-height: 62px;
	padding: 0 52px;
	font-family: 'ChunkFiveRoman';
	font-size: 24px;
	text-align: center;
	color: #4e83af;
}
.ui-tabs-nav li a{
	border: 0;
	border-radius: 0;
	padding: 0;
	margin: 0;
	padding: 0 15px;
	line-height: 46px;
	font-family: 'ChunkFiveRoman';
	font-size: 16px;
	text-align: center;
	color: #4e83af;
}
#tabs.tabsSummary ul li.ui-state-default.ui-corner-top.ui-tabs-active.ui-state-active,
.ui-tabs-nav li.ui-tabs-active{
	background: #ed4c17;
	border: 1px solid #D63C09;
}
#tabs.tabsSummary ul li.ui-state-default.ui-corner-top.ui-tabs-active.ui-state-active a,
.ui-tabs-nav li.ui-tabs-active a{
	color: #ffffff;
}
#tabs.tabsSummary .table_account{
	overflow: hidden;
	background: #edecea;
	padding: 20px 11px;
}
.table_accountPart{
	width: 345px;
	float: left;
}
.table_accountPart2,
.table_accountPart3{
	float: right;
}
.widget-title.Wtitle_tab{
	width: 100%;
	height: 31px;
	line-height: 31px;
	background: #4e83af;
	border-bottom: 4px solid #2b699c;
	color: #ffffff;
	padding: 0 10px;
}

#settingsform .widget-title{
	color: #333;
}
.tabsSummary .table_account .table_accountPart table{
	background: #ffffff;
	border: 1px solid #d4d2ca;
	margin: 5px 0;
}
.tabsSummary .table_account .table_accountPart table tbody tr{
	line-height: 30px;
	border-bottom: 1px solid #d4d2ca;
}
.tabsSummary .table_account .table_accountPart table tbody tr td{
	padding: 0 10px;
}
.tabsSummary .table_account .table_accountPart table tbody tr td:last-child{
	text-align: right;
}
.li.ui-state-default.ui-corner-top.ui-tabs-active.ui-state-active{
	background: #ed4c17;
	border: 1px solid #ee5a29;
}
.site_content .ui-tabs .ui-tabs-nav li.ui-tabs-active, .site_content .ui-tabs .ui-tabs-nav li{}
/*forum*/
.site_content_forum,
.site_content_ads{
	padding-top: 15px;
}
.site_content_forum .advertiseInner,
.site_content_acc .advertiseInner,
.site_content_ads .advertiseInner{
	width: 100%;
}

table td {padding: 3px;}

/* ===== LyonClickAds Header Buttons Fix ===== */

.modern-nav .modern-login,
.modern-nav .modern-signup {
    display: inline-block !important;
    padding: 10px 20px !important;
    border-radius: 8px !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    line-height: normal !important;
    margin-left: 5px !important;
}

/* Log In */
.modern-nav .modern-login {
    background: transparent !important;
    border: 2px solid #2F80ED !important;
    color: #2F80ED !important;
}

.modern-nav .modern-login:hover {
    background: #2F80ED !important;
    color: #FFFFFF !important;
}

/* Sign Up */
.modern-nav .modern-signup {
    background: #2F80ED !important;
    border: 2px solid #2F80ED !important;
    color: #FFFFFF !important;
}

.modern-nav .modern-signup:hover {
    background: #1D6FE0 !important;
    border-color: #1D6FE0 !important;
    color: #FFFFFF !important;
}

/* Language */
.modern-nav .language-selector a {
    color: #666 !important;
    font-weight: 500 !important;
}

/* Dropdown */
.modern-nav .dropdown-menu {
    border-radius: 8px;
    overflow: hidden;
}

/* ===== Header Alignment Fix ===== */

.headerContainer {
    min-height: 100px;
}

.navbar-inner {
    display: flex;
    align-items: center;
    min-height: 90px;
}

.modern-nav {
    display: flex;
    align-items: center;
    min-height: 90px;
}

.modern-nav li {
    display: flex;
    align-items: center;
}

#logo img {
    max-height: 88px;
    width: auto;
}
.modernStatsTop{
    max-width: 1400px;
    margin: -35px auto 30px auto;
    background: linear-gradient(135deg,#2563eb,#1d4ed8);
    border-radius: 18px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.18);
    padding: 25px 35px;
    position: relative;
    z-index: 99;
    margin-top: 15px;
}

.modernStatsTopInner{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.modernTopItem{
    display:flex;
    align-items:center;
    gap:15px;
    color:#fff;
}

.modernTopItem h3{
    margin:0;
    font-size:28px;
    font-weight:700;
    color:#fff;
}

.modernTopItem span{
    display:block;
    font-size:14px;
    color:rgba(255,255,255,0.85);
}

.modernTopIcon{
    width:60px;
    height:60px;
    border-radius:15px;
    background:rgba(255,255,255,0.15);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:28px;
}

.modernTopDivider{
    width:1px;
    height:60px;
    background:rgba(255,255,255,0.25);
}

/* ==========================================================================
   DISEÑO CORPORATIVO FINAL - ANCHO PANORÁMICO EXTREMO (MÁXIMO AJUSTE)
   ========================================================================== */

/* Expandimos el contenedor al ancho panorámico máximo alineado a la perfección */
.lyon-wrapper-principal {
    display: flex !important;
    flex-direction: row !important; /* Estructura horizontal lado a lado estricta */
    justify-content: space-between !important;
    max-width: 1440px !important; /* Aumentado al máximo absoluto para lograr el ancho ideal */
    width: 100% !important;
    margin: 40px auto 40px auto !important; /* Centrado perfecto en la pantalla */
    padding: 0 15px !important;
    box-sizing: border-box !important;
    gap: 35px !important; /* Separación premium de seguridad entre ambas tarjetas */
}

/* Tarjetas blancas empresariales extendidas en formato panorámico */
.lyon-tarjeta {
    border-radius: 16px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03) !important;
    display: flex !important;
    flex-direction: row !important; /* Mantiene imagen y texto en la misma línea horizontal */
    align-items: center !important;
    padding: 15px 10px !important; /* Espaciado interno amplio y elegante */
    flex: 1 !important; /* Divide el espacio en partes exactamente iguales */
    border: 1px solid #edf2f7 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    background: linear-gradient(135deg, #e0f2fe 0%, #ffffff 100%) !important;
}

/* Espacio ultra optimizado para las imágenes (Por defecto al 25% para el león) */
.lyon-bloque-imagen {
    flex: 0 0 25% !important; 
    max-width: 25% !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

/* FORZADO EXTREMO: Achica el contenedor de la diana y lo empuja con fuerza al centro */
.tarjeta-anunciantes .lyon-bloque-imagen {
    flex: 0 0 25% !important;
    max-width: 25% !important;
    margin-right: 40px !important; /* Fuerza una separación del borde derecho del recuadro blanco */
    margin-left: -20px !important; /* Desplaza la diana hacia la izquierda para que entre */
    display: block !important;
}

/* Reducción estricta del tamaño de la diana para que quepa entera sin cortarse */
.tarjeta-anunciantes .lyon-img-responsive {
    max-width: 90% !important; /* La encogemos un 10% para que quepa en el espacio blanco */
    max-height: 210px !important; /* Bajamos la altura para forzar al contenedor a mostrarla completa */
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
}

.lyon-img-responsive {
    width: 100% !important;
    max-height: 250px !important; /* Mantiene los vectores grandes, limpios y claros */
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
}

/* Espacio maximizado al 75% para que las letras se expandan horizontalmente con total libertad */
.lyon-bloque-texto {
    flex: 0 0 75% !important; 
    max-width: 75% !important;
    padding-left: 170px !important; /* Separación perfecta para que el texto respire al lado del león */
    padding-right: 5px !important;
    text-align: left !important;
    box-sizing: border-box !important;
}

/* Ajuste inverso para la tarjeta de anunciantes */
.tarjeta-anunciantes .lyon-bloque-texto {
    flex: 0 0 75% !important;
    max-width: 75% !important;
    padding-left: 5px !important;
    padding-right: 200px !important;
}

/* Subtítulos de Categoría (FOR MEMBERS / FOR ADVERTISERS) */
.lyon-categoria {
    font-size: 15px !important;
    font-weight: 800 !important;
    letter-spacing: 1px !important;
    display: block !important;
    margin-bottom: 6px !important;
    text-transform: uppercase !important;
}
.cat-azul { color: #2563eb !important; }
.cat-verde { color: #16a34a !important; }

/* Títulos Principales de las Cajas */
.lyon-titulo-seccion {
    font-size: 26px !important; 
    color: #0f172a !important;
    margin: 0 0 10px 0 !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
}

.lyon-extracto {
    color: #555556 !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
    margin-bottom: 15px !important;
    font-weight: 500;
}

/* Listados con Viñetas de Check Azul y Verde */
.lyon-lista-checks {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 20px 0 !important;
}

.lyon-lista-checks li {
    font-size: 13.5px !important;
    color: #334155 !important;
    margin-bottom: 8px !important;
    display: flex !important;
    align-items: center !important;
    font-weight: 600 !important;
}

/* Círculos con el símbolo de verificación ✓ */
.chk-circulo {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 16px !important;
    height: 16px !important;
    border-radius: 50% !important;
    font-size: 9px !important;
    color: #ffffff !important;
    margin-right: 10px !important;
    font-weight: bold !important;
}
.chk-azul { background-color: #2563eb !important; }
.chk-verde { background-color: #16a34a !important; }

/* Botones de Acción Estilizados */
.lyon-boton {
    display: inline-block !important;
    width: auto !important; 
    padding: 11px 26px !important;
    border-radius: 6px !important;
    color: #ffffff !important;
    text-decoration: none !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-align: center !important;
    transition: all 0.2s ease !important;
}

.btn-azul-corporativo { background-color: #2563eb !important; }
.btn-azul-corporativo:hover { background-color: #1d4ed8 !important; transform: translateY(-2px) !important; }

.btn-verde-corporativo { background-color: #16a34a !important; }
.btn-verde-corporativo:hover { background-color: #15803d !important; transform: translateY(-2px) !important; }

/* Adaptabilidad total para Teléfonos Celulares */
@media (max-width: 991px) {
    .lyon-wrapper-principal {
        flex-direction: column !important;
    }
    .lyon-tarjeta {
        flex-direction: column !important;
        text-align: center !important;
        padding: 25px !important;
    }
    .tarjeta-anunciantes {
        flex-direction: column-reverse !important; 
    }
    .lyon-bloque-imagen, .lyon-bloque-texto, .tarjeta-anunciantes .lyon-bloque-texto {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }
    .tarjeta-anunciantes .lyon-bloque-imagen {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }
    .lyon-bloque-texto {
        margin-top: 20px !important;
    }
    .lyon-lista-checks li {
        justify-content: center !important;
    }
    .lyon-boton {
        display: block !important;
        width: 100% !important; 
    }
}


/* ==========================================================================
   SECCIÓN DE CARACTERÍSTICAS HORIZONTALES - ÍCONOS MÁXIMO TAMAÑO (36PX)
   ========================================================================== */

/* Contenedor principal alineado horizontalmente */
.lyon-barra-caracteristicas {
    display: flex !important;
    flex-direction: row !important; /* Fuerza alineación horizontal */
    justify-content: space-between !important;
    align-items: center !important;
    max-width: 1440px !important; /* Ancho idéntico a las tarjetas de arriba */
    width: 100% !important;
    margin: 30px auto 40px auto !important; /* Espaciado centrado perfecto */
    padding: 25px 35px !important; /* Más padding para equilibrar el tamaño grande de los íconos */
    background: #ffffff !important; /* Fondo blanco limpio de la barra */
    border-radius: 12px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02) !important; /* Sombra sutil premium */
    border: 1px solid #f1f5f9 !important;
    box-sizing: border-box !important;
}

/* Bloques individuales */
.lyon-item-horizontal {
    display: flex !important;
    flex-direction: row !important; /* Icono al lado del texto */
    align-items: center !important;
    flex: 1 !important; /* Distribución del espacio idéntica para los 5 bloques */
    justify-content: center !important; /* Centrado dentro de su propia zona */
    box-sizing: border-box !important;
    padding: 0 10px !important;
}

/* CONTENEDOR DEL ÍCONO - TAMAÑO MAXIMIZADO A 36PX */
.lyon-icon-horizontal {
    font-size: 36px !important; /* ¡Subido a 36px para un look imponente y limpio! */
    margin-right: 18px !important; /* Separación óptima para el texto al lado de íconos grandes */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important; /* Evita que el ícono se achique si la pantalla se comprime */
}

/* Variaciones de color exactas de la imagen */
.lyon-icon-horizontal.blue-tint { color: #2563eb !important; }
.lyon-icon-horizontal.purple-tint { color: #4f46e5 !important; }
.lyon-icon-horizontal.darkblue-tint { color: #1d4ed8 !important; }
.lyon-icon-horizontal.navy-tint { color: #2563eb !important; }

/* Contenedor de letras */
.lyon-texto-horizontal {
    display: flex !important;
    flex-direction: column !important;
    text-align: left !important;
}

/* Título de cada característica */
.lyon-texto-horizontal h4 {
    font-size: 14.5px !important;
    color: #0f172a !important; /* Gris grafito oscuro muy elegante */
    font-weight: 700 !important;
    margin: 0 0 2px 0 !important;
    line-height: 1.2 !important;
}

/* Texto pequeño secundario */
.lyon-texto-horizontal span {
    font-size: 11.5px !important;
    color: #64748b !important; /* Gris suave corporativo */
    font-weight: 500 !important;
    line-height: 1.2 !important;
}

/* Adaptabilidad Responsiva para Teléfonos Celulares */
@media (max-width: 1024px) {
    .lyon-barra-caracteristicas {
        flex-wrap: wrap !important; /* Permite que bajen si no caben en pantallas medianas */
        gap: 25px !important;
        justify-content: center !important;
    }
    .lyon-item-horizontal {
        flex: 0 0 45% !important; /* Se organizan en pares en pantallas de tablets */
    }
}

@media (max-width: 640px) {
    .lyon-barra-caracteristicas {
        flex-direction: column !important; /* Una debajo de otra en celulares */
        padding: 20px !important;
    }
    .lyon-item-horizontal {
        flex: 0 0 100% !important;
        justify-content: flex-start !important;
        width: 100% !important;
    }
}

/* ==========================================================================
   SECCIÓN: PASARELAS DE PAGO (VERSION ICONOS VECTORIALES + TEXTO)
   ========================================================================== */

.lyon-payments-container {
    max-width: 1440px !important; 
    width: 100% !important;
    margin: -35px auto 55px auto !important; /* El valor negativo (-35px) jala la sección hacia arriba obligatoriamente */
    text-align: center !important;
    box-sizing: border-box !important;
    padding: 0 15px !important;
}

.lyon-payments-title {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #1d4ed8 !important; /* Tu azul corporativo de referencia */
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    margin-bottom: 5px !important; /* Reducido de 25px a solo 5px para jalar los cajones hacia arriba */
    font-family: 'Poppins', sans-serif !important;
}

.lyon-payments-logos {
    display: flex !important;
    flex-direction: row !important; 
    justify-content: space-between !important; 
    align-items: center !important;
    width: 100% !important;
    gap: 15px !important;
    box-sizing: border-box !important;
}

/* Caja de cada monedero */
.lyon-pay-logo {
    flex: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #94a3b8 !important; /* Color gris suave corporativo por defecto */
    font-family: 'Poppins', sans-serif !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    transition: all 0.25s ease !important;
    height: 45px !important;
    background: #ffffff !important;
    border-radius: 8px !important;
    border: 1px solid #e2e8f0 !important; /* Borde sutil para simular tarjetas limpias */
}

/* Icono dentro del monedero */
.lyon-pay-logo i {
    font-size: 18px !important;
    margin-right: 8px !important;
}

.lyon-pay-logo span small {
    font-size: 9px !important;
    display: block !important;
    margin-top: -3px !important;
    font-weight: 500 !important;
}

/* ==========================================================================
   COLORES OFICIALES CORPORATIVOS EN HOVER (AL PASAR EL MOUSE)
   ========================================================================== */

.lyon-pay-logo.pay-payeer:hover { color: #00b4d8 !important; border-color: #00b4d8 !important; background: #f0f9ff !important; }
.lyon-pay-logo.pay-paypal:hover { color: #003087 !important; border-color: #003087 !important; background: #f0f4f8 !important; }
.lyon-pay-logo.pay-airtm:hover { color: #2563eb !important; border-color: #2563eb !important; background: #eff6ff !important; }
.lyon-pay-logo.pay-binance:hover { color: #f3ba2f !important; border-color: #f3ba2f !important; background: #fffbeb !important; }
.lyon-pay-logo.pay-usdt:hover { color: #26a17b !important; border-color: #26a17b !important; background: #f0fdf4 !important; }
.lyon-pay-logo.pay-litecoin:hover { color: #345d9d !important; border-color: #345d9d !important; background: #f0f4f8 !important; }
.lyon-pay-logo.pay-bitcoin:hover { color: #f7931a !important; border-color: #f7931a !important; background: #fffbe6 !important; }
.lyon-pay-logo.pay-ethereum:hover { color: #3c3c3d !important; border-color: #3c3c3d !important; background: #f8fafc !important; }

/* Adaptabilidad Responsiva */
@media (max-width: 1100px) {
    .lyon-payments-logos {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 15px !important;
    }
    .lyon-pay-logo {
        flex: 0 0 22% !important;
    }
}

@media (max-width: 640px) {
    .lyon-pay-logo {
        flex: 0 0 45% !important;
    }
}

/* ==========================================================================
   APARTADO DE PUBLICIDAD (ADVERTISE HORIZONTAL) - MÁXIMO ANCHO Y CURVAS
   ========================================================================== */

/* Fondo general unificado de la plataforma con la Home */
#content,
body {
    background-color: #f4f7fc !important; 
   
}


/* Ocultamos las etiquetas duplicadas antiguas de la plantilla base */
.site_title,
.site_content > .site_title {
    display: none !important;
}

/* 1. SECCIÓN HERO SUPERIOR FLUIDA HORIZONTAL */
.lyon-adv-page-header {
    max-width: 1440px !important;
    width: 95% !important;
    margin: 40px auto 20px auto !important;
    background: radial-gradient(circle at 15% 50%, #e0f2fe 0%, #ffffff 80%) !important;
    border-radius: 24px !important;
    border: 1px solid #edf2f7 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02) !important;
    padding: 45px !important;
    box-sizing: border-box !important;
}

.lyon-adv-header-inner {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 40px !important;
}

.lyon-adv-hero-image {
    flex: 0 0 25% !important;
    max-width: 25% !important;
    text-align: left !important;
    display: flex !important;
    justify-content: flex-start !important;
}

.lyon-adv-hero-image img {
    max-height: 250px !important;
    width: auto !important;
    object-fit: contain !important;
}

.lyon-adv-hero-text {
    flex: 0 0 70% !important;
    max-width: 70% !important;
    text-align: left !important;
}

.cat-verde {
    color: #10b981 !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    margin-bottom: 8px !important;
    display: block !important;
}

.lyon-titulo-seccion {
    font-size: 36px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    line-height: 1.2 !important;
    margin: 0 0 10px 0 !important;
}

.txt-verde-resaltado {
    color: #10b981 !important;
}

.lyon-extracto {
    font-size: 14.5px !important;
    color: #475569 !important;
    line-height: 1.5 !important;
    margin-bottom: 25px !important;
}

/* DISEÑO VERTICAL DE LOS 4 MINI ÍCONOS */
.lyon-adv-mini-features {
    display: flex !important;
    flex-direction: row !important;
    gap: 20px !important;
    margin-top: 25px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.lyon-mini-feat-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #ffffff !important;
    padding: 15px 20px !important;
    border-radius: 12px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.01) !important;
    flex: 1 !important;
    min-width: 120px !important;
    box-sizing: border-box !important;
}

.lyon-mini-feat-item i {
    font-size: 24px !important;
    color: #2563eb !important;
    margin-bottom: 10px !important;
    display: block !important;
}

.lyon-mini-feat-item span {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #475569 !important;
    text-align: center !important;
    line-height: 1.2 !important;
    display: block !important;
}

/* --- CUADRO BLANCO GRANDE EXTERIOR CONTENEDOR CON CURVAS --- */
.site_content.lyon-adv-body-wrapper {
    max-width: 1440px !important;
    width: 95% !important;
    margin: 20px auto 80px auto !important;
    background-color: #ffffff !important; 
    border: 1px solid #edf2f7 !important;
    border-radius: 24px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.02) !important;
    padding: 50px 40px !important; 
    box-sizing: border-box !important;
}

#ads_list {
    display: flex !important;
    flex-direction: column !important; 
    width: 100% !important;
    gap: 20px !important; 
    float: none !important;
}

/* --- BARRAS HORIZONTALES PANORÁMICAS --- */
.shopcart {
    display: flex !important;
    flex-direction: row !important; 
    align-items: center !important; 
    justify-content: space-between !important; 
    width: 100% !important; 
    max-width: 100% !important;
    background: #ffffff !important; 
    border: 1px solid #e2e8f0 !important; 
    border-radius: 16px !important; 
    padding: 22px 30px !important; 
    box-sizing: border-box !important;
    position: relative !important;
}

.shopcart:nth-child(2) {
    
}

/* Letrero MOST POPULAR flotando sobre el primer cajón (01) */
.shopcart:nth-child(1)::after {
    content: "MOST POPULAR" !important;
    position: absolute !important;
    top: -12px !important; 
    right: 30px !important;
    background-color: #2563eb !important; 
    color: #ffffff !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    padding: 4px 14px !important;
    border-radius: 20px !important;
    letter-spacing: 0.5px !important;
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.2) !important;
    z-index: 5 !important;
}

.shoptitle { background: transparent !important; border: none !important; padding: 0 !important; margin: 0 !important; flex: 0 0 50% !important; display: flex !important; align-items: center !important; }
.carticon { font-size: 16px !important; font-weight: 700 !important; color: #0f172a !important; background: none !important; padding: 0 !important; display: flex !important; align-items: center !important; gap: 15px !important; }

.shopcart:nth-child(1) .carticon::before { content: "01" !important; font-size: 11px; color: #2563eb; background: #eff6ff; border: 1px solid #dbeafe; padding: 4px 8px; border-radius: 6px; font-weight: 800; }
.shopcart:nth-child(2) .carticon::before { content: "02" !important; font-size: 11px; color: #10b981; background: #ecfdf5; border: 1px solid #a7f3d0; padding: 4px 8px; border-radius: 6px; font-weight: 800; }
.shopcart:nth-child(3) .carticon::before { content: "03" !important; font-size: 11px; color: #6366f1; background: #eef2ff; border: 1px solid #e0e7ff; padding: 4px 8px; border-radius: 6px; font-weight: 800; }
.shopcart:nth-child(4) .carticon::before { content: "04" !important; font-size: 11px; color: #f97316; background: #fff7ed; border: 1px solid #ffedd5; padding: 4px 8px; border-radius: 6px; font-weight: 800; }
.shopcart:nth-child(5) .carticon::before { content: "05" !important; font-size: 11px; color: #06b6d4; background: #ecfeff; border: 1px solid #cffafe; padding: 4px 8px; border-radius: 6px; font-weight: 800; }
.shopcart:nth-child(6) .carticon::before { content: "06" !important; font-size: 11px; color: #4f46e5; background: #faf5ff; border: 1px solid #f3e8ff; padding: 4px 8px; border-radius: 6px; font-weight: 800; }

.shopcart .carticon i { width: 42px !important; height: 42px !important; border-radius: 10px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; color: #ffffff !important; font-size: 16px !important; }
.shopcart:nth-child(1) .carticon i { background-color: #3b82f6 !important; }
.shopcart:nth-child(2) .carticon i { background-color: #10b981 !important; }
.shopcart:nth-child(3) .carticon i { background-color: #6366f1 !important; }
.shopcart:nth-child(4) .carticon i { background-color: #f97316 !important; }
.shopcart:nth-child(5) .carticon i { background-color: #06b6d4 !important; }
.shopcart:nth-child(6) .carticon i { background-color: #4f46e5 !important; }

.shopcontent { flex: 0 0 45% !important; padding: 0 !important; }
.shopcontent form { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-end !important; gap: 30px !important; width: 100% !important; }

.shopcontent select { width: 100% !important; max-width: 250px !important; padding: 11px 14px !important; border-radius: 8px !important; font-size: 13.5px !important; font-family: 'Poppins', sans-serif !important; font-weight: 700 !important; box-sizing: border-box !important; }
.shopcart:nth-child(1) select { color: #2563eb !important; background-color: rgba(37, 99, 235, 0.04) !important; border: 1.5px solid rgba(37, 99, 235, 0.15) !important; }
.shopcart:nth-child(2) select { color: #10b981 !important; background-color: rgba(16, 185, 129, 0.04) !important; border: 1.5px solid rgba(16, 185, 129, 0.15) !important; }
.shopcart:nth-child(3) select { color: #4f46e5 !important; background-color: rgba(79, 70, 229, 0.04) !important; border: 1.5px solid rgba(79, 70, 229, 0.15) !important; }
.shopcart:nth-child(4) select { color: #ea580c !important; background-color: rgba(234, 88, 12, 0.04) !important; border: 1.5px solid rgba(234, 88, 12, 0.15) !important; }
.shopcart:nth-child(5) select { color: #0891b2 !important; background-color: rgba(8, 145, 178, 0.04) !important; border: 1.5px solid rgba(8, 145, 178, 0.15) !important; }
.shopcart:nth-child(6) select { color: #4f46e5 !important; background-color: rgba(79, 70, 229, 0.04) !important; border: 1.5px solid rgba(79, 70, 229, 0.15) !important; }

/* Botón Verde Esmeralda de Compra */
.shopcontent input[type="submit"],
.shopcontent .formclass input[type="submit"],
#ads_list input[type="submit"] { 
    background-color: #10b981 !important; 
    color: #ffffff !important; 
    padding: 12px 30px !important; 
    border-radius: 8px !important; 
    font-size: 13px !important; 
    font-weight: 800 !important; 
    border: none !important; 
    cursor: pointer !important; 
    text-transform: uppercase !important; 
    letter-spacing: 0.5px !important; 
    white-space: nowrap !important; 
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15) !important; 
    transition: background-color 0.2s ease !important;
}

.shopcontent input[type="submit"]:hover,
#ads_list input[type="submit"]:hover { 
    background-color: #059669 !important; 
}

/* ==========================================================================
   RESTAURACIÓN PREMIUM: FOOTER CORPORATIVO COMPLETAMENTE EN UNA FILA
   ========================================================================== */

/* 1. Contenedor Base: Forza el fondo azul marino de extremo a extremo */
.lyon-footer-principal,
footer,
.footerContainer {
    width: 100% !important;
    background-color: #0a192f !important; /* Tu Azul Marino Profundo oficial de Lyon Click Ads */
    border-top: 1px solid #1e293b !important;
    padding: 0px 0 !important; /* Altura perfecta y esbelta para una sola fila */
    font-family: 'Poppins', sans-serif !important;
    box-sizing: border-box !important;
    display: block !important;
    clear: both !important;
    height: auto !important;
}

/* 2. FUERZA DE FILA ÚNICA: Forzamos a todas las sub-cajas a formar una sola línea de lado a lado */
.lyon-footer-security-banner,
.lyon-footer-legal-bar,
.footerInner,
#footer_inner,
.lyon-footer-principal > div {
    max-width: 1440px !important;
    width: 95% !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: row !important; /* Rigurosa fila horizontal continua */
    align-items: center !important; /* Centrado vertical perfecto de todos los elementos */
    justify-content: space-between !important; /* Distribución equilibrada de extremo a extremo */
    background: transparent !important; /* Limpia cualquier bloque blanco heredado */
    border: none !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* 3. BLOQUE IZQUIERDA COMPLETAMENTE HORIZONTAL: Escudo + Textos + Copyright al lado */
.lyon-security-brand {
    display: flex !important;
    flex-direction: row !important; /* Forza a que todo fluya en línea recta hacia la derecha */
    align-items: center !important; /* Alineación vertical centralizada */
    gap: 15px !important; /* Distancia perfecta entre los elementos */
    flex: 0 0 auto !important;
}

.lyon-shield-icon {
    font-size: 24px !important; 
    color: #38bdf8 !important; /* Tu azul celeste brillante institucional */
    margin: 0 !important;
    display: inline-block !important;
}

.lyon-security-text {
    text-align: left !important;
    display: inline-block !important;
}

.lyon-security-text h3 {
    font-size: 13px !important;
    font-weight: 800 !important;
    color: #ffffff !important; 
    margin: 0 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    line-height: 1.2 !important;
    font-family: 'Poppins', sans-serif !important;
}

.lyon-security-text span {
    font-size: 10px !important;
    font-weight: 700 !important;
    color: #94a3b8 !important;
    display: block !important;
    margin-top: 1px !important;
    line-height: 1.2 !important;
    font-family: 'Poppins', sans-serif !important;
}

/* Fuerza al Copyright a quedarse a la derecha en la misma fila */
.lyon-copyright,
.lyon-copyright-integrado,
.lyon-footer-security-banner p,
.lyon-footer-legal-bar p {
    font-size: 12px !important;
    color: #64748b !important;
    margin: 0 0 0 15px !important; /* Espacio exacto a la derecha de los textos de seguridad */
    border-left: 1px solid #1e293b !important; /* Línea vertical sutil divisoria elegante */
    padding-left: 15px !important;
    white-space: nowrap !important; /* Evita que el texto salte hacia abajo */
    display: inline-block !important;
    line-height: 1.2 !important;
    font-family: 'Poppins', sans-serif !important;
}

.lyon-copyright strong {
    color: #ffffff !important;
}

/* 4. BLOQUE CENTRAL: Enlaces Legales alineados horizontalmente con fuente Poppins Sans-Serif */
.lyon-legal-links {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto !important; /* Centrado perfecto absoluto en el medio */
}

.lyon-legal-links a,
.footerInner a,
#footer a,
footer a,
.footerContainer a {
    color: #ffffff !important; 
    text-decoration: none !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 0 !important;
    transition: color 0.2s ease !important;
    font-family: 'Poppins', sans-serif !important; /* ¡FORZAMOS LA FUENTE POPPINS SANS-SERIF! */
}

.lyon-legal-links a:hover,
.footerInner a:hover,
#footer a:hover,
footer a:hover,
.footerContainer a:hover {
    color: #38bdf8 !important; 
}

.lyon-divider {
    color: #334155 !important;
    margin: 0 10px !important;
    font-size: 10px !important;
    font-family: 'Poppins', sans-serif !important;
}

/* 5. BLOQUE DERECHO: Tres Sellos de Confianza Internacional */
.lyon-security-badges {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    flex: 0 0 auto !important;
}

.lyon-badge-item {
    background: #112240 !important; /* Fondo azul noche profundo a juego con el menú */
    color: #cbd5e1 !important;
    padding: 6px 12px !important;
    border-radius: 6px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    border: 1px solid #1e293b !important;
    white-space: nowrap !important;
    font-family: 'Poppins', sans-serif !important;
}

.lyon-badge-item i {
    margin-right: 6px !important;
    font-size: 12px !important;
}

.badge-ssl i { color: #10b981 !important; } 
.badge-norton i { color: #eab308 !important; } 
.badge-mcafee i { color: #ef4444 !important; } 

.lyon-badge-item small {
    font-size: 8px !important;
    text-transform: uppercase !important;
    margin-left: 3px !important;
    opacity: 0.8 !important;
}

/* ==========================================================================
   6. RESPONSIVO DE ALTA ESTABILIDAD PARA PANTALLAS DE CELULARES
   ========================================================================== */
@media (max-width: 991px) {
    .lyon-footer-principal { padding: 30px 0 !important; }
    .lyon-footer-security-banner, .lyon-footer-legal-bar, .lyon-footer-principal > div, .footerInner {
        flex-direction: column !important; /* Apilamiento limpio y centrado en celulares */
        gap: 15px !important;
        text-align: center !important;
    }
    .lyon-security-brand { flex-direction: column !important; gap: 6px !important; }
    .lyon-copyright, .lyon-footer-security-banner p, .lyon-footer-legal-bar p {
        margin: 5px 0 0 0 !important;
        border-left: none !important;
        padding-left: 0 !important;
    }
    .lyon-legal-links { flex-wrap: wrap !important; justify-content: center !important; gap: 6px !important; }
    .lyon-divider { display: none !important; }
    .lyon-security-badges { justify-content: center !important; flex-wrap: wrap !important; gap: 8px !important; }
}


/* ==================================================
LYON DASHBOARD HERO V2
================================================== */

.lyon-dashboard-hero{
    display:flex;
    align-items:center;
    justify-content:flex-start;

    background-image:url('https://i.imgur.com/CrMYlt0.jpeg');
    background-size:1415px;
    background-position:center center;
    background-repeat:no-repeat;

    border-radius:24px;
    min-height:340px;
    padding:40px 50px;

    position:relative;
    overflow:hidden;
}

.lyon-dashboard-left{
    flex:1;
    max-width:550px;
    position:relative;
    z-index:2;
}

.lyon-dashboard-right{
    flex:1;
    display:flex;
    justify-content:flex-end;
    align-items:center;
}

.lyon-dashboard-right img{
width:100%;
max-width:520px;
height:auto;
display:block;
}

.lyon-badge{
display:inline-block;
background:#22c55e;
color:#ffffff;
padding:8px 18px;
border-radius:30px;
font-size:12px;
font-weight:700;
letter-spacing:1px;
margin-bottom:15px;
}

.lyon-dashboard-hero h1{
font-size:48px;
line-height:1.1;
margin:0 0 15px 0;
color:#ffffff;
font-weight:800;
}

.lyon-dashboard-hero h1{
    font-size:50px;
    color:#ffffff;
    text-shadow:
        0 3px 10px rgba(0,0,0,0.65),
        0 0 25px rgba(0,0,0,0.40);
}

.lyon-dashboard-hero p{
font-size:15px;
line-height:1.6;
max-width:400px;
margin-bottom:0px;
color:rgba(255,255,255,0.85);
color:#ffffff;
    text-shadow:0 2px 8px rgba(0,0,0,0.60);
}

.lyon-dashboard-buttons{
display:flex;
gap:15px;
margin-bottom:0;
}

.lyon-btn-primary{
background:#22c55e;
color:#ffffff !important;
padding:12px 25px;
border-radius:10px;
text-decoration:none;
font-weight:700;
display:inline-block;
}

.lyon-btn-secondary{
background:#ffffff;
color:#1e3a8a !important;
padding:12px 25px;
border-radius:10px;
text-decoration:none;
font-weight:700;
display:inline-block;
}

@media(max-width:991px){

.lyon-dashboard-hero{
flex-direction:column-reverse;
text-align:center;
padding:25px;
}

.lyon-dashboard-left{
max-width:100%;
}

.lyon-dashboard-right{
justify-content:center;
}

.lyon-dashboard-right img{
max-width:400px;
}

.lyon-dashboard-buttons{
justify-content:center;
}
}
/* =====================================
LYON ACCOUNT LAYOUT
===================================== */

.lyon-account-layout{
display:flex;
gap:15px;
width:100%;
align-items:flex-start;
}

.lyon-sidebar{
width:240px;
flex-shrink:0;
border-radius:20px;
}

.lyon-main-content{
flex:1;
min-width:0;
}

/* Sidebar */

.member_sidebar{
margin:0 !important;
padding:0 !important;
list-style:none !important;
}

/* Responsive */

@media(max-width:991px){


.lyon-account-layout{
    flex-direction:column;
}

.lyon-sidebar{
    width:100%;
   
}
}

/* =====================================
LYON DASHBOARD STATS CARDS
===================================== */

.lyon-stats-grid{
display:flex;
flex-wrap:wrap;
gap:20px;
margin:30px 0;
}

.lyon-stat-card{
flex:1;
min-width:18px;
background:#ffffff;
border-radius:18px;
padding:10px 15px;
box-shadow:0 10px 30px rgba(0,0,0,0.06);
transition:all .25s ease;
border:1px solid #e5e7eb;
}

.lyon-stat-card:hover{
transform:translateY(-4px);
}

.lyon-stat-title{
font-size:13px;
font-weight:700;
color:#64748b;
margin-bottom:1px;
text-transform:uppercase;
letter-spacing:.5px;
}

.lyon-stat-value{
font-size:30px;
font-weight:800;
color:#0f172a;
}



.lyon-stat-icon{
    width:55px;
    height:55px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:15px;
    font-size:24px;
}

.balance-icon{
    background:#dcfce7;
    color:#22c55e;
}

.purchase-icon{
    background:#dbeafe;
    color:#2563eb;
}

.earned-icon{
    background:#ede9fe;
    color:#8b5cf6;
}

.referral-icon{
    background:#ffedd5;
    color:#f97316;
}

.credit-icon{
    background:#cffafe;
    color:#06b6d4;
}

.balance-card .lyon-stat-value{
    color:#22c55e;
}

.purchase-card .lyon-stat-value{
    color:#2563eb;
}

.earned-card .lyon-stat-value{
    color:#8b5cf6;
}

.referral-card .lyon-stat-value{
    color:#f97316;
}

.credit-card .lyon-stat-value{
    color:#06b6d4;
}

/* =====================================
LYON DASHBOARD TABS
===================================== */

#tabs{
    margin-top:35px;
   
}

#tabs ul{
    display:flex;
    gap:12px;
    padding:0;
    margin:0 0 25px 0;
    list-style:none;
    border:none;
    background:none;
}

#tabs ul li{
    margin:0;
    border:none;
    background:none;
}

#tabs ul li a{
    display:block;
    padding:14px 24px;
    border-radius:14px;
    background:#f8fafc;
    color:#475569;
    font-weight:700;
    text-decoration:none;
    border:1px solid #e2e8f0;
    transition:all .25s ease;
}

#tabs ul li a:hover{
    background:#2563eb;
    color:#ffffff;
    border-color:#2563eb;
}

#tabs .ui-tabs-active a,
#tabs .ui-state-active a{
    background:linear-gradient(
        135deg,
        #1d4ed8,
        #2563eb
    ) !important;

    color:#ffffff !important;
    border-color:#2563eb !important;
}

#tabs > div{
    background:#ffffff;
    border-radius:20px;
    padding:25px;
    border:1px solid #e2e8f0;
    box-shadow:0 10px 30px rgba(0,0,0,.05);
    
}

.lyon-analytics-header{
    margin-bottom:25px;
}

.lyon-analytics-header h2{
    margin:0;
    font-size:28px;
    font-weight:700;
    color:#1e293b;
}

.lyon-analytics-header p{
    margin-top:8px;
    color:#64748b;
    font-size:14px;
}

.lyon-chart-card{
    background:#fff;
    border-radius:20px;
    padding:20px;
    margin-bottom:30px;
    box-shadow:0 8px 24px rgba(0,0,0,.08);
    
}

#myClicksChart{
    width:100%;
    height:262px !important;
    max-height:262px;
}




.lyon-coming-chart{
    min-height:220px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
}

.lyon-chart-icon{
    font-size:70px;
    margin-bottom:20px;
}

.lyon-coming-chart h3{
    font-size:28px;
    font-weight:700;
    color:#0f172a;
    margin-bottom:12px;
}

.lyon-coming-chart p{
    color:#64748b;
    font-size:15px;
    max-width:500px;
}

.lyon-account-card{
    background:#fff;
    border-radius:20px;
    padding:20px;
    margin-bottom:30px;
    box-shadow:0 8px 24px rgba(0,0,0,0.08);
}

.lyon-account-header h3{
    margin:0 0 20px;
    color:#0f172a;
    font-size:25px;
    font-weight:700;
}

.lyon-account-row{
    display:flex;
    justify-content:space-between;
    padding:8px 0;
    border-bottom:1px solid #eef2f7;
}

.lyon-account-left{
    display:flex;
    align-items:center;
    gap:12px;
}

.lyon-account-icon{
    width:36px;
    height:36px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:18px;
    color:#fff;
    flex-shrink:0;
}

.clicks-icon{
    background:#3b82f6;
}

.direct-icon{
    background:#22c55e;
}

.rented-icon{
    background:#f59e0b;
}

.member-icon{
    background:#a855f7;
}



.lyon-account-row span{
    color:#64748b;
}

.lyon-account-row strong{
    color:#0f172a;
}

.lyon-upgrade-btn{
    display:block;
    margin-top:0px;
    text-align:center;
    background:#4e83af;
    color:#fff;
    text-decoration:none;
    padding:10px;
    border-radius:12px;
    font-weight:700;
}

.lyon-dashboard-row{
    display:flex;
    gap:20px;
    align-items:flex-start;
    margin-bottom:30px;
}

.lyon-dashboard-row .lyon-chart-card{
    flex:2.2;
    margin-bottom:0;
}

.lyon-dashboard-row .lyon-account-card{
    flex:0.8;
    margin-bottom:0;
    min-width:280px;
    height: 385px;
}

.lyon-quicklinks-card{
    flex:0.8;
    background:#fff;
    border-radius:20px;
    padding:19px;
    box-shadow:0 8px 24px rgba(0,0,0,0.08);
}

.lyon-quick-link{
    padding:14px 0;
    border-bottom:1px solid #eef2f7;
    font-weight:600;
    color:#1e2a4a;
    cursor:pointer;
}

.lyon-quick-link:last-child{
    border-bottom:none;
}

.lyon-quick-item{
    display:flex;
    align-items:center;
    gap:12px;
    padding:7px 0;
    text-decoration:none;
    border-bottom:1px solid #eef2f7;
}

.lyon-quick-item:last-child{
    border-bottom:none;
}

.lyon-quick-icon{
    width:42px;
    height:42px;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
    flex-shrink:0;
}

.ads-icon{
    background:#e8f7ea;
}

.survey-icon{
    background:#f1e8ff;
}

.offer-icon{
    background:#fff2e0;
}

.advertise-icon{
    background:#e8f1ff;
}

.withdraw-icon{
    background:#e8f7ea;
}

.lyon-quick-content{
    flex:1;
    display:flex;
    flex-direction:column;
}

.lyon-quick-content strong{
    color:#0f172a;
    font-size:14px;
}

.lyon-quick-content span{
    color:#64748b;
    font-size:11px;
    margin-top:2px;
}

.lyon-quick-arrow{
    font-size:22px;
    color:#94a3b8;
    font-weight:700;
}


/* Responsive para móviles */
@media(max-width: 991px){

    .lyon-dashboard-row{
        flex-direction:column;
    }

    .lyon-dashboard-row .lyon-chart-card,
    .lyon-dashboard-row .lyon-account-card{
        width:100%;
    }
}


.lyon-bottom-row{
    display:flex;
    gap:20px;
    margin-top:30px;
    margin-bottom:30px;
    
}

.lyon-activity-card{
    flex:1;
    background:#fff;
    border-radius:20px;
    padding:25px;
    box-shadow:0 8px 24px rgba(0,0,0,0.08);
    min-height: 471px;
}

.lyon-referral-card{
    flex:1;
    background:#fff;
    border-radius:20px;
    padding:25px;
    box-shadow:0 8px 24px rgba(0,0,0,0.08);
}

.lyon-news-card{
    flex:1;
    background:#fff;
    border-radius:20px;
    padding:25px;
    box-shadow:0 8px 24px rgba(0,0,0,0.08);
    min-height: 471px;
}

.lyon-activity-card h3,
.lyon-referral-card h3,
.lyon-news-card h3{
    margin:0 0 20px;
    color:#0f172a;
    font-size:28px;
    font-weight:700;
}

.lyon-news-subtitle{
    margin-top:-8px;
    margin-bottom:20px;
    font-size:13px;
    color:#7b879d;
    line-height:1.5;
}

.lyon-activity-item,
.lyon-news-item{
    padding:15px 0;
}

.lyon-activity-item{
    display:flex;
    align-items:center;
    gap:15px;
    padding:15px 0;
}

.lyon-act-icon{
    width:46px;
    height:46px;
    border-radius:12px;
    background:#eef4ff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
    flex-shrink:0;
}

.lyon-news-item{
    display:flex;
    align-items:center;
    gap:15px;
    padding:15px 0;
    transition:all .25s ease;
    border-radius:12px;
}

.lyon-news-item:hover{
    background:#f8fbff;
    transform:translateX(4px);
}

.lyon-news-icon{
    width:46px;
    height:46px;
    border-radius:12px;
    background:#eef4ff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
    flex-shrink:0;
}

.lyon-news-content{
    display:flex;
    flex-direction:column;
}

.lyon-news-content strong{
    color:#0f172a;
    margin-bottom:4px;
}

.lyon-news-content span{
    color:#64748b;
    font-size:14px;
}

.lyon-act-content{
    display:flex;
    flex-direction:column;
}

.lyon-act-content strong{
    color:#0f172a;
    margin-bottom:4px;
}

.lyon-act-content span{
    color:#64748b;
    font-size:14px;
}

.lyon-activity-item strong,
.lyon-news-item strong{
    display:block;
    color:#0f172a;
    margin-bottom:5px;
}

.lyon-activity-item span,
.lyon-news-item span{
    color:#64748b;
    font-size:14px;
}

.lyon-referral-chart{
    width:180px;
    height:180px;
    border-radius:50%;
    background:conic-gradient(
        #22c55e 0deg 120deg,
        #3b82f6 120deg 240deg,
        #f59e0b 240deg 360deg
    );
    margin:20px auto;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:38px;
    font-weight:700;
    color:#0f172a;
}

.lyon-referral-chart::before{
    content:'';
    position:absolute;
    width:115px;
    height:115px;
    background:#fff;
    border-radius:50%;
}

.lyon-referral-center{
    position:relative;
    z-index:2;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}

.lyon-referral-center strong{
    font-size:56px;
    color:#0f172a;
    line-height:1;
    font-weight:800;
}

.ref-dot{
    width:12px;
    height:12px;
    border-radius:50%;
    display:inline-block;
    margin-right:10px;
    flex-shrink:0;
}

.ref-dot.green{
    background:#22c55e;
}

.ref-dot.orange{
    background:#f59e0b;
}

.ref-dot.blue{
    background:#3b82f6;
}

.lyon-referral-center span{
    margin-top:10px;
    font-size:11px;
    color:#64748b;
    text-align:center;
    display:block;
    
}

.lyon-referral-stats div{
    display:flex;
    justify-content:space-between;
    align-items:center;
    
    border-bottom:1px solid #eef2f7;
    color:#475569;
    font-weight:500;
}

.ref-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:14px 16px;
    margin-bottom:10px;
    border-radius:12px;
    background:#f8fbff;
    border:1px solid #edf2f7;
    transition:all .25s ease;
}

.ref-row:hover{
    transform:translateY(-2px);
    box-shadow:0 6px 15px rgba(0,0,0,.08);
}

.ref-label{
    display:flex;
    align-items:center;
}

.lyon-referral-stats strong{
    color:#0f172a;
    font-weight:700;
}



@media(max-width:991px){

    .lyon-bottom-row{
        flex-direction:column;
    }

}
#tabs{
    
    
}

.lyon-topbar{
    background:#ffffff;
    border-radius:18px;
    padding:18px 25px;

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

    margin-bottom:20px;

    box-shadow:0 6px 20px rgba(0,0,0,.08);
}

.lyon-topbar-left h2{
    margin:0;
    color:#0f2d63;
    font-size:24px;
    font-weight:700;
}

.lyon-topbar-left span{
    display:block;
    margin-top:4px;
    color:#6c7a92;
    font-size:14px;
}

.lyon-balance-box{
    text-align:right;
}

.lyon-balance-box small{
    display:block;
    color:#7c8aa5;
    font-size:12px;
}

.lyon-balance-box strong{
    color:#14b84a;
    font-size:22px;
    font-weight:700;
}


.lyon-topbar-right{
    display:flex;
    align-items:center;
    gap:20px;
}

.lyon-notification{
    width:42px;
    height:42px;

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

    background:#f5f8ff;
    border-radius:50%;
    font-size:20px;
    cursor:pointer;

    transition:all .25s ease;
}

.lyon-notification:hover{
    transform:translateY(-2px);
    background:#eef4ff;
}

.lyon-top-avatar img{
    width:48px;
    height:48px;

    border-radius:50%;
    object-fit:cover;

    border:3px solid #2dbeff;
}

.lyon-notification{
    width:42px;
    height:42px;

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

    background:#f5f8ff;
    border-radius:50%;

    font-size:20px;
    cursor:pointer;

    position:relative;

    transition:all .25s ease;
}

.lyon-notification:hover{
    transform:translateY(-2px);
    background:#eef4ff;
}

.notification-badge{
    position:absolute;
    top:-5px;
    right:-5px;

    min-width:18px;
    height:18px;

    background:#ff3b30;
    color:#fff;

    font-size:11px;
    font-weight:700;

    border-radius:50%;

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

    border:2px solid #fff;
}

.lyon-referral-subtitle{
    margin-top:-8px;
    margin-bottom:18px;
    font-size:13px;
    color:#7b879d;
    line-height:1.5;
}

.news-tag{
    display:inline-block;
    margin-top:6px;
    padding:4px 10px;
    border-radius:20px;
    font-size:10px;
    font-weight:700;
    letter-spacing:.5px;
}

.news-tag.update{
    background:#dbeafe;
    color:#2563eb;
}

.news-tag.new{
    background:#dcfce7;
    color:#16a34a;
}

.news-tag.coming{
    background:#fef3c7;
    color:#d97706;
}

.news-tag.event{
    background:#fee2e2;
    color:#dc2626;
}


.lyon-news-link{
    text-decoration:none;
    color:inherit;
    display:block;
}

.lyon-news-link:hover{
    text-decoration:none;
    color:inherit;
}

.activity-tag{
    display:inline-block;
    margin-top:6px;
    padding:4px 10px;
    border-radius:20px;
    font-size:10px;
    font-weight:700;
    letter-spacing:.5px;
}

.activity-tag.completed{
    background:#dbeafe;
    color:#2563eb;
}

.activity-tag.success{
    background:#dcfce7;
    color:#16a34a;
}

.activity-tag.paid{
    background:#fee2e2;
    color:#dc2626;
}

.activity-tag.rewarded{
    background:#fef3c7;
    color:#d97706;
}

.activity-tag.online{
    background:#ecfeff;
    color:#0891b2;
}

.lyon-activity-item{
    transition:all .25s ease;
    border-radius:12px;
    padding:10px;
}

.lyon-activity-item:hover{
    background:#f8fbff;
    transform:translateX(4px);
}

.activity-link{
    text-decoration:none;
}

.activity-link:hover{
    text-decoration:none;
}

.lyon-ads-hero{
    position:relative;
    min-height:340px;
    border-radius:24px;
    overflow:hidden;
    padding:190px;
    margin-bottom:30px;

    background-image:url('https://i.imgur.com/E2Qer7g.png');
    background-size:cover;
    background-position:center;
}

.lyon-ads-content{
    max-width:520px;
    position:relative;
    z-index:2;

}
.lyon-ads-badge{
    display:inline-block;
    background:#22c55e;
    color:#fff;
    padding:10px 20px;
    border-radius:999px;
    font-weight:700;
    margin-bottom:20px;
}

.lyon-ads-hero h1{
    font-size:56px;
    line-height:1.1;
    color:#fff;
    margin-bottom:20px;
}

.lyon-ads-hero h1 span{
    color:#22c55e;
}

.lyon-ads-hero p{
    color:#fff;
    font-size:18px;
    line-height:1.7;
    max-width:500px;
}

.lyon-ads-features{
    display:flex;
    gap:15px;
    flex-wrap:wrap;
    margin-top:30px;
}

.feature-item{
    background:rgba(255,255,255,.15);
    color:#fff;
    padding:12px 18px;
    border-radius:12px;
    backdrop-filter:blur(8px);
}


/* ADS STATS */

.lyon-ads-stats{
    display:flex;
    gap:20px;

}

.lyon-stat-card{
    background:#fff;
    border-radius:18px;
    
    
    align-items:center;
    gap:15px;
    box-shadow:0 8px 25px rgba(0,0,0,.06);
    transition:.3s ease;
}

.lyon-ads-stat-card{
    background:#fff;
    border-radius:18px;
    padding:22px;
    display:flex;
    align-items:center;
    gap:18px;
    box-shadow:0 8px 25px rgba(0,0,0,.06);
    transition:.3s ease;

    flex:1;
    min-height:100px;
}

.lyon-ads-stat-card:hover{
    transform:translateY(-4px);
    box-shadow:0 12px 30px rgba(0,0,0,.10);
}

.lyon-stat-card:hover{
    transform:translateY(-4px);
    box-shadow:0 12px 30px rgba(0,0,0,.10);
}

.lyon-ads-stat-card .stat-icon{
    width:58px;
    height:58px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:24px;
    color:#fff;
    flex-shrink:0;
}

.lyon-ads-stat-card .stat-icon.blue{
    background:#2563eb;
}

.lyon-ads-stat-card .stat-icon.green{
    background:#22c55e;
}

.lyon-ads-stat-card .stat-icon.purple{
    background:#7c3aed;
}

.lyon-ads-stat-card .stat-icon.orange{
    background:#f59e0b;
}

.lyon-ads-stat-card .stat-icon.cyan{
    background:#06b6d4;
}

.lyon-ads-stat-card .stat-content{
    display:flex;
    flex-direction:column;
}

.lyon-ads-stat-card .stat-content strong{
    font-size:30px;
    color:#0f172a;
    line-height:1;
    margin-bottom:5px;
}

.lyon-ads-stat-card .stat-content span{
    color:#64748b;
    font-size:14px;
}


/* RESPONSIVE */

@media(max-width:1100px){

    .lyon-ads-layout{
   
}
}

/* ADS MAIN LAYOUT */

.lyon-ads-layout{
    display:flex;
    gap:25px;
    margin-top:30px;
}

.lyon-ads-main{
    flex:2;
    background:#fff;
    border-radius:24px;
    box-shadow:0 8px 25px rgba(0,0,0,.06);
    overflow:hidden;
    min-height:650px;
}

.lyon-card-header{
    padding:28px 30px;
    border-bottom:1px solid #eef2f7;
}

.lyon-card-header h2{
    margin:0;
    font-size:32px;
    color:#0f172a;
    font-weight:700;
}

.lyon-card-body{
    padding:30px;
    min-height:550px;
    color:#94a3b8;
}

.lyon-ads-sidebar{
    flex:1;
    display:flex;
    flex-direction:column;
    gap:25px;
}

.lyon-side-card{
    background:#fff;
    border-radius:24px;
    padding:30px;
    box-shadow:0 8px 25px rgba(0,0,0,.06);
    min-height:250px;
}

.lyon-side-card h3{
    margin:0;
    font-size:24px;
    color:#0f172a;
    font-weight:700;
}


/* AVAILABLE ADS HEADER */

.lyon-ads-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:20px 30px;
    border-bottom:1px solid #eef2f7;
}

.ads-filter select{
    border:1px solid #dbe4ee;
    border-radius:10px;
    padding:10px 14px;
    background:#fff;
    color:#475569;
}

.ads-count{
    color:#64748b;
    font-weight:600;
}

/* AD ITEM */

.lyon-ad-item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:22px 30px;
    border-bottom:1px solid #eef2f7;
    transition:.3s ease;
}

.lyon-ad-item:hover{
    background:#f8fbff;
}

.ad-logo{
    width:70px;
    height:70px;
    border-radius:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:28px;
    font-weight:700;
}

.ad-logo.crypto{
    background:linear-gradient(135deg,#0f172a,#2563eb);
}

.ad-info{
    flex:1;
    margin-left:20px;
}

.ad-info h4{
    margin:0 0 6px;
    color:#0f172a;
    font-size:18px;
}

.ad-info p{
    margin:0 0 8px;
    color:#64748b;
}

.ad-category{
    background:#eff6ff;
    color:#2563eb;
    padding:4px 10px;
    border-radius:999px;
    font-size:12px;
    font-weight:600;
}

.ad-reward{
    text-align:center;
    min-width:120px;
}

.ad-reward strong{
    display:block;
    color:#0f172a;
    font-size:20px;
}

.ad-reward span{
    color:#64748b;
}

.view-ad-btn{
    display:inline-block;
    padding:10px 20px;
    border-radius:10px;
    border:2px solid #2563eb;
    color:#2563eb;
    font-weight:600;
    text-decoration:none;
    transition:.3s ease;
}

.view-ad-btn:hover{
    background:#2563eb;
    color:#fff;
}

.lyon-ad-item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:20px;
    border:1px solid #eef2f7;
    border-radius:16px;
    background:#fff;
    margin-top:20px;
    transition:.3s ease;
}

.lyon-ad-item:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 25px rgba(0,0,0,.06);
}

.ad-logo{
    width:70px;
    height:70px;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-weight:700;
    font-size:28px;
    flex-shrink:0;
}

.ad-logo.crypto{
    background:#0f172a;
}

.ad-info{
    flex:1;
}

.ad-info h4{
    margin:0 0 6px;
    color:#0f172a;
    font-size:18px;
}

.ad-info p{
    margin:0 0 8px;
    color:#64748b;
}

.ad-category{
    display:inline-block;
    padding:4px 10px;
    border-radius:999px;
    background:#e0f2fe;
    color:#0284c7;
    font-size:12px;
    font-weight:600;
}

.ad-reward{
    display:flex;
    flex-direction:column;
    text-align:center;
    min-width:80px;
}

.ad-reward strong{
    color:#0f172a;
    font-size:18px;
}

.ad-reward span{
    color:#64748b;
    font-size:13px;
}

.view-ad-btn{
    display:inline-block;
    padding:10px 22px;
    border:2px solid #2563eb;
    border-radius:12px;
    color:#2563eb;
    text-decoration:none;
    font-weight:600;
    transition:.3s;
}

.view-ad-btn:hover{
    background:#2563eb;
    color:#fff;
}


/* REAL ADS STYLE */

.lyon-ad-item-real{
    width:100% !important;
    float:none !important;
    clear:both !important;

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

    background:#f8fbff !important;
    border:1px solid #e5e7eb !important;
    border-radius:18px !important;

    padding:18px !important;
    margin-bottom:15px !important;

    box-shadow:0 4px 15px rgba(0,0,0,.04);
    transition:.3s ease;
}

.lyon-ad-item-real:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 25px rgba(0,0,0,.08);
}

.lyon-ad-item-real .ad-logo{
    width:70px;
    height:70px;
    border-radius:16px;
    overflow:hidden;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
}

.lyon-ad-item-real .ad-logo img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.lyon-ad-item-real .ad-info{
    flex:1;
    margin-left:20px;
}

.lyon-ad-item-real .ad-reward{
    min-width:120px;
    text-align:center;
}

.lyon-ad-item-real .ad-action{
    margin-left:20px;
}

.lyon-ad-item-real .ad-title{
    font-size:18px;
    font-weight:700;
    color:#0f172a;
    margin-bottom:8px;
}

.lyon-ad-item-real .ad-content{
    color:#64748b;
    font-size:14px;
}

.lyon-ad-item-real .ad-footer{
    margin-top:15px;
    background:#22c55e;
    color:#fff;
    text-align:center;
    border-radius:10px;
    padding:8px;
    font-weight:700;
}


.progress-info{
    margin-top:15px;
    font-size:16px;
    font-weight:600;
    color:#0f172a;
}

.progress-bar{
    width:100%;
    height:12px;
    background:#e2e8f0;
    border-radius:20px;
    overflow:hidden;
    margin:15px 0;
}

.progress-fill{
    width:100%;
    height:100%;
    background:linear-gradient(135deg,#2563eb,#3b82f6);
    border-radius:20px;
}

.progress-text{
    color:#64748b;
    font-size:14px;
    margin:0;
}

.info-item{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 0;
    color:#475569;
    font-size:15px;
    font-weight:500;
    border-bottom:1px solid #eef2f7;
}

.info-item:last-child{
    border-bottom:none;
}

/* REGISTER PAGE */

.lyon-register-container .widget-tbl td{
    border:none !important;
    background:transparent !important;
}

.lyon-register-container .widget-tbl{
    border-collapse:separate !important;
}

body{
    background:
        radial-gradient(circle at top right,
        rgba(66,133,244,.12) 0%,
        rgba(66,133,244,0) 40%),

        radial-gradient(circle at bottom left,
        rgba(33,150,243,.08) 0%,
        rgba(33,150,243,0) 35%),

        linear-gradient(
        135deg,
        #eef4ff 0%,
        #f7faff 50%,
        #edf5ff 100%);
}

body::before{
    content:'';
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    pointer-events:none;
    z-index:-1;

    background-image:
        radial-gradient(
            rgba(30,90,200,.08) 1px,
            transparent 1px
        );

    background-size:24px 24px;
}
body::after{
    content:'';
    position:fixed;
    top:-250px;
    right:-250px;

    width:700px;
    height:700px;

    border-radius:50%;

    background:
        rgba(52,118,235,.06);

    pointer-events:none;
    z-index:-1;
}

/* =========================================
   LYONCLICKADS BLOG
========================================= */

.blog-wrapper{
    width:95%;
    max-width:1400px;
    margin:40px auto;
}

/* HERO */

.blog-hero{
    background:linear-gradient(135deg,#0b2f8a,#2f64ff);
    border-radius:25px;
    padding:50px;
    text-align:center;
    color:#fff;
    box-shadow:0 15px 40px rgba(0,0,0,.15);
    margin-bottom:35px;
}

.blog-hero-icon{
    font-size:50px;
    margin-bottom:15px;
}

.blog-hero h1{
    font-size:42px;
    font-weight:700;
    margin:0;
    color:#fff;
}

.blog-hero p{
    margin-top:15px;
    font-size:18px;
    color:rgba(255,255,255,.9);
    max-width:700px;
    margin-left:auto;
    margin-right:auto;
}

/* CATEGORIES */

.blog-categories{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:15px;
    margin-bottom:40px;
}

.blog-categories a{
    background:#fff;
    color:#2b4fd8;
    padding:12px 22px;
    border-radius:30px;
    text-decoration:none;
    font-weight:600;
    box-shadow:0 4px 15px rgba(0,0,0,.08);
    transition:.3s;
}

.blog-categories a:hover,
.blog-categories a.active{
    background:#2b4fd8;
    color:#fff;
    transform:translateY(-2px);
}

/* MAIN LAYOUT */

.blog-container{
    overflow:hidden;
}

.blog-posts{
    width:70%;
    float:left;
    background:#ffffff;
    border-radius:18px;
    padding:25px;
    box-shadow:0 5px 25px rgba(0,0,0,.05);
}

.blog-sidebar{
    width:25%;
    float:right;
}

/* ARTICLES */

.blog-posts{
    width:70%;
    float:left;
}

.blog-card{
    width:100%;
    margin-bottom:25px;
}

.blog-card{
    background:#fff;
    border-radius:20px;
    padding:30px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    transition:.3s;
}

.blog-card:hover{
    transform:translateY(-8px);
    box-shadow:0 20px 40px rgba(0,0,0,.12);
}

.blog-image{
    width:70px;
    height:70px;
    border-radius:20px;
    background:linear-gradient(135deg,#2f64ff,#0b2f8a);
    color:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:30px;
    margin-bottom:20px;
}

.blog-card h2{
    font-size:24px;
    margin:0 0 15px 0;
    color:#143b86;
}

.blog-card p{
    color:#666;
    line-height:1.6;
    margin-bottom:20px;
}

.blog-card a{
    color:#2f64ff;
    text-decoration:none;
    font-weight:700;
}

/* SIDEBAR */

.blog-sidebar{
    display:flex;
    flex-direction:column;
    gap:25px;
}

.sidebar-box{
    background:#fff;
    border-radius:20px;
    padding:25px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.sidebar-box h3{
    margin-top:0;
    margin-bottom:20px;
    color:#143b86;
    font-size:22px;
}

.sidebar-box input{
    width:100%;
    padding:14px;
    border-radius:12px;
    border:1px solid #ddd;
    font-size:14px;
}

.sidebar-box ul{
    list-style:none;
    padding:0;
    margin:0;
}

.sidebar-box ul li{
    padding:10px 0;
    border-bottom:1px solid #eee;
    color:#555;
}

/* RESPONSIVE */

@media(max-width:1000px){

    .blog-container{
        grid-template-columns:1fr;
    }

    .blog-posts{
        grid-template-columns:1fr;
    }

    .blog-hero h1{
        font-size:32px;
    }

}
.blog-title{
    text-align:center;
    margin:40px 0;
}

.blog-title h1{
    font-size:54px;
    font-weight:700;
    color:#111;
    margin-bottom:10px;
}

.blog-title h1 span{
    color:#1f5cff;
}

.blog-title p{
    color:#666;
    font-size:20px;
}

.blog-line{
    width:80px;
    height:4px;
    background:#1f5cff;
    margin:20px auto;
    border-radius:20px;
}

/* =========================================
   LYONCLICKADS BLOG FINAL DESIGN
========================================= */

.blog-layout{
    display:flex;
    gap:35px;
    margin-top:40px;
    align-items:flex-start;
}

.blog-posts{
    width:1600px;
}

.blog-sidebar{
    width:30%;
}

/* FEATURED */

.featured-post{
    display:flex;
    background:#fff;
    border-radius:15px;
    overflow:hidden;
    box-shadow:0 5px 25px rgba(0,0,0,.08);
    margin-bottom:30px;
}

.featured-image{

    width:350px;
    min-height:260px;

   

    background-size:cover;
    background-position: right;
    background-repeat:no-repeat;

    display:flex;
    flex-direction:column;

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

    padding-top:30px;

    border-radius:12px 0 0 12px;
}

.featured-image span{
    color:#4da3ff;
}

.featured-content{
    flex:1;
    padding:40px;
}

.featured-badge{
    background:#e7f0ff;
    color:#1f5cff;
    padding:6px 12px;
    border-radius:6px;
    font-size:12px;
    font-weight:700;
}

.featured-content h2{
    font-size:42px;
    margin:20px 0;
    color:#111;
}

.post-meta{
    color:#777;
    margin-bottom:20px;
    font-size:14px;
}

.featured-content p{
    color:#555;
    line-height:1.8;
    margin-bottom:25px;
}

/* BUTTON */

.read-btn{
    background:#1f5cff;
    color:#fff !important;
    padding:14px 28px;
    border-radius:8px;
    text-decoration:none;
    display:inline-block;
    font-weight:600;
}

/* ARTICLES */

.article-item{
    display:flex;
    background:#fff;
    border-radius:15px;
    overflow:hidden;
    box-shadow:0 5px 20px rgba(0,0,0,.06);
    margin-bottom:25px;
    border-bottom:1px solid #ececec;
}

.article-thumb{

    width:300px;
    min-height:180px;

    background:
        linear-gradient(
            rgba(0,0,0,.15),
            rgba(0,0,0,.15)
        ),
        url('https://i.imgur.com/e0yAg5n.png');

    background-size:cover;
    background-position: right;
    background-repeat:no-repeat;

    color:#fff;

    display:flex;

    align-items:flex-start;

    justify-content:center;

    text-align:center;

    padding-top:35px;

    font-size:22px;

    font-weight:800;

    line-height:1.5;

    border-radius:12px 0 0 12px;

    letter-spacing:1px;
}

.article-thumb.purple{
    background:linear-gradient(135deg,#40196d,#8f5cff);
    background: linear-gradient(rgba(0, 0, 0, .15), rgba(0, 0, 0, .15)), url(https://i.imgur.com/SJwit8C.png);
    background-size: cover;
    background-position: right;
    background-repeat: no-repeat
}

.article-content{
    flex:1;
    padding:35px;
}

.article-content h3{
    font-size:32px;
    margin-bottom:15px;
    color:#111;
}

.article-content p{
    color:#666;
    line-height:1.7;
    margin-bottom:15px;
}

.article-content a{
    color:#1f5cff;
    font-weight:600;
    text-decoration:none;
}
.article-thumb span{
    color:#4ea1ff;
}

/* SIDEBAR */

.sidebar-box{
    background:#fff;
    border-radius:15px;
    padding:25px;
    margin-bottom:25px;
    box-shadow:0 5px 20px rgba(0,0,0,.06);
}

.sidebar-box h3{
    color:#002b7f;
    font-size:20px;
    margin-bottom:20px;
}

.sidebar-box input{
    width:100%;
    padding:15px;
    border:1px solid #ddd;
    border-radius:10px;
}

.cat-list{
    list-style:none;
    padding:0;
    margin:0;
}

.cat-list li{
    padding:14px 0;
    border-bottom:1px solid #eee;
    color:#444;
}

.popular-posts{
    list-style:none;
    padding:0;
    margin:0;
}

.popular-posts li{
    padding:12px 0;
    border-bottom:1px solid #eee;
}

/* JOIN BOX */

.join-box{
    text-align:center;
}

.join-box p{
    color:#666;
    line-height:1.7;
    margin:20px 0;
}

.join-btn{
    display:block;
    background:#1f5cff;
    color:#fff !important;
    padding:16px;
    border-radius:10px;
    text-decoration:none;
    font-weight:700;
}

/* PAGINATION */

.blog-pagination{
    margin-top:40px;
}

.blog-pagination a{
    display:inline-block;
    padding:10px 15px;
    background:#fff;
    border-radius:8px;
    margin-right:8px;
    box-shadow:0 3px 10px rgba(0,0,0,.05);
}

.blog-pagination a.active{
    background:#1f5cff;
    color:#fff;
}

/* RESPONSIVE */

@media(max-width:1200px){

    .blog-layout{
        flex-direction:column;
    }

    .blog-posts,
    .blog-sidebar{
        width:100%;
    }

    .featured-post,
    .article-item{
        flex-direction:column;
    }

    .featured-image,
    .article-thumb{
        width:100%;
    }
}
/* OFFERWALLS */

.article-thumb.offerwall{
    background:linear-gradient(
        135deg,
        #6b3f00,
        #ff8c00
    );
    background: linear-gradient(rgba(0, 0, 0, .15), rgba(0, 0, 0, .15)), url(https://i.imgur.com/odSQt0S.png);
    background-size: cover;
    background-position: right;
    background-repeat: no-repeat
}

/* SCAM */

.article-thumb.scam{
    background:linear-gradient(
        135deg,
        #001f4d,
        #0066cc
    );
    background: linear-gradient(rgba(0, 0, 0, .15), rgba(0, 0, 0, .15)), url(https://i.imgur.com/eOa5mkQ.png);
    background-size: cover;
    background-position: right;
    background-repeat: no-repeat
}

/* LYON NEWS */

.article-thumb.lyonnews{
    background:linear-gradient(
        135deg,
        #000814,
        #0047ff
    );
    background: linear-gradient(rgba(0, 0, 0, .15), rgba(0, 0, 0, .15)), url(https://i.imgur.com/0Dgg56l.png);
    background-size: cover;
    background-position: right;
    background-repeat: no-repeat
}
/* POPULAR ARTICLES */

.popular-item{
    display:flex;
    gap:12px;
    margin-bottom:18px;
    padding-bottom:18px;
    border-bottom:1px solid #ececec;
}

.popular-thumb{
    width:70px;
    height:50px;
    border-radius:8px;
    color:#fff;
    font-weight:700;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    font-size:14px;
}

.popular-thumb.blue{
    background:linear-gradient(135deg,#001a5e,#0d63ff);
}

.popular-thumb.purple{
    background:linear-gradient(135deg,#40196d,#8f5cff);
}

.popular-thumb.cyan{
    background:linear-gradient(135deg,#005a87,#00a8ff);
}

.popular-thumb.orange{
    background:linear-gradient(135deg,#6b3f00,#ff8c00);
}

.popular-thumb.lyon{
    background:linear-gradient(135deg,#000814,#0047ff);
}

.popular-info{
    flex:1;
}

.popular-info strong{
    display:block;
    color:#111;
    font-size:14px;
    line-height:1.4;
    margin-bottom:5px;
}

.popular-info span{
    color:#888;
    font-size:12px;
}
/* CATEGORIES */

.cat-list{
    list-style:none;
    margin:0;
    padding:0;
}

.cat-list li{
    display:flex;
    align-items:center;
    padding:14px 0;
    border-bottom:1px solid #ececec;
    transition:.2s;
}

.cat-list li:hover{
    padding-left:8px;
}

.cat-icon{
    width:30px;
    font-size:18px;
}

.cat-name{
    flex:1;
    color:#333;
    font-weight:500;
}

.cat-count{
    background:#edf3ff;
    color:#1f5cff;
    padding:4px 10px;
    border-radius:8px;
    font-size:12px;
    font-weight:700;
}

/* FEATURED LOGO */

.featured-logo{
    width:110px;
    margin-bottom:20px;
    display:block;
}

.featured-text{

    text-align:center;

    color:#ffffff;

    font-size:35px;

    font-weight:800;

    line-height:1.4;
}

.featured-text span{
    color:#4ea1ff;
}

/* ARTICLE LOGO */

.article-logo{
    width:95px;
    display:block;
    margin:0 auto 15px auto;
}

.lyon-news-text{
    text-align:center;
    line-height:1.5;
    font-size:18px;
    font-weight:700;
}

.featured-thumb{
    width:320px;
    min-height:260px;

    background:
        linear-gradient(
            rgba(0,0,0,.15),
            rgba(0,0,0,.15)
        ),
        url('../images/blog/ptc-feature.jpg');

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

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

    border-radius:12px 0 0 12px;
    position:relative;
}

.featured-overlay{
    width:100%;
    padding-top:35px;
    text-align:center;
}

.featured-overlay h2{
    color:#ffffff;
    font-size:26px;
    font-weight:800;
    line-height:1.35;
    letter-spacing:1px;
}

.featured-overlay span{
    color:#4ea1ff;
}

body.blog-article {
    background: #f5f7fb;
}

.article-container {
    max-width: 1500px;
    margin: 40px auto;
    background: #ffffff;
    border-radius: 18px;
    padding: 50px;
    box-shadow: 0 10px 40px rgba(0,0,0,.08);
}

/* ===================================================
   BLOG ARTICLE
=================================================== */

.article-page{
    max-width:1300px;
    margin:40px auto;
    padding:0 20px;
}

.article-container{
    background:#fff;
    border-radius:18px;
    padding:40px;
    box-shadow:0 5px 30px rgba(0,0,0,.08);
}

.article-breadcrumb{
    font-size:14px;
    color:#777;
    margin-bottom:15px;
}

.article-breadcrumb a{
    color:#3b82f6;
    text-decoration:none;
}

.article-featured{
    display:inline-block;
    background:#2563eb;
    color:#fff;
    padding:6px 12px;
    border-radius:6px;
    font-size:12px;
    font-weight:700;
    margin-bottom:20px;
}

.article-title{
    font-size:48px;
    font-weight:800;
    color:#111827;
    margin-bottom:15px;
}

.article-meta{
    color:#6b7280;
    font-size:15px;
    margin-bottom:30px;
}

.article-hero{
    height:320px;
    border-radius:16px;
    overflow:hidden;
    background:linear-gradient(135deg,#020f2a,#000e2a);
    margin-bottom:40px;
}

.hero-placeholder{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 60px;
    color: white;
    font-size: 60px;
    font-weight: 800;
    line-height: 1.1;
    background: linear-gradient(rgba(0, 0, 0, .10), rgba(0, 0, 0, .10)), url(https://i.imgur.com/OxBLQZk.png);
    background-size: 70%;
    background-position: right;
    background-repeat: no-repeat;
    justify-content: flex-start;
    padding-top: 30px;
    border-radius: 12px 0 0 12px;
}

.hero-placeholder span{
    color:#4ea5ff;
}

.article-section{
    font-size:18px;
    line-height:1.8;
    color:#374151;
}

.article-container h2{
    margin-top:45px;
    margin-bottom:20px;
    font-size:38px;
    color:#0f172a;
}

.ptc-steps{
    display:flex;
    justify-content:space-between;
    gap:15px;
    margin:35px 0;
}

.step-box{
    flex:1;
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:14px;
    padding:25px;
    text-align:center;
    box-shadow:0 3px 15px rgba(0,0,0,.05);
    transition:.2s;
}

.step-box:hover{
    transform:translateY(-4px);
}

.step-box strong{
    display:block;
    margin-top:10px;
    font-size:16px;
}
.earning-list{
    columns:2;
    column-gap:60px;
    margin:30px 0;
}

.earning-list li{
    margin-bottom:15px;
    font-size:18px;
}
.article-alert{
    background:#eefcf0;
    border-left:5px solid #22c55e;
    padding:25px;
    border-radius:12px;
    margin:35px 0;
    font-size:18px;
}
.article-mission{
    background:#eef5ff;
    border-left:5px solid #2563eb;
    padding:25px;
    border-radius:12px;
    margin:35px 0;
    font-size:18px;
}
.article-share{
    margin-top:50px;
    display:flex;
    align-items:center;
    gap:15px;
    font-weight:600;
}

.article-share span{
    background:#2563eb;
    color:#fff;
    padding:10px 18px;
    border-radius:50px;
    cursor:pointer;
}
.article-back{
    margin-top:40px;
}

.article-back a{
    color:#2563eb;
    font-weight:700;
    text-decoration:none;
}
.earning-list{
    columns:2;
    column-gap:60px;
    list-style:none;
    padding:0;
}

.earning-list li{
    margin:14px 0;
    font-size:18px;
    font-weight:500;
}

.earning-list li:before{
    content:"✓";
    background:#2563eb;
    color:#fff;
    width:24px;
    height:24px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    margin-right:12px;
}
.earning-wallet{
    position:absolute;
    right:350px;
    margin-top:-170px;
    width:180px;
    height:140px;
}

.wallet-main{
    width:120px;
    height:85px;
    background:linear-gradient(135deg,#2563eb,#4f8cff);
    border-radius:18px;
    position:absolute;
    bottom:0;
    left:0;
}

.wallet-money{
    width:70px;
    height:45px;
    background:#8bd17c;
    position:absolute;
    top:0;
    left:50px;
    border-radius:8px;
    transform:rotate(-12deg);
}

.wallet-coin{
    width:45px;
    height:45px;
    background:#ffcc33;
    border-radius:50%;
    position:absolute;
    bottom:10px;
    right:0;
}


/* STEPS */

.ptc-steps{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin:40px 0;
}

.step-box{
    background:#fff;
    border:1px solid #ececec;
    border-radius:15px;
    padding:25px;
    text-align:center;
    width:170px;
    box-shadow:0 4px 15px rgba(0,0,0,.05);
}

.step-icon{
    width:60px;
    height:60px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 15px;
    font-size:28px;
    font-weight:700;
}

.blue{
    
    color:#2f6bff;
}

.green{
    background:#ecfff0;
    color:#3cae47;
}

.purple{
    background:#f3ecff;
    color:#7a3cff;
}

.orange{
    background:#fff3e8;
    color:#f08c00;
}

.money{
    background:#ecfff0;
    color:#22aa22;
}

.step-arrow{
    font-size:30px;
    color:#cfcfcf;
    font-weight:bold;
}

/* =========================================
   LYON SIDEBAR V2
========================================= */

.lyon-sidebar{

    position:fixed;

    top:0;

    left:0;

    bottom:0;

    width:280px;
    height:100vh;
    overflow-y:auto;

    z-index:9999;

    transition:all .30s ease;

}

.lyon-main-content{

    margin-left:300px;

    transition:margin-left .30s ease;

    min-width:0;
    background-color: #ffffff;
    padding: 10px;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15) !important;

}

body.sidebar-collapse .lyon-main-content{

   margin-left: 150px;
    background-color
: #ffffff;
    padding: 10px;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15) !important;
    border-radius: 20px;
   

;

}

/*=============================
SCROLL DEL MENÚ
=============================*/

.lyon-menu-scroll{

    flex:1;

    overflow-y:auto;

    overflow-x:hidden;

    min-height:0;

}

/* Scroll moderno */

.lyon-menu-scroll::-webkit-scrollbar{

    width:6px;

}

.lyon-menu-scroll::-webkit-scrollbar-thumb{

    background:#2f65d9;

    border-radius:10px;

}

.lyon-menu-scroll::-webkit-scrollbar-track{

    background:transparent;

}



/*====================================================
BLOG ARTICLE 2026
====================================================*/

.article-container{
    max-width:1100px;
    margin:40px auto;
    padding:0 20px;
}

.article-hero{
    margin:25px 0 35px;
}

.article-hero img{
    width:100%;
    display:block;
    border-radius:16px;
    box-shadow:0 12px 35px rgba(0,0,0,.12);
}

.hero-placeholder{
    height:420px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:16px;
    background:linear-gradient(135deg,#0b63ff,#2f8cff);
    color:#fff;
    font-size:38px;
    font-weight:700;
    text-align:center;
}

.article-title{
    font-size:40px;
    font-weight:700;
    margin:20px 0;
    line-height:1.2;
}

.article-meta{
    color:#777;
    font-size:15px;
    margin-bottom:25px;
}

.article-section{
    font-size:17px;
    line-height:1.9;
    color:#444;
}

.article-section img{
    max-width:100%;
    height:auto;
    border-radius:12px;
    margin:20px 0;
}

.article-section h2,
.article-section h3{
    margin-top:35px;
    margin-bottom:15px;
}

.article-share{
    margin-top:50px;
    padding:25px;
    background:#f8f9fc;
    border-radius:14px;
}

.share-buttons{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:18px;
}

.share-buttons a{
    background:#1f5eff;
    color:#fff;
    text-decoration:none;
    padding:10px 18px;
    border-radius:8px;
    transition:.25s;
}

.share-buttons a:hover{
    transform:translateY(-2px);
    opacity:.9;
}

.related-wrapper{
    margin-top:60px;
}

.related-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:25px;
    margin-top:25px;
}

.related-card{
    background:#fff;
    border-radius:14px;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    transition:.25s;
}

.related-card:hover{
    transform:translateY(-5px);
}

.related-card img{
    width:100%;
    height:190px;
    object-fit:cover;
    display:block;
}

.related-card h3{
    font-size:20px;
    margin:18px;
}

.related-card p{
    margin:0 18px 18px;
    color:#666;
    line-height:1.7;
}

.related-card a{
    display:inline-block;
    margin:0 18px 20px;
    color:#1f5eff;
    text-decoration:none;
    font-weight:600;
}

.article-back{
    margin-top:55px;
    text-align:center;
}

.article-back a{
    display:inline-block;
    background:#1f5eff;
    color:#fff;
    text-decoration:none;
    padding:14px 30px;
    border-radius:8px;
    transition:.25s;
}

.article-back a:hover{
    transform:translateY(-2px);
}

@media(max-width:768px){

    .article-title{
        font-size:30px;
    }

    .hero-placeholder{
        height:260px;
        font-size:26px;
    }

}

/*====================================================
LANGUAGE DROPDOWN
====================================================*/

.language-selector{
    position:relative;
}

.language-selector .language-dropdown{

    display:none;

    position:absolute;

    top:100%;

    left:0;

    min-width:190px;

    background:#ffffff;

    border-radius:10px;

    box-shadow:0 10px 30px rgba(0,0,0,.15);

    padding:8px 0;

    z-index:9999;

}

.language-selector:hover .language-dropdown{

    display:block;

}

.language-dropdown li{

    list-style:none;

    margin:0;

    padding:0;

}

.language-dropdown li a{

    display:block;

    padding:10px 18px;

    color:#222;

    text-decoration:none;

    font-size:14px;

    transition:.2s;

}

.language-dropdown li a:hover{

    background:#f3f6ff;

    color:#2563eb;

}