html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}

body {
    line-height: 1;
}

ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
    display: block;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* Custom Cursors */
body {
    width: 100%;
    background: url(../img/background-top.jpg) center top no-repeat;
    background-color: #160b03;
    font-family: 'Open sans', 'Candara', 'Verdana';
    font-size: 14px;
    color: #fff;
    min-height: 100vh;
    overflow-x: hidden !important;
    cursor: url('../img/cursor.cur'), auto;
}

/* Cursor for clickable elements */
a, button, .button, input[type="button"], input[type="submit"], .clickable, .fast-link, .menu a, .reg-block a {
    cursor: url('../img/cursor-get.cur'), pointer !important;
}

/* Cursor for when holding/dragging */
a:active, button:active, .button:active, input[type="button"]:active, input[type="submit"]:active, .dragging {
    cursor: url('../img/cursor-hold.cur'), grabbing !important;
}

.add,
.list-news li,
.list-news .button-more,
.top-list,
.x-buttons input,
.fast-link,
.button-buy,
.button-market,
.to-the-top,
.start-video {
    cursor: pointer;
}

a {
    transition: all 0.3s ease;
    text-decoration: none;
    color: #ff9c00;

}
a:hover{
    color: #fff;
    text-decoration: none;
}
.top-pannel {
    border-bottom: 1px solid #b3b4b8;
}

:focus {
    outline: none;
}

::-webkit-input-placeholder {
    color: #6d4a20;
    text-align: center;
}

::-moz-placeholder {
    color: #6d4a20;
}

:-moz-placeholder {
    color: #6d4a20;
}

:-ms-input-placeholder {
    color: #6d4a20;
}

.wrapper {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}
  
.flex {
    display: flex;
}

.flex-c {
    display: flex;
    align-items: center;
}

.flex-s {
    display: flex;
    justify-content: space-between;
}

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

.flex-c-c {
    display: flex;
    justify-content: center;
    align-items: center;
}

.top-panel {
    width: 100%;
    top: 0px;
    z-index: 10;
    height: 80px;
    background-color: rgb(37 22 15 / 80%);
}

.top-panel-block {
    max-width: 1480px;
    margin: 0 auto;
    top: 0px;
    z-index: 10;
    height: 80px;
}

.logo-icon {
    margin-left: -80px;
}

.logo-icon img {
    transition: 0.3s;
    margin-right: 45px;
}

.logo-icon img:hover {
    filter: brightness(1.1);
}

.logo{
  position: absolute;
  top: 210px;
  left: -10px;
  transition: all 0.3s ease;
  animation: float 3s ease-in-out infinite, glow-pulse 4s ease-in-out infinite;
}

@keyframes float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0px);
  }
}

@keyframes glow-pulse {
  0% {
    filter: drop-shadow(0px 0px 8px rgba(255, 169, 68, 0)) drop-shadow(0px 0px 15px rgba(255, 169, 68, 0));
  }
  50% {
    filter: drop-shadow(0px 0px 8px rgba(255, 169, 68, 0.4)) drop-shadow(0px 0px 15px rgba(255, 169, 68, 0.3));
  }
  100% {
    filter: drop-shadow(0px 0px 8px rgba(255, 169, 68, 0)) drop-shadow(0px 0px 15px rgba(255, 169, 68, 0));
  }
}

.logo:hover {
    filter: brightness(1.2);
    transition: all 0.3s ease;
}

.button-btn {
  display: none;
  cursor: pointer;
}

.button-btn span {
  display: block;
  width: 30px;
  height: 3px;
  background: rgba(255, 255, 255, 0.9);
  margin: 5px 0px;
}

.menu {
  display: flex;
}

.menu li {
  margin-right: 52px;
  padding-left: 45px;
}


.menu li:first-child a:before{
  display: none;
}

.menu a {
  color: #fff;
  font-size: 15px;
  text-transform: uppercase;
  display: block;
  position: relative;
}

.menu li:hover a {
  color: #ff9c00;
}

.menu .active a {
  color: #ff9c00;
  font-weight: 200;
}

.menu li:nth-child(1) {
  height: 45px;
  padding-top: 17px;
  background: url(../img/icon-menu-1.png) no-repeat;
}

.menu li:nth-child(2) {
  height: 45px;
  padding-top: 17px;
  background: url(../img/icon-menu-2.png) no-repeat;
  transition: 0.2s;
}

.menu li:nth-child(2):hover{
  margin-top: -5px;
  transition: 0.2s;
}

.menu li:nth-child(3){
  height: 45px;
  padding-top: 17px;
  background: url(../img/icon-menu-3.png) no-repeat;
  transition: 0.2s;
}

.menu li:nth-child(3):hover{
  margin-top: -5px;
  transition: 0.2s;
}

.menu li:nth-child(4){
  height: 45px;
  padding-top: 17px;
  background: url(../img/icon-menu-4.png) no-repeat;
  transition: 0.2s;
}

.menu li:nth-child(4):hover{
  margin-top: -5px;
  transition: 0.2s;
}

.menu li:nth-child(5){
  height: 45px;
  padding-top: 17px;
  background: url(../img/icon-menu-5.png) no-repeat;
  transition: 0.2s;
}

.menu li:nth-child(5):hover{
  margin-top: -5px;
  transition: 0.2s;
}

.menu li:nth-child(6){
  height: 45px;
  padding-top: 17px;
  background: url(../img/icon-menu-6.png) no-repeat;
  transition: 0.2s;
}

.menu li:nth-child(6):hover{
  margin-top: -5px;
  transition: 0.2s;
}

.menu li:nth-child(7){
  height: 45px;
  padding-top: 17px;
  background: url(../img/icon-menu-5.png) no-repeat;
  transition: 0.2s;
}

.menu li:nth-child(7):hover{
  margin-top: -5px;
  transition: 0.2s;
}

.menu li:nth-child(8){
  height: 45px;
  padding-top: 17px;
  background: url(../img/icon-menu-3.png) no-repeat;
  transition: 0.2s;
}

.menu li:nth-child(8):hover{
  margin-top: -5px;
  transition: 0.2s;
}

.topPanel-wrapper_right{
    margin-left: 80px; 
}


.topPanel-wrapper_right span {
 margin: 0px 28px;
 text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4); 
}

button, .button {
 -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease; 
  cursor: pointer; 
  background-image: url(../img/button.jpg); 
  background-repeat: no-repeat; 
  background-size: cover; 
  padding: 19px 45px; 
  border: none; 
  color: #fff; 
  text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.2); 
  position: relative; 
  z-index: 1; 
  text-align: center; 
  text-transform: uppercase; 
  font-family: Candara, Calibri, Segoe, Segoe UI, Optima, Arial, sans-serif; 
  font-size: 15px;  
  -webkit-box-shadow: 0px 10px 15px 0px rgba(0, 0, 0, 0.2); 
  box-shadow: 0px 10px 15px 0px rgba(0, 0, 0, 0.2); 
}
button:hover, .button:hover {
 -webkit-filter: brightness(120%); 
 filter: brightness(120%);
 box-shadow: 0 10px 26px -6px rgb(255 156 0 / 50%); 
}

.button { display: inline-block; text-decoration: none; }

a.sign-in:hover{
    color: #face01;
    text-decoration: underline;
}

.header {
    min-height: 675px;
    position: relative;
    flex-direction: column;
    padding: 0 50px;
    overflow: hidden;
}

/* Fire Sparks Container */
.fire-sparks {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
    overflow: hidden;
}

/* Individual Spark Particles */
.spark {
    position: absolute;
    width: 4px;
    height: 4px;
    background: radial-gradient(circle, #ffaa00 0%, #ff6600 70%, transparent 100%);
    border-radius: 50%;
    box-shadow: 0 0 6px #ff6600, 0 0 12px #ff3300;
    animation: sparkFloat 6s linear infinite;
}

.spark:nth-child(1) {
    left: 10%;
    animation-delay: 0s;
    animation-duration: 8s;
}

.spark:nth-child(2) {
    left: 20%;
    animation-delay: 1s;
    animation-duration: 7s;
}

.spark:nth-child(3) {
    left: 30%;
    animation-delay: 2s;
    animation-duration: 9s;
}

.spark:nth-child(4) {
    left: 40%;
    animation-delay: 0.5s;
    animation-duration: 6s;
}

.spark:nth-child(5) {
    left: 50%;
    animation-delay: 3s;
    animation-duration: 8s;
}

.spark:nth-child(6) {
    left: 60%;
    animation-delay: 1.5s;
    animation-duration: 7s;
}

.spark:nth-child(7) {
    left: 70%;
    animation-delay: 2.5s;
    animation-duration: 6s;
}

.spark:nth-child(8) {
    left: 80%;
    animation-delay: 4s;
    animation-duration: 9s;
}

.spark:nth-child(9) {
    left: 90%;
    animation-delay: 0.8s;
    animation-duration: 7s;
}

.spark:nth-child(10) {
    left: 15%;
    animation-delay: 3.5s;
    animation-duration: 8s;
}

@keyframes sparkFloat {
    0% {
        bottom: -10px;
        opacity: 0;
        transform: translateX(0px) scale(0.5);
    }
    10% {
        opacity: 1;
        transform: translateX(10px) scale(1);
    }
    90% {
        opacity: 0.8;
        transform: translateX(-15px) scale(0.8);
    }
    100% {
        bottom: 100vh;
        opacity: 0;
        transform: translateX(20px) scale(0.2);
    }
}

/* Floating Embers */
.ember {
    position: absolute;
    width: 3px;
    height: 8px;
    background: linear-gradient(to top, #ff3300, #ff6600, #ffaa00);
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    box-shadow: 0 0 8px #ff6600;
    animation: emberFloat 12s linear infinite;
}

.ember:nth-child(11) {
    left: 25%;
    animation-delay: 1s;
}

.ember:nth-child(12) {
    left: 45%;
    animation-delay: 3s;
}

.ember:nth-child(13) {
    left: 65%;
    animation-delay: 5s;
}

.ember:nth-child(14) {
    left: 85%;
    animation-delay: 2s;
}

.ember:nth-child(15) {
    left: 5%;
    animation-delay: 4s;
}

@keyframes emberFloat {
    0% {
        bottom: -10px;
        opacity: 0;
        transform: translateX(0px) rotate(0deg);
    }
    20% {
        opacity: 1;
    }
    80% {
        opacity: 0.6;
    }
    100% {
        bottom: 100vh;
        opacity: 0;
        transform: translateX(50px) rotate(360deg);
    }
}

.server-time {
    position: absolute;
    padding-top: 54px;
    text-align: center;
    align-self: flex-end;
    text-transform: uppercase;
    font-size: 14px;
    width: 393px;
    font-weight: bold;
    height: 129px;
    right: 0;
    bottom: -55px;
    color: #ff1e1e;
    background: url(../img/fon-time.png) no-repeat;
    text-shadow: 0px 0px 25px rgba(255, 0, 0, 1); 
}

.server-time span {
    font-size: 14px;
    color: #fff;
}
  
.content{
    position: relative;
    z-index: 9;
}

.fast-button {
    margin-top: 40px;
}

/* icon login*/

.reg-block {
  background: url(../img/fon-icon-login.png) no-repeat;
  width: 241px;
  height: 130px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  margin-right: auto;
}

.reg-block a {
  display: flex;
  flex-direction: column;
  width: 130px;
  color: #fff;
  text-align: center;
  padding-top: 10px;
}

.reg-block a {
  font-size: 12px;
  margin-top: 3px;
  text-transform: uppercase;
}

.b-icons-text{
   font-size: 18px;
   text-transform: none ;
   line-height: 26px;
}

.reg-block a:hover {
  color: #fff;
}
.reg-block a:hover .b-icons {
  filter: brightness(120%);
}
.reg-block .b-icons {
  width: 40px;
  height: 39px;
  margin: 0 auto;
  margin-bottom: 10px;
  transition: .2s all ease;
  filter: hue-rotate(345deg);
}
.reg-block .log_in {
  background: url(../img/icon-log_in.png) center no-repeat;
}
.reg-block .sign_up {
  background: url(../img/icon-sign_up.png) center no-repeat;
}
.reg-block .logout {
  background: url(../img/icon-exit.png) center no-repeat;
}

/* end icon login*/

.btn-download {
    position: relative;
    width: 350px;
    height: 120px;
    background: url('../img/bg-download.jpg') 0 0 no-repeat;
    transition: 0.5s;
}

.btn-download::before {
    content: "DESCARGAR";
    position: absolute;
    top: 33px;
    left: 53%;
    transform: translateX(-50%);
    color: #5c320f;
    font-family: 'Open sans', sans-serif;
    font-size: 23px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 1px 1px 0px rgb(255 248 188 / 35%), 
                 0px 0px 8px rgba(255, 248, 188, 0.6),
                 0px 0px 15px rgba(255, 156, 0, 0.4);
}

.btn-download:hover {
    filter: brightness(1.2);
}

.btn-download span {
    position: absolute;
    bottom: 38px;
    left: 120px; 
    transition: 0.5s;
    color: #5c320f;
    font-family: 'Open sans';
    font-size: 13px;
    text-shadow: 1px 1px 0px rgb(255 248 188 / 35%);
    font-weight: 600;
}

/* Donation Button - Same design as download */
.btn-donation {
    position: relative;
    width: 350px;
    height: 120px;
    background: url('../img/bg-donate.jpg') 0 0 no-repeat;
    transition: 0.5s;
    margin-left: -200px; /* Posicionado más a la izquierda */
}

.btn-donation::before {
    content: "DONACIONES";
    position: absolute;
    top: 33px;
    left: 53%;
    transform: translateX(-50%);
    color: #5c320f;
    font-family: 'Open sans', sans-serif;
    font-size: 23px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 1px 1px 0px rgb(255 248 188 / 35%), 
                 0px 0px 8px rgba(255, 248, 188, 0.6),
                 0px 0px 15px rgba(255, 156, 0, 0.4);
}

.btn-donation span {
    position: absolute;
    bottom: 38px;
    left: 120px; 
    transition: 0.5s;
    color: #5c320f;
    font-family: 'Open sans';
    font-size: 13px;
    text-shadow: 1px 1px 0px rgb(255 248 188 / 35%);
    font-weight: 600;
}

.status-block {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: -20px;
    margin-right: 100px;
}

.status-block>div {
    position: relative;
    width: 190px;
    height: 120px;
    background: url(../img/bg-server.jpg) 0 0 no-repeat;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.5),
                inset 0px 1px 0px rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.status-block>div:hover {
    transform: translateY(-1px);
    box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.6),
                inset 0px 1px 0px rgba(255, 255, 255, 0.2);
}

.radial-stat {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    position: relative;
}

.status-block>div::before {
    content: '';
    position: absolute;
    width: 100px;
    height: 37px;
    top: -15px;
    z-index: 2;
}

.server-1::before {
    background: url('../img/online-ofline-icons.png') 0 0 no-repeat;
}

.server-2::before {
    background: url('../img/online-ofline-icons.png') -100px 0 no-repeat;
}

.circle-online {
    width: 110px;
    height: 110px;
    text-align: center;
    position: relative;
    display: inline-block;
    transition: all 0.3s ease;
}

.circle-online:hover {
    transform: scale(1.02);
}
  
.serverInfo {
    position: absolute;
    width: 110px;
    height: 110px;
    padding-top: 25px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    z-index: 10;
}

.serverInfo span {
    display: block;
    width: 100%;
    text-align: center;
    position: relative;
    line-height: 18px;
}

.serverInfo__name {
    font-size: 13px;
    color: #fff;
    margin-bottom: 6px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    text-shadow: 0px 0px 8px rgba(255, 255, 255, 0.4),
                 0px 0px 15px rgba(255, 156, 0, 0.3),
                 2px 2px 4px rgba(0, 0, 0, 0.8);
    animation: nameGlow 3s ease-in-out infinite;
    transition: all 0.3s ease;
}

@keyframes nameGlow {
    0% {
        text-shadow: 0px 0px 8px rgba(255, 255, 255, 0.4),
                     0px 0px 15px rgba(255, 156, 0, 0.3),
                     2px 2px 4px rgba(0, 0, 0, 0.8);
    }
    50% {
        text-shadow: 0px 0px 12px rgba(255, 255, 255, 0.6),
                     0px 0px 20px rgba(255, 156, 0, 0.5),
                     0px 0px 30px rgba(255, 156, 0, 0.2),
                     2px 2px 4px rgba(0, 0, 0, 0.8);
    }
    100% {
        text-shadow: 0px 0px 8px rgba(255, 255, 255, 0.4),
                     0px 0px 15px rgba(255, 156, 0, 0.3),
                     2px 2px 4px rgba(0, 0, 0, 0.8);
    }
}

.serverInfo__online {
    color: #a2ff00;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    text-shadow: 0px 0px 8px rgba(162, 255, 0, 0.8),
                 0px 0px 15px rgba(162, 255, 0, 0.6),
                 0px 0px 25px rgba(162, 255, 0, 0.4),
                 1px 1px 3px rgba(0, 0, 0, 0.8);
    margin-top: 3px;
}

@keyframes greenPulse {
    0% {
        text-shadow: 0px 0px 8px rgba(162, 255, 0, 0.8),
                     0px 0px 15px rgba(162, 255, 0, 0.6),
                     0px 0px 25px rgba(162, 255, 0, 0.4);
        transform: scale(1);
    }
    50% {
        text-shadow: 0px 0px 12px rgba(162, 255, 0, 1),
                     0px 0px 20px rgba(162, 255, 0, 0.8),
                     0px 0px 35px rgba(162, 255, 0, 0.6),
                     0px 0px 45px rgba(162, 255, 0, 0.3);
        transform: scale(1.05);
    }
    100% {
        text-shadow: 0px 0px 8px rgba(162, 255, 0, 0.8),
                     0px 0px 15px rgba(162, 255, 0, 0.6),
                     0px 0px 25px rgba(162, 255, 0, 0.4);
        transform: scale(1);
    }
}

.server-2 .serverInfo__name {
    color: #fff;
    text-shadow: 0px 0px 8px rgba(255, 255, 255, 0.4),
                 0px 0px 15px rgba(226, 32, 36, 0.3),
                 2px 2px 4px rgba(0, 0, 0, 0.8);
    animation: redNameGlow 3s ease-in-out infinite;
}

@keyframes redNameGlow {
    0% {
        text-shadow: 0px 0px 8px rgba(255, 255, 255, 0.4),
                     0px 0px 15px rgba(226, 32, 36, 0.3),
                     2px 2px 4px rgba(0, 0, 0, 0.8);
    }
    50% {
        text-shadow: 0px 0px 12px rgba(255, 255, 255, 0.6),
                     0px 0px 20px rgba(226, 32, 36, 0.5),
                     0px 0px 30px rgba(226, 32, 36, 0.2),
                     2px 2px 4px rgba(0, 0, 0, 0.8);
    }
    100% {
        text-shadow: 0px 0px 8px rgba(255, 255, 255, 0.4),
                     0px 0px 15px rgba(226, 32, 36, 0.3),
                     2px 2px 4px rgba(0, 0, 0, 0.8);
    }
}

.server-2 .serverInfo__online {
    color: #e22024;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-shadow: 0px 0px 8px rgba(226, 32, 36, 0.8),
                 0px 0px 15px rgba(226, 32, 36, 0.6),
                 0px 0px 25px rgba(226, 32, 36, 0.4),
                 1px 1px 3px rgba(0, 0, 0, 0.8);
    animation: redPulse 2s ease-in-out infinite;
}

@keyframes redPulse {
    0% {
        text-shadow: 0px 0px 8px rgba(226, 32, 36, 0.8),
                     0px 0px 15px rgba(226, 32, 36, 0.6),
                     0px 0px 25px rgba(226, 32, 36, 0.4),
                     1px 1px 3px rgba(0, 0, 0, 0.8);
        transform: scale(1);
    }
    50% {
        text-shadow: 0px 0px 12px rgba(226, 32, 36, 1),
                     0px 0px 20px rgba(226, 32, 36, 0.8),
                     0px 0px 35px rgba(226, 32, 36, 0.6),
                     0px 0px 45px rgba(226, 32, 36, 0.3),
                     1px 1px 3px rgba(0, 0, 0, 0.8);
        transform: scale(1.05);
    }
    100% {
        text-shadow: 0px 0px 8px rgba(226, 32, 36, 0.8),
                     0px 0px 15px rgba(226, 32, 36, 0.6),
                     0px 0px 25px rgba(226, 32, 36, 0.4),
                     1px 1px 3px rgba(0, 0, 0, 0.8);
        transform: scale(1);
    }
}

.serverInfo__i{
    font-size: 12px;
}

.circlestat {
    margin-left: -10px;
    position: relative;
    transition: all 0.3s ease;
}

.circlestat:hover {
    transform: scale(1.02);
}

.circlestat canvas {
    position: relative;
    z-index: 1;
}

.news-panel {
    height: 380px;
    margin-top: 55px;
}

.news-panel>div {
    width: 590px;
}

.bright:hover {
    filter: brightness(120%);
}
  
.swiper-news {
    position: relative;
    width: 590px;
    height: 380px;
}

.swiper-news::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 590px;
    height: 50px;
    background: #030508;
    z-index: 10;
}

.swiper-news .swiper-slide {
    position: relative;
    height: 330px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    box-shadow: inset 0 -10px 40px 40px rgb(7 8 19 / 70%);
}

.newsPagination {
    position: absolute;
    left: calc(50% - 60px);
    bottom: 10px;
    width: 120px;
    height: 35px;
    z-index: 11;
}
  
.swiper-news .swiper-button-next{
    width: 20px;
    height: 20px;
    background: url('../img/swiper-next.png') no-repeat;
    margin-top: -10px;
}

.swiper-news .swiper-button-prev {
    width: 20px;
    height: 20px;
    background: url('../img/swiper-back.png') no-repeat;
    margin-top: -10px;
}

.swiper-news .swiper-pagination {
    color: #ff9c00;
    font-size: 15px;
    font-weight: bold;
}
  
.swiper-news .swiper-pagination-current {
    color: #fff;
}
  
.slider-title {
    position: absolute;
    left: 40px;
    top: -140px;
    font-size: 36px;
    font-weight: normal;
    line-height: 1;
    margin-bottom: 0px;
    color: #fff;
    padding-right: 20px;
    transition: 1.5s;
}

.swiper-slide-active .slider-title {
    top: 40px;
}

.slider-info {
    position: absolute;
    width: 440px;
    left: 40px;
    bottom: -140px;
    line-height: 1.5;
    margin-bottom: 0px;
    color: #fff;
    padding-right: 20px;
    transition: 1.5s;
}

.swiper-slide-active .slider-info {
    bottom: 40px;
}

.swiper-news .button-more {
    display: block;
    position: absolute;
    right: 50px;
    bottom: -140px;
    padding: 6px 16px 6px 16px;
    opacity: 0.7;
    transition: 1.5s bottom, 0.3s opacity;
}

.swiper-news .button-more:hover {
    opacity: 1;
}

.swiper-slide-active .button-more {
    bottom: 100px;
}

.events-block {
    position: relative;
    background: url('../img/bg-news-repeat.jpg') repeat;
    width: 100%;
    min-height: 400px;
    max-height: 500px;
    box-shadow: 0px 15px 40px rgba(0, 0, 0, 0.8),
                0px 0px 30px rgba(255, 156, 0, 0.2);
    transition: all 0.3s ease;
    overflow: hidden;
}

.events-block:hover {
    transform: translateY(-5px);
    box-shadow: 0px 20px 50px rgba(0, 0, 0, 0.9),
                0px 0px 40px rgba(255, 156, 0, 0.4);
}

/* News Header - Equalizer Style */
.events-block .info-widget-block {
    position: relative;
    padding: 30px 40px 25px 50px;
    background: linear-gradient(90deg, rgba(255, 156, 0, 0.1) 0%, transparent 100%);
    border-bottom: 2px solid rgba(255, 156, 0, 0.5);
    text-transform: uppercase;
    color: #ff9c00;
}

.events-block .info-widget-block h2 {
    font-family: 'Candara', sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8),
                 0px 0px 15px rgba(255, 156, 0, 0.6);
    letter-spacing: 1px;
}   

/* Scrollable Content Area for News */
.events-block .equalizer-widget-content {
    max-height: 350px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px 25px;
}

/* Custom Scrollbar for News */
.events-block .equalizer-widget-content::-webkit-scrollbar {
    width: 8px;
}

.events-block .equalizer-widget-content::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
}

.events-block .equalizer-widget-content::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #ff9c00 0%, #ffcc00 100%);
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.2);
}

.events-block .equalizer-widget-content::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #ffcc00 0%, #ff9c00 100%);
    box-shadow: 0px 0px 8px rgba(255, 156, 0, 0.6);
}

/* News Widget Icon */
.events-block .equalizer-widget-icon {
    font-size: 1.5rem;
    margin-right: 15px;
    filter: drop-shadow(0px 0px 8px rgba(255, 156, 0, 0.6));
}

.top-event-block {
    padding: 10px 40px;
}

.pp {
    color: #ff9c00;
    font-size: 20px;
    font-weight: bold;
    padding: 5px 10px 0px 0px;  
}
   
.news-top-title {
    position: relative;
    display: flex;
    margin-left: 50px;
    font-family: 'Candara';
}

.news-top-title::before {
    content: "";
    position: absolute;
    left: -65px;
    top: -26px;
    width: 71px;
    height: 75px;
    background: url('../img/news-icon.png') 0 0 no-repeat;
}

.news-top-title span.active {
    color: #ff9c00;
    font-weight: 700;
}
   
.news-top-title span {
    display: block;
    color: #7e7c7b;
    font-size: 20px;
    font-weight: bold;
    padding: 5px 10px 10px 0px;
    text-transform: uppercase;
    position: relative;
    transition: 0.3s;
}
   
.news-top-title span:hover{
    color: #ffe26e;
    cursor: pointer;
}

.top-event-block .add {
    border: none;
    background: #34340b;
    color: #fff;
    position: relative;
    top: -3px;
}

.tab-block {
    display: none;
}

.tab-block.active {
    display: block;
    animation: tab 0.6s linear;
}

@keyframes tab {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}  

.tab-block li {
    position: relative;
    color: #fff;
    padding: 18px 40px;
    transition: 0.3s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tab-block li:hover {
    background: #130c0c;
    transition: 0.3s;
    padding: 18px 45px 18px 35px;
}

.tab-block span {
    color: #ffcc00;
}

.tab-block .date {
    color: #7e7c7b;
}

.tab-block li:hover .button-more {
    display: block;
}

.tab-block li:hover .date {
    display: none;
}

.tab-block li:hover {
    color: #ffcc00;
}

.tab-block li:hover span {
    color: #fff;
}

.button-more {
    position: absolute;
    right: 40px;
    display: none;
    padding: 6px 16px 6px 16px;
    color: #fff;
    -webkit-transition: all 0.3s ease;
   transition: all 0.3s ease; 
   cursor: pointer; 
   background-image: url(../img/button.jpg); 
   background-repeat: no-repeat; 
   background-size: cover; 
   border: none; 
   text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.2); 
   text-align: center; 
   font-family: Candara, Calibri, Segoe, Segoe UI, Optima, Arial, sans-serif; 
   -webkit-box-shadow: 0px 10px 15px 0px rgba(0, 0, 0, 0.2); 
   box-shadow: 0px 10px 15px 0px rgba(0, 0, 0, 0.2); 
   opacity: 0.7;
}

.button-more:hover {
    opacity: 1;
    -webkit-transition: all 0.3s ease;
   transition: all 0.3s ease;
}

.widget-panel {
    margin-top: 70px;
}

.widget-block {
    position: relative;
    background: url('../img/top-widget-block.jpg') no-repeat;
    width: 380px;
    height: 690px;
    box-shadow: 0px 0px 25px 0px rgb(0 0 0 / 0.8);
}

.info-widget-block {
    position: relative;
    padding: 60px 40px 60px 150px;
    text-transform: uppercase;
    color: #ff9c00;
}

.top-players:before{
    content: "";
    position: absolute;
    width: 127px;
    height: 168px;
    top:-24px;
    left: -6px;
    background: url('../img/icon-top-players.png') no-repeat;
}

.top-guilds:before{
    content: "";
    position: absolute;
    width: 127px;
    height: 168px;
    top:-24px;
    left: -6px;
    background: url('../img/icon-top-guilds.png') no-repeat;
}

.top-event:before{
    content: "";
    position: absolute;
    width: 127px;
    height: 168px;
    top:-24px;
    left: -6px;
    background: url('../img/icon-top-event.png') no-repeat;
}

.info-widget-block h2{
    font-family: 'Candara';
    font-size: 20px;
    text-transform: uppercase;
}

.info-widget-block .add {
    width: 19px;
    height: 19px;
    border-radius: 50%;
    border: 1px solid #666564;
    background: url('../img/add-icon.png') center center no-repeat;
}

.top-block {
    padding-bottom: 15px;
    margin: 0 40px;
}

.top-block span {
    display: block;
    font-size: 1.2rem;
    font-weight: 600;
}

.top-block .top-flag {
    width: 30px;
    padding-top: 2px;
}

.top-block .top-name {
    width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #fff;
    font-size: 1.2rem;
    font-weight: 600;
}

.top-block .top-lvl {
    width: 80px;
    color: #ff9c00;
    font-size: 1.2rem;
    font-weight: 700;
    text-shadow: 0px 0px 8px rgba(255, 156, 0, 0.6);
}

.top-guilds .top-name {
    width: 230px;
    color: #fff;
    font-size: 1.2rem;
    font-weight: 600;
}

.top-block .top-Res sup {
    font-size: 12px;
    color: #ff0000;
    position: absolute;
    margin-top: -5px;
}   

.top-list {
    height: auto;
    display: flex;
    align-items: center;
    font-size: 1.2rem;
    transition: all 0.3s ease;
    color: #fff;
    padding: 15px 25px;
    margin: 0 15px 8px 15px;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.6) 0%, rgba(20, 25, 40, 0.6) 100%);
    border: 1px solid rgba(255, 156, 0, 0.2);
    border-radius: 8px;
    position: relative;
    overflow: hidden;
}

.top-list::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 156, 0, 0.1) 50%, transparent 100%);
    transition: left 0.5s ease;
}

.top-list a {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.2rem;
}

.top-list:hover {
    background: linear-gradient(90deg, rgba(255, 156, 0, 0.15) 0%, rgba(40, 45, 60, 0.8) 100%);
    border-color: rgba(255, 156, 0, 0.6);
    transform: translateX(5px) scale(1.02);
    box-shadow: 0px 8px 25px rgba(0, 0, 0, 0.6),
                0px 0px 20px rgba(255, 156, 0, 0.4),
                inset 0px 1px 0px rgba(255, 255, 255, 0.1);
    color: #ff9c00;
    margin: 0 15px 8px 15px;
    padding: 15px 25px;
    position: relative;
    z-index: 5;
}

.top-list:hover::before {
    left: 100%;
}

.top-list:hover a {
    color: #ff9c00;
    text-shadow: 0px 0px 8px rgba(255, 156, 0, 0.6);
}

.top-title {
    color: #ff9c00;
    display: flex;
    align-items: center;
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 15px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8),
                 0px 0px 15px rgba(255, 156, 0, 0.6);
    letter-spacing: 1px;
    text-transform: uppercase;
}

.x-buttons {
    width: 100%;
    position: absolute;
    bottom: 40px;
    margin: 0 auto;
}

.x-buttons input {
    padding: 8px 20px;
    background: #251f1f;
    border: none;
    color: #d6b45c;
    transition: 0.3s;
    margin-left: 10px;
}

.x-buttons input:hover {
    background: #401e1e;
    box-shadow: 2px 4px 20px 0 #000;
}

.event-timers {
    padding: 25px;
    max-height: 540px;
    display: block;
    overflow: auto;
}

.event-timers li {
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
}

.event-timers p {
    display: flex;
    justify-content: space-between;
    margin-bottom: 3px;
}

.event-timers .starts-in {
    color: #fad953;
    font-size: 12px;
}

.time-start-event{
    font-size: 13px;
}

.event-timers .time-to-event {
    color: #7c7671;
    font-size: 12px;
}

.title-video-panel {
    position: relative;
    color: #ff9c00;
    font-size: 20px;
    text-transform: uppercase;
    margin-top: 40px;
    padding: 10px;
    text-indent: 20px;
}

.title-video-panel::after {
    position: absolute;
    left: 100px;
    bottom: 14px;
    content: "";
    width: 690px;
    height: 1px;
    background: #3c3422;
}

/* ==========================================
   EQUALIZER MEDIA GALLERY - EPIC DESIGN
   ========================================== */

.video-panel {
    height: 476px;
}

.video-block {
    width: 790px;
    height: 476px;
    padding: 30px;
    background: url('../img/bg-news-repeat.jpg') repeat;
    box-shadow: 0px 15px 40px rgba(0, 0, 0, 0.8),
                0px 0px 30px rgba(255, 156, 0, 0.2);
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.video-block:hover {
    transform: translateY(-3px);
    box-shadow: 0px 20px 50px rgba(0, 0, 0, 0.9),
                0px 0px 40px rgba(255, 156, 0, 0.3);
    border-color: rgba(255, 156, 0, 0.5);
}

/* Media Gallery Header */
.equalizer-media-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    padding: 5px 10px;
    background: linear-gradient(90deg, rgba(255, 156, 0, 0.1) 0%, transparent 100%);
    border-bottom: 2px solid rgba(255, 156, 0, 0.5);
    border-radius: 8px 8px 0 0;
}

.equalizer-media-icon {
    font-size: 1.5rem;
    margin-right: 15px;
    filter: drop-shadow(0px 0px 8px rgba(255, 156, 0, 0.6));
}

.equalizer-media-header h2 {
    font-family: 'Candara', sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0;
    color: #ff9c00;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8),
                 0px 0px 15px rgba(255, 156, 0, 0.6);
    letter-spacing: 1px;
}

/* Main Image Display */
.equalizer-main-image {
    position: relative;
    width: 100%;
    height: 280px;
    margin-bottom: 20px;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid rgba(255, 156, 0, 0.2);
    transition: all 0.3s ease;
}

.equalizer-main-image:hover {
    border-color: rgba(255, 156, 0, 0.6);
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.7),
                inset 0px 0px 20px rgba(255, 156, 0, 0.1);
}

.equalizer-main-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.3s ease;
}

/* Thumbnail Gallery */
.equalizer-thumbnail-gallery {
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    padding: 0 10px;
}

.equalizer-thumbnail {
    width: 80px;
    height: 60px;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid rgba(255, 156, 0, 0.2);
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.equalizer-thumbnail::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent 0%, rgba(255, 156, 0, 0.1) 100%);
    opacity: 0;
    transition: all 0.3s ease;
}

.equalizer-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.3s ease;
}

.equalizer-thumbnail:hover {
    border-color: rgba(255, 156, 0, 0.6);
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.6),
                0px 0px 15px rgba(255, 156, 0, 0.4);
}

.equalizer-thumbnail:hover::before {
    opacity: 1;
}

.equalizer-thumbnail:hover img {
    transform: scale(1.1);
}

.equalizer-thumbnail.active {
    border-color: #ff9c00;
    background: linear-gradient(135deg, rgba(255, 156, 0, 0.2) 0%, rgba(255, 204, 0, 0.1) 100%);
    box-shadow: 0px 0px 20px rgba(255, 156, 0, 0.6),
                inset 0px 0px 10px rgba(255, 156, 0, 0.2);
}

.equalizer-thumbnail.active::before {
    opacity: 1;
    background: linear-gradient(45deg, rgba(255, 156, 0, 0.2) 0%, rgba(255, 204, 0, 0.1) 100%);
}

.slick-slider-slide {
    padding: 15px;
}

.slick-slider-slide a {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    transition: 1s;
    transform: scale(1);
}

.slick-slider-slide img {
    display: block;
}

.slick-center a {
    transform: scale(1.1);
}
.slick-initialized .slick-slide {
    display: block !important;
}

.fast-links {
    width: 378px;
    height: 476px;
    display: flex;
    flex-direction: column;
    font-family: 'Roboto';
    justify-content: space-between;
}

.fast-link {
    position: relative;
    width: 100%;
    height: 140px;
}

.fast-link::after {
    content: "";
    position: absolute;
    top: -28px;
    right: -20px;
    width: 230px;
    height: 168px;
    transition: 0.5s;
}

.fast-link:first-child::after {
    background: url('../img/heroes-fast-links.png') 0 0 no-repeat;
}

.fast-link:nth-child(2)::after {
    background: url('../img/heroes-fast-links.png') 0 -168px no-repeat;
}

.fast-link:last-child::after {
    background: url('../img/heroes-fast-links.png') 0 -336px no-repeat;
}

.fast-link:first-child {
    background: url('../img/backgrounds-fast-links.png') 0 0 no-repeat;
}

.fast-link:nth-child(2) {
    background: url('../img/backgrounds-fast-links.png') 0 -140px no-repeat;
}

.fast-link:last-child {
    background: url('../img/backgrounds-fast-links.png') 0 -280px no-repeat;
}

.fast-link:hover::after {
    right: -40px;
}

.fast-link:hover .info-link {
    padding-left: 20px;
}

.info-link {
    margin: 40px 0 0 50px;
    font-style: italic;
    transition: 0.5s;
}

.title-link {
    font-size: 30px;
    margin-bottom: 6px;
    text-transform: uppercase;
}
.title-link a {
    color: white;
}
.text-link{
    color: #f7ddbf;
}

.market-panel {
    margin-top: 60px;
    height: 370px;
    padding: 30px;
    background: #030508;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.market-panel h2 {
    position: relative;
    text-transform: uppercase;
    align-self: flex-start;
    color: #ff9c00;
}

.market-panel h2::after {
    content: "";
    position: absolute;
    top: 16px;
    left: 90px;
    width: 1080px;
    height: 1px;
    background: #3c3422;
}

.list-goods {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.list-goods li {
    width: 140px;
    height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    border: 1px solid #1b1f34;
    background-color: #070813;
    transition: 0.3s;
}
.list-goods li:hover {
    margin-top: -10px;
}

.title-good {
    font-size: 12px;
    font-weight: normal;
    margin-top: -20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.button-buy {
    padding: 5px 18px;
    margin: 10px 0;
    background: #010000;
    color: #dfbc60;
    border: none;
    transition: 0.3s;
}

.button-buy:hover {
    background: #251f1f;
    box-shadow: 2px 4px 20px 0 #000;
    color: #ccff00;
}

.price {
    position: relative;
    right: 10px;
    color: #ffcc00;
    margin-top: 4px;
}

.price::after {
    content: "";
    position: absolute;
    width: 15px;
    height: 15px;
    background: url('../img/coin-icon.png') 0 0 no-repeat;
    right: -20px;
}

.button-market {
    position: relative;
    text-transform: uppercase;
    padding: 13px 40px 13px 28px;
    background: #251f1f;
    color: #dfbc60;
    border: none;
    margin-bottom: -10px;
}

.button-market::before {
    content: "";
    position: absolute;
    top: 12px;
    right: 12px;
    width: 14px;
    height: 16px;
    background: url('../img/more-icon.png') 0 0 no-repeat;
}

.button-market:hover {
    background: #401e1e;
    box-shadow: 2px 4px 20px 0 #401e1e;
}

.line {
    height: 1px;
    margin-top: 0;
    margin-bottom: 0;
    background: #363534;
}

.to-the-top {
    width: 60px;
    height: 60px;
    margin: 0 auto;
    border: 1px solid #363534;
    border-radius: 50%;
    background: #111110;
    margin-top: -31px;
    margin-bottom: -30px;
    position: relative;
    z-index: 10;
}

.button-to-the-top {
    width: 48px;
    height: 48px;
    margin: 4.85px 5.05px;
    border: 1px solid transparent;
    border-radius: 50%;
    background: #fff url("../img/to-the-top-icon.png") center center no-repeat;
    font-weight: bold;
    font-size: 20px;
    transition: 0.5s;
    text-align: center;
    line-height: 2.2;
}

.button-to-the-top:hover {
    box-shadow: inset 0 0 10px 0 #ff9c00;
    border: 1px solid #ff9c00;
    background-color: #ff9c00;
}

.footer-block-t {
    justify-content: center;
    align-items: center;
    text-align: center;
}

.payment {
    margin: 70px auto 120px auto;
}

.payment li {
    display: inline-block;
    margin: 15px 26px;
}

.payment a {
    opacity: 0.3;
    transition: 0.5s;
}

.payment .visa a {
    display: block;
    width: 60px;
    height: 20px;
    background: url('../img/payment.png') 0 0 no-repeat;
}

.payment .mastercard a {
    display: block;
    width: 105px;
    height: 24px;
    background: url('../img/payment.png') -115px 0 no-repeat;
}

.payment .g2apay a {
    display: block;
    width: 158px;
    height: 26px;
    background: url('../img/payment.png') -277px 0 no-repeat;
}

.payment .entergames a {
    display: block;
    width: 135px;
    height: 26px;
    background: url('../img/payment.png') -485px 0 no-repeat;
}

.payment a:hover {
    opacity: 1;
}

.f-menu {
    margin: 0 auto 20px auto;
}

.f-menu li {
    display: inline-block;
    margin: 15px 26px;
}

.f-menu li a {
    text-transform: uppercase;
    font-size: 14px;
    color: #fff;
}

.f-menu li a:hover{
    color: #ff9c00;
}

.f-menu li a:active{
    color: #ff9c00;
}

.bottom-footer {
    padding: 50px 0;
}

.info-copyright {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
}

.info-copyright a {
    font-size: 14px;
    color: #ff9c00;
}

.info-copyright .info {
    color: #514720;
    margin-top: 12px;
}

.social-networks {
    width: 200px;
    height: 35px;
}

.social-networks a {
    display: block;
    width: 33px;
    height: 33px;
    border-radius: 50%;
    border: 1px solid transparent;
}

.social-networks .facebook a {
    background: #000 url('../img/social-networks.png') 12px 9px no-repeat;
}

.social-networks .twitter a {
    background: #000 url('../img/social-networks.png') -42px 9px no-repeat;
}

.social-networks .twitch a {
    background: #000 url('../img/social-networks.png') -98px 9px no-repeat;
}

.social-networks .youtube a {
    background: #000 url('../img/social-networks.png') -153px 9px no-repeat;
}

.social-networks a:hover {
    border: 1px solid #ff9c00;
    box-shadow: inset 0 0 10px 0 #ff9c00;
}

.designed {
    display: block;
    width: 194px;
    height: 49px;
    background: url("../img/designed-icon.png");
    margin-top: 60px;
    transition: 0.5s;
}

.designed:hover {
    filter: brightness(1.3);
}

/* ==========================================
   EQUALIZER FOOTER - EPIC MEDIEVAL DESIGN
   ========================================== */

.footer {
    min-height: 400px;
    width: 100vw;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.8) 100%),
                url('../img/background-bottom.jpg') center center no-repeat;
    background-size: 100% 100%;
    background-attachment: scroll;
    position: relative;
    overflow: hidden;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
}

.footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 50% 20%, rgba(255, 156, 0, 0.1) 0%, transparent 60%);
    pointer-events: none;
}

.equalizer-footer-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 40px;
    position: relative;
    z-index: 2;
    width: 100%;
}

/* Logo Principal */
.equalizer-footer-logo {
    margin-bottom: 40px;
    position: relative;
}

.equalizer-footer-logo a {
    display: block;
    transition: all 0.3s ease;
}

.equalizer-footer-logo img {
    max-height: 80px;
    width: auto;
    filter: drop-shadow(0px 0px 20px rgba(255, 156, 0, 0.3));
    transition: all 0.3s ease;
}

.equalizer-footer-logo:hover img {
    filter: drop-shadow(0px 0px 30px rgba(255, 156, 0, 0.6));
    transform: scale(1.05);
}

/* Navegación del Footer */
.equalizer-footer-nav {
    margin-bottom: 40px;
}

.equalizer-footer-menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 40px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.equalizer-footer-menu li a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 10px 18px;
    border-radius: 6px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    display: inline-block;
    border: 1px solid transparent;
}

.equalizer-footer-menu li a::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 156, 0, 0.2) 50%, transparent 100%);
    transition: left 0.4s ease;
    z-index: 1;
}

.equalizer-footer-menu li a:hover {
    color: #ff9c00;
    background: rgba(255, 156, 0, 0.1);
    border: 1px solid rgba(255, 156, 0, 0.3);
    text-shadow: 0px 0px 10px rgba(255, 156, 0, 0.5);
    transform: translateY(-2px);
    z-index: 2;
}

.equalizer-footer-menu li a:hover::before {
    left: 100%;
}

/* Redes Sociales */
.equalizer-footer-social {
    margin-bottom: 40px;
}

.equalizer-social-networks {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.equalizer-social-networks li a {
    display: block;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid rgba(255, 156, 0, 0.3);
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(25, 30, 50, 0.8) 100%);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    z-index: 2;
}

.equalizer-social-networks li a::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle, rgba(255, 156, 0, 0.3) 0%, transparent 70%);
    border-radius: 50%;
    transition: all 0.3s ease;
    transform: translate(-50%, -50%);
    z-index: 1;
}

.equalizer-social-networks .facebook a {
    background-image: url('../img/social-networks.png');
    background-position: 12px 9px;
    background-repeat: no-repeat;
    background-size: auto;
    background-blend-mode: normal;
}

.equalizer-social-networks .twitter a {
    background-image: url('../img/social-networks.png');
    background-position: -42px 9px;
    background-repeat: no-repeat;
    background-size: auto;
    background-blend-mode: normal;
}

.equalizer-social-networks .twitch a {
    background-image: url('../img/social-networks.png');
    background-position: -98px 9px;
    background-repeat: no-repeat;
    background-size: auto;
    background-blend-mode: normal;
}

.equalizer-social-networks .youtube a {
    background-image: url('../img/social-networks.png');
    background-position: -153px 9px;
    background-repeat: no-repeat;
    background-size: auto;
    background-blend-mode: normal;
}

.equalizer-social-networks li a:hover {
    border-color: #ff9c00;
    transform: translateY(-3px) scale(1.1);
    box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.6),
                0px 0px 20px rgba(255, 156, 0, 0.4);
    z-index: 3;
}

.equalizer-social-networks li a:hover::before {
    width: 60px;
    height: 60px;
}

/* Copyright y Legal */
.equalizer-footer-copyright {
    text-align: center;
    color: rgba(255, 255, 255, 0.6);
}

.equalizer-footer-legal {
    margin-bottom: 15px;
    font-size: 1rem;
}

.equalizer-footer-legal a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: all 0.3s ease;
    padding: 4px 8px;
    border-radius: 4px;
}

.equalizer-footer-legal a:hover {
    color: #ff9c00;
    background: rgba(255, 156, 0, 0.1);
    text-shadow: 0px 0px 8px rgba(255, 156, 0, 0.5);
}

.equalizer-footer-copy {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.5);
    font-family: Arial, Helvetica, sans-serif;
}

/* Responsive Design */
@media (max-width: 768px) {
    .equalizer-footer-menu {
        gap: 20px;
    }
    
    .equalizer-footer-menu li a {
        font-size: 1rem;
        padding: 6px 12px;
    }
    
    .equalizer-social-networks {
        gap: 15px;
    }
    
    .equalizer-social-networks li a {
        width: 45px;
        height: 45px;
    }
    
    .equalizer-footer-container {
        padding: 40px 20px;
    }
}

/* Legacy Footer Classes (for compatibility) */
footer .f-logo:hover {
    -webkit-filter: brightness(140%); 
    filter: brightness(140%);
}

/** Modal **/

.modalx-overlay {
    position: fixed;
    top:0;
    bottom:0;
    left:0;
    right:0;
    z-index: 1000;
    cursor: pointer;
    overflow: auto;
    -webkit-transition: background 0.25s linear;
    -moz-transition: background 0.25s linear; 
    transition: background 0.25s linear;
}

/***************************************checkbox********************************************/

.checkbox {
  position: absolute;
  z-index: -1;
  opacity: 0;
}
.checkbox+label {
  display: inline-flex;
  align-items: center;
  user-select: none;
  position: relative;
}
.checkbox+label::before {
  content: '';
  display: inline-block;
  width: 13px;
  height: 13px;
  margin-right: 5px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 50% 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 2px solid#666569;
  position: relative;
  top: 3px;
}
.checkbox+label::after {
  position: absolute;
  content: "";
  width: 31px;
  height: 27px;
  left: -5px;
  top: -4px;
  opacity: 0;
  transition: 0.3s;
  background: url("../img/checked-icon.png") 0 0 no-repeat;
}
.checkbox:checked+label:after {
  opacity: 1;
}
.checkbox+label {
  transition: 0.3s;
  color: #8f7f61;
}
.checkbox:checked+label {
  color: #fff;
}

.agree{
  margin-bottom: 25px;
}

.agree a:hover{
  text-decoration:underline;
}

.modal_window {
    width: 420px;
    background: url("../img/top-modal-bg.jpg") top center no-repeat,url("../img/repeat-modal-bg.jpg") center repeat-y;
    padding: 40px 60px;
    z-index: 1002;
    position: relative;
    cursor: auto;
    margin: 0 auto;
    display: none;
    -webkit-transition: all 0.25s ease-out;
    -moz-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
    margin-bottom: 20px;
    transform: scale(0.4);
}

.modal_window h3 {
    margin: 13px 0px 100px 45px;
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    color: #ff9c00;
}

.icon-modal-login:before{
    content: "";
    position: absolute;
    width: 127px;
    height: 168px;
    top: -25px;
    left: -8px;
    background: url("../img/modal-icon-login.png")no-repeat;
}

.icon-modal-reg:before{
    content: "";
    position: absolute;
    width: 127px;
    height: 168px;
    top: -25px;
    left: -8px;
    background: url("../img/modal-icon-reg.png")no-repeat;
}

.modal_form {
    text-align: center;
    box-sizing: border-box;
}

.modal_form input,
.modal_form select,
.modal_form textarea {
    width: 100%;
    background: #0f0f0e;
    border: 1px solid #272322;
    box-sizing: border-box;
    height: 36px;
    color: #fff;
    text-align: center;
}

.formGroup {
  margin-bottom: 20px;
  position: relative;
  max-width: 450px;
}

.formGroup select {
    color: #fff;
}

.formGroup-name {
    display: block;
    margin-bottom: 6px;
}

.formGroup.error .formGroup-name {
  color: #df3b5a;
}

.formGroup.error input {
  border: 1px solid #df3b5a;
  box-shadow: 0px 0px 10px 0px rgba(233, 59, 90, 0.4), inset 0px 0px 10px 0px rgba(233, 59, 90, 0.4);
}

.errorGroup {
    background: url(../img/wrong-icon.png) left 20px top 17px no-repeat;
    background-color: rgba(0, 0, 0, 0.9);
    padding: 17px 20px 17px 50px;
    border-radius: 10px;
    box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.4);
    line-height: 1.5;
    font-size: 13px;
    text-align: left;
    position: absolute;
    left: 100%;
    bottom: -6px;
    min-width: 330px;
    color: #fff;
    margin-left: 30px;
}
.errorGroup:before {
  content: '';
  border: 8px solid transparent;
  border-right-color: rgba(0, 0, 0, 0.9);
  position: absolute;
  right: 100%;
  top: 50%;
  margin-top: -7px;
}

.formGroup-button {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    margin-top: 40px;
}

.button-small {
    padding: 8px 20px;
    background: #251f1f;
    border: none;
    color: #d6b45c;
    transition: 0.3s;
    margin-left: 10px;
}

.button-small:hover {
    background: #401e1e;
    box-shadow: 2px 4px 20px 0 #000;
}

.lost-pass {
    margin-bottom: 30px;
    color: #ffcc00;
    font-size: 12px;
}

.lost-pass:hover {
    text-decoration:underline;
}

/*page*/
.widgets_news {
    display: flex;
    margin-top: 70px;
}

.widget-block-span {
    margin-bottom: 40px;
}

.news-block { 
  width: 800px;
  padding: 40px 40px 40px 40px;
  margin-left: 10px;
  z-index: 1;
  background: url(../img/bg-news-top.jpg)top center no-repeat,url(../img/bg-news-repeat.jpg)repeat;
  box-shadow: 0px 0px 25px 0px rgb(0 0 0 / 0.4);
  position: relative;
  overflow: hidden;
}

.news-block h3 {
    font-size: 15px;
    text-transform: uppercase;
    color: #ffcc00;
    margin-bottom: 20px;
}

.news-block h2 {
    font-family: 'Candara';
    font-size: 20px;
    color: #ff9c00;
    margin: 40px;
    text-align: center;
    text-transform: uppercase;
}

.news-block p {
    font-size: 14px;
    margin: 20px 0;
    line-height: 20px;
}

.news-block p a {
    text-decoration: underline;
}

.news-block p a:hover{
    text-decoration:none;
    color: #ffcc00;
}

.news-block .date {
    display: block;
    text-align: right;
    padding: 15px 20px;
    font-size: 14px;
    color: #ff9c00;
}

.news-block .date b{
   font-size: 20px; 
}
/*end page*/

/*download*/

.download {
    align-items: center;
    text-align: center;
}

.download h2 {
    font-family: 'Candara';
    font-size: 20px;
    color: #ffe26e;
    margin: 40px;
}

.download h3 {
    font-size: 15px;
    color: #ffe26e;
    margin: 20px;
    margin-bottom: 60px;
    text-transform:none;
    font-weight:none;
}

.download-files div {
    margin-bottom: 40px;
}

.download-files div p {
    font-size: 14px;
}

.btn-download-file {
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease; 
  cursor: pointer; 
  background-image: url(../img/button.jpg); 
  background-repeat: no-repeat; 
  background-size: cover; 
  padding: 19px 28px; 
  border: none; 
  color: #fff; 
  text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.2); 
  position: relative; 
  z-index: 1; 
  text-align: center; 
  text-transform: uppercase; 
  font-family: Candara, Calibri, Segoe, Segoe UI, Optima, Arial, sans-serif; 
  font-size: 15px;  
  -webkit-box-shadow: 0px 10px 15px 0px rgba(0, 0, 0, 0.2); 
  box-shadow: 0px 10px 15px 0px rgba(0, 0, 0, 0.2);
}

.btn-download-file:hover {
    box-shadow: 0 10px 26px -6px rgb(255 156 0 / 50%);
    -webkit-filter: brightness(120%); 
    filter: brightness(120%);
}

.drivers-block {
    width: 100%;
    margin-top: 70px;
}

.drivers-block h3 {
    margin-bottom: 20px;
}

.drivers a {
    display: block;
    width: 229px;
    height: 114px;
}

.drivers .nvidia a {
    background: url('../img/dirvers.png') 0 0 no-repeat;
}

.drivers .directx a {
    background: url('../img/dirvers.png') -245px 0 no-repeat;
}

.drivers .microsoft-net a {
    background: url('../img/dirvers.png') -490px 0 no-repeat;
}

.drivers a:hover{
    box-shadow: 0 10px 26px -6px rgb(255 156 0 / 50%);
}

/*end download*/

/*slider*/
/* Slider */
.slick-slider{
    position: relative;   
    display: block;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list{
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0;
    padding-bottom: 30px;
}
.slick-list:focus
{
    outline: none;
}
.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.slick-track
{
    position: relative;
    top: 0;
    left: 0;

    display: block;
    margin-left: auto;
    margin-right: auto;
}
.slick-track:before,
.slick-track:after
{
    display: table;

    content: '';
}
.slick-track:after
{
    clear: both;
}
.slick-loading .slick-track
{
    visibility: hidden;
}

.slick-slide
{
    display: none;
    float: left;

    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide
{
    float: right;
}
.slick-slide img
{
    display: block;
    width: 100%;
    margin: 0 auto;
    box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.2);
}
.slick-slide.slick-loading img
{
    display: none;
}
.slick-slide.dragging img
{
    pointer-events: none;
}
.slick-initialized .slick-slide
{
    display: block;
}
.slick-loading .slick-slide
{
    visibility: hidden;
}
.slick-vertical .slick-slide
{
    display: block;

    height: auto;

    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}

/*end slider*/


/*log-in after authorization*/
.icon-log-in{
  margin-left: 15px;
}
.icon-log-in img{
  border-radius: 50%;
  width: 60px;
  height: 60px;
  background-size: 32px;
  border: 2px solid #fff;
}

.log-in{
  position: relative;
  top: 3px;
}
.log-in-menu-1:after {
  content: "";
  background: url(../img/lang-block.png) no-repeat;
  width: 12px;
  height: 8px;
  position: absolute;
  right: 65%;
  bottom: 0;
  margin-top: -4px;
  opacity: 0.2;
  transition: all 0.3s ease; 
}

.log-in-menu-1:hover:after {
  opacity: 1;
  transition: all 0.3s ease; 
}

.main-item-log-in {
  color: #fff;
  z-index: 9;
}

.log-in-menu-1 ul {
  visibility: visible;
  opacity: 1;
  position: absolute;
  background: #040406;
  min-width: 250px;
  z-index: 2;
  left: -115px;
  top: 70px;
  transition: all 0.5s ease;
  visibility: hidden;
  opacity: 0;
  border: 1px solid #201f28;
  box-shadow: 0px 10px 25px 0px rgb(0 0 0 / 0.6); 
}

.hidden-block-log-in a{
  padding-left: 50px;
  text-transform: none;
  font-weight: normal;
  font-size: 14px;
}
.hidden-block-log-in a:hover {
  background: #0d0e15;

}
.hidden-block-log-in li a:after{
  content: "";
  position: absolute;
  left: 35px;
  top: 12px;
  width: 8px;
  height: 12px;
  opacity: 0.2;
  transition: all 0.3s ease; 
}
.hidden-block-log-in li a:hover:after{
  opacity: 1;
  transition: all 0.3s ease; 
}

.hidden-block-log-in:after {
background: url(../img/hidden-block-log-in.png) no-repeat;
  position: absolute;
  width: 20px;
  height: 10px;
  right: 23px;
  top: -10px;
  content: "";
}

.main-item-log-in:focus ~ .hidden-block-log-in,
.main-item-log-in:active ~ .hidden-block-log-in {
  visibility: visible;
  opacity: 1;
}
.hidden-block-log-in a:after{
  content: "";
  position: absolute;
  left: 30px;
  top: 20px;
  width: 16px;
  height: 15px;
  opacity: 0.3;
  transition: all 0.3s ease; 
}
.log-out{
 padding: 10px 0px;
 border-top: 1px solid#1c1e23;
}
.hidden-block-log-in img{
  border-radius: 50%;
  width: 48px;
  height: 48px;
  background-size: 48px;
}
.icon-login-big{
  padding: 30px 30px 20px 30px;
  border-bottom: 1px solid#1c1e23;
}
.icon-login-big span{
  color: #8c84a2;
  font-size: 11px;
}
.icon-text{
  font-size: 16px;
}
.icon-login-big p{
  position: relative;
}
.hidden-block-log-in a:hover:after{
  opacity: 1;
  transition: all 0.3s ease; 
}

.menulog-in li a {
  color: #fff;
  display: block;
  line-height: 36px;
  font-size: 12px;
  position: relative;
 font-weight:600;
}

.menulog-in li a:hover {
  color: #ff9c00;
  font-weight:600;
}

.menulog-in .active a {
  color: #ffac5b;
}


/*animation*/

.smoke { 
    position: absolute; 
    left: 0; 
    right: 0; 
    top: 600px; 
    height: 484px; 
    width: 100%; 
    background-image: url(../img/smoke.png); 
    background-position: left top; 
    background-repeat: repeat-x;
    -webkit-animation: smoke 20s linear infinite; 
    animation: smoke 20s linear infinite; 
    -webkit-animation-fill-mode: forwards; 
    animation-fill-mode: forwards; 
 }

@-webkit-keyframes smoke { 0% { background-position: left -1920px top; }
  100% { background-position: left 1920px top; } }

@keyframes smoke { 0% { background-position: left -1920px top; }
  100% { background-position: left 1920px top; } }


.sparks { position: absolute; width: 1200px; left: 50%; bottom: -100px; z-index: 1; }
.sparks > div { position: absolute; }
.sparks .spark_1 { background: url(../img/spark_1.png) no-repeat; width: 764px; height: 313px; right: 0; bottom: -320px; -webkit-transform: scale(0.6); transform: scale(0.6); -webkit-animation: spark-1 4s linear infinite; animation: spark-1 4s linear infinite; -webkit-animation-delay: 1s; animation-delay: 1s; }
.sparks .spark_2 { background: url(../img/spark_2.png) no-repeat; width: 179px; height: 335px; right: 230px; bottom: -320px; -webkit-transform: scale(0.6); transform: scale(0.6); -webkit-animation: spark-1 4s linear infinite; animation: spark-1 4s linear infinite; -webkit-animation-delay: 2s; animation-delay: 2s; }
.sparks .spark_3 { background: url(../img/spark_3.png) no-repeat; width: 128px; height: 165px; right: 280px; bottom: -140px; -webkit-transform: scale(0.6); transform: scale(0.6); -webkit-animation: spark-3 4s linear infinite; animation: spark-3 4s linear infinite; -webkit-animation-delay: 2s; animation-delay: 2s; }
.sparks .spark-big { background: url(../img/spark_4.png) no-repeat; width: 794px; height: 176px; right: 0; bottom: -180px; -webkit-transform: scale(0.6); transform: scale(0.6); -webkit-animation: spark-5 4s linear infinite; animation: spark-5 4s linear infinite; }
.sparks .spark_5 { -webkit-animation-delay: 2s; animation-delay: 2s; right: 40px; }

.sparks_2 .spark_1 { background: url(../img/spark_1.png) no-repeat; -webkit-animation-delay: 2s; animation-delay: 2s; }
.sparks_2 .spark_2 { background: url(../img/spark_2.png) no-repeat; -webkit-animation-delay: 3s; animation-delay: 3s; }
.sparks_2 .spark_3 { background: url(../img/spark_3.png) no-repeat; -webkit-animation-delay: 3s; animation-delay: 3s; }
.sparks_2 .spark-big { background: url(../img/spark_4.png) no-repeat; }
.sparks_2 .spark_5 { -webkit-animation-delay: 3s; animation-delay: 3s; }

.sparks_2 { margin-left: -500px;}

@-webkit-keyframes spark-1 { 0% { bottom: -320px; -webkit-transform: scale(0.6); transform: scale(0.6); opacity: 0; }
  25% { bottom: -240px; -webkit-transform: scale(0.7); transform: scale(0.7); opacity: 1; }
  50% { bottom: -160px; -webkit-transform: scale(0.8); transform: scale(0.8); opacity: 1; }
  75% { bottom: -80px; -webkit-transform: scale(0.9); transform: scale(0.9); opacity: 0.5; }
  100% { bottom: 0px; -webkit-transform: scale(1); transform: scale(1); opacity: 0; } }

@keyframes spark-1 { 0% { bottom: -320px; -webkit-transform: scale(0.6); transform: scale(0.6); opacity: 0; }
  25% { bottom: -240px; -webkit-transform: scale(0.7); transform: scale(0.7); opacity: 1; }
  50% { bottom: -160px; -webkit-transform: scale(0.8); transform: scale(0.8); opacity: 1; }
  75% { bottom: -80px; -webkit-transform: scale(0.9); transform: scale(0.9); opacity: 0.5; }
  100% { bottom: 0px; -webkit-transform: scale(1); transform: scale(1); opacity: 0; } }
@-webkit-keyframes spark-3 { 0% { bottom: -140px; -webkit-transform: scale(0.6); transform: scale(0.6); opacity: 0; }
  25% { bottom: -80px; -webkit-transform: scale(0.7); transform: scale(0.7); opacity: 1; }
  50% { bottom: -20px; -webkit-transform: scale(0.8); transform: scale(0.8); opacity: 1; }
  75% { bottom: 40px; -webkit-transform: scale(0.9); transform: scale(0.9); opacity: 0.5; }
  100% { bottom: 100px; -webkit-transform: scale(1); transform: scale(1); opacity: 0; } }
@keyframes spark-3 { 0% { bottom: -140px; -webkit-transform: scale(0.6); transform: scale(0.6); opacity: 0; }
  25% { bottom: -80px; -webkit-transform: scale(0.7); transform: scale(0.7); opacity: 1; }
  50% { bottom: -20px; -webkit-transform: scale(0.8); transform: scale(0.8); opacity: 1; }
  75% { bottom: 40px; -webkit-transform: scale(0.9); transform: scale(0.9); opacity: 0.5; }
  100% { bottom: 100px; -webkit-transform: scale(1); transform: scale(1); opacity: 0; } }
@-webkit-keyframes spark-5 { 0% { bottom: -180px; -webkit-transform: scale(0.6); transform: scale(0.6); opacity: 0; }
  25% { bottom: -120px; -webkit-transform: scale(0.7); transform: scale(0.7); opacity: 1; }
  50% { bottom: -60px; -webkit-transform: scale(0.8); transform: scale(0.8); opacity: 1; }
  75% { bottom: 0px; -webkit-transform: scale(0.9); transform: scale(0.9); opacity: 0.5; }
  100% { bottom: 60px; -webkit-transform: scale(1); transform: scale(1); opacity: 0; } }
@keyframes spark-5 { 0% { bottom: -180px; -webkit-transform: scale(0.6); transform: scale(0.6); opacity: 0; }
  25% { bottom: -120px; -webkit-transform: scale(0.7); transform: scale(0.7); opacity: 1; }
  50% { bottom: -60px; -webkit-transform: scale(0.8); transform: scale(0.8); opacity: 1; }
  75% { bottom: 0px; -webkit-transform: scale(0.9); transform: scale(0.9); opacity: 0.5; }
  100% { bottom: 60px; -webkit-transform: scale(1); transform: scale(1); opacity: 0; } }


.ray {
  background: url(../img/ray.png) no-repeat;
  width: 300px;
  height: 300px;
  position: absolute;
  left: 117px;
  top: -44px;
  animation: ray 14s infinite linear;
  transform: rotate(0deg);
  opacity: 0.6;
}
@keyframes ray {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/*end animation*/

/* ==========================================
   EQUALIZER INFO MODULE - EPIC MEDIEVAL STYLE
   ========================================== */

/* Main Container */
.equalizer-info-container {
    padding: 0;
    margin: 0;
    min-height: 100vh;
}

/* Page Header */
.equalizer-page-header {
    border-bottom: 3px solid rgba(255, 156, 0, 0.6);
    box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.8);
    margin-bottom: 30px;
    position: relative;
    overflow: hidden;
}

.equalizer-page-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="crack" patternUnits="userSpaceOnUse" width="100" height="100"><path d="M20,20 L80,80 M80,20 L20,80" stroke="rgba(255,156,0,0.1)" stroke-width="1" fill="none"/></pattern></defs><rect width="100" height="100" fill="url(%23crack)"/></svg>');
    opacity: 0.3;
}

.equalizer-title-container {
    padding: 30px 50px;
    position: relative;
    z-index: 2;
}

.equalizer-page-title {
    font-size: 2.8rem;
    color: #ff9c00;
    text-transform: uppercase;
    font-weight: 700;
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.9),
                 0px 0px 20px rgba(255, 156, 0, 0.6);
    letter-spacing: 3px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.equalizer-title-icon {
    font-size: 3.5rem;
    margin-right: 20px;
    filter: drop-shadow(0px 0px 10px rgba(255, 156, 0, 0.8));
    animation: float 3s ease-in-out infinite;
}

.equalizer-title-decoration {
    position: absolute;
    right: -50px;
    top: 50%;
    transform: translateY(-50%);
    width: 100px;
    height: 2px;
    background: linear-gradient(90deg, rgba(255, 156, 0, 0.8) 0%, transparent 100%);
    box-shadow: 0px 0px 10px rgba(255, 156, 0, 0.6);
}

/* Sections */
.equalizer-section {
    margin-bottom: 40px;
    padding: 30px;
    background: url('../img/bg-news-repeat.jpg') repeat;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.6),
                inset 0px 1px 0px rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
}

.equalizer-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 20% 50%, rgba(255, 156, 0, 0.05) 0%, transparent 50%);
    pointer-events: none;
}

.equalizer-section-header {
    margin-bottom: 25px;
    position: relative;
    z-index: 2;
}

.equalizer-section-title {
    font-size: 1.8rem;
    color: #fff;
    text-transform: uppercase;
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    letter-spacing: 1px;
}

.equalizer-icon {
    font-size: 2rem;
    margin-right: 15px;
    filter: drop-shadow(0px 0px 8px rgba(255, 156, 0, 0.7));
}

.equalizer-title-underline {
    height: 3px;
    background: linear-gradient(90deg, #ff9c00 0%, #ffcc00 50%, transparent 100%);
    margin-top: 10px;
    border-radius: 2px;
    box-shadow: 0px 0px 10px rgba(255, 156, 0, 0.6);
}

/* Stats Grid */
.equalizer-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    position: relative;
    z-index: 2;
}

.equalizer-stat-card {
    border: 2px solid rgba(255, 156, 0, 0.4);
    border-radius: 12px;
    padding: 20px;
    background: url('../img/bg-news-repeat.jpg') repeat;
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.equalizer-stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 156, 0, 0.1) 50%, transparent 100%);
    transition: left 0.5s ease;
}

.equalizer-stat-card:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 156, 0, 0.8);
    box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.8),
                0px 0px 20px rgba(255, 156, 0, 0.4);
}

.equalizer-stat-card:hover::before {
    left: 100%;
}

.equalizer-stat-icon {
    font-size: 2.5rem;
    margin-right: 20px;
    filter: drop-shadow(0px 0px 10px rgba(255, 156, 0, 0.8));
}

.equalizer-stat-content {
    display: flex;
    flex-direction: column;
}

.equalizer-stat-label {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 1px;
    margin-bottom: 5px;
}

.equalizer-stat-value {
    color: #ff9c00;
    font-size: 1.4rem;
    font-weight: 700;
    text-shadow: 0px 0px 10px rgba(255, 156, 0, 0.6);
}

/* Tables */
.equalizer-chaos-table,
.equalizer-party-table {
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid rgba(255, 156, 0, 0.3);
    position: relative;
    z-index: 2;
}

.equalizer-table-header {
    padding: 20px;
    border-bottom: 2px solid rgba(255, 156, 0, 0.5);
    display: flex;
    align-items: flex-start;
}

.equalizer-header-cell {
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    letter-spacing: 1px;
}

.equalizer-header-combination,
.equalizer-header-members {
    width: 30%;
    font-size: 1.1rem;
}

.equalizer-header-rates,
.equalizer-header-exp {
    width: 70%;
    text-align: center;
    font-size: 1.1rem;
}

.equalizer-sub-headers {
    display: flex;
    justify-content: space-evenly;
    margin-top: 10px;
    width: 100%;
}

.equalizer-sub-header {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9rem;
    font-weight: 600;
    text-align: center;
    flex: 1;
}

.equalizer-table-body {
    background: url('../img/bg-news-repeat.jpg') repeat;
}

.equalizer-table-row {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid rgba(255, 156, 0, 0.2);
    transition: all 0.3s ease;
}

.equalizer-table-row:hover {
    background: linear-gradient(90deg, rgba(255, 156, 0, 0.1) 0%, transparent 100%);
    box-shadow: inset 3px 0px 0px rgba(255, 156, 0, 0.8);
}

.equalizer-table-row:last-child {
    border-bottom: none;
}

.equalizer-cell {
    color: #fff;
    font-weight: 500;
}

.equalizer-item-name,
.equalizer-party-size {
    width: 30%;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 600;
}

.equalizer-rate-normal,
.equalizer-rate-gold,
.equalizer-exp-same,
.equalizer-exp-diff {
    width: 50%;
    text-align: center;
    color: #ff9c00;
    font-weight: 700;
    text-shadow: 0px 0px 8px rgba(255, 156, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
}

.equalizer-rates-container,
.equalizer-exp-container {
    width: 70%;
    display: flex;
    align-items: center;
}

/* Commands Grid */
.equalizer-commands-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
    position: relative;
    z-index: 2;
}

.equalizer-command-card {
    border: 2px solid rgba(255, 156, 0, 0.3);
    border-radius: 12px;
    padding: 20px;
    background: url('../img/bg-news-repeat.jpg') repeat;
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.equalizer-command-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 156, 0, 0.1) 50%, transparent 100%);
    transition: left 0.5s ease;
}

.equalizer-command-card:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 156, 0, 0.7);
    box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.7),
                0px 0px 15px rgba(255, 156, 0, 0.3);
}

.equalizer-command-card:hover::before {
    left: 100%;
}

.equalizer-command-icon {
    font-size: 2rem;
    margin-right: 15px;
    filter: drop-shadow(0px 0px 8px rgba(255, 156, 0, 0.7));
}

.equalizer-command-content {
    display: flex;
    flex-direction: column;
}

.equalizer-command-name {
    color: #ff9c00;
    font-size: 1.4rem;
    font-weight: 700;
    font-family: 'Courier New', monospace;
    text-shadow: 0px 0px 8px rgba(255, 156, 0, 0.5);
    margin-bottom: 5px;
}

.equalizer-command-description {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1.4;
}

/* Video Container */
.equalizer-video-container {
    position: relative;
    z-index: 2;
}

.equalizer-video-frame {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    border-radius: 15px;
    overflow: hidden;
    border: 3px solid rgba(255, 156, 0, 0.4);
    box-shadow: 0px 15px 40px rgba(0, 0, 0, 0.8),
                0px 0px 30px rgba(255, 156, 0, 0.3);
}

.equalizer-video-frame iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 12px;
}

/* Animations */
@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}

/* Responsive Design */
/* ==========================================
   EQUALIZER UNIFIED WIDGET SYSTEM - EPIC STYLE
   ========================================== */

/* Enhanced Widget Block */
.widget-block {
    position: relative;
    background: url('../img/bg-news-repeat.jpg') repeat;
    width: 380px;
    min-height: 500px;
    max-height: 690px;
    box-shadow: 0px 15px 40px rgba(0, 0, 0, 0.8),
                0px 0px 30px rgba(255, 156, 0, 0.2);
    transition: all 0.3s ease;
}

.widget-block:hover {
    transform: translateY(-5px);
    box-shadow: 0px 20px 50px rgba(0, 0, 0, 0.9),
                0px 0px 40px rgba(255, 156, 0, 0.4);
}

/* Scrollable Content Area */
.equalizer-widget-content {
    max-height: 430px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 5px;
}

/* Custom Scrollbar */
.equalizer-widget-content::-webkit-scrollbar {
    width: 8px;
}

.equalizer-widget-content::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
}

.equalizer-widget-content::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #ff9c00 0%, #ffcc00 100%);
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.2);
}

.equalizer-widget-content::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #ffcc00 0%, #ff9c00 100%);
    box-shadow: 0px 0px 8px rgba(255, 156, 0, 0.6);
}

/* Enhanced Header */
.info-widget-block {
    position: relative;
    padding: 60px 40px 25px 150px;
    background: linear-gradient(90deg, rgba(255, 156, 0, 0.1) 0%, transparent 100%);
    border-bottom: 2px solid rgba(255, 156, 0, 0.5);
    text-transform: uppercase;
    color: #ff9c00;
}

.info-widget-block h2 {
    font-family: 'Candara', sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8),
                 0px 0px 15px rgba(255, 156, 0, 0.6);
    letter-spacing: 1px;
}

/* Icon Improvements */
.top-players:before,
.top-guilds:before,
.top-event:before {
    filter: drop-shadow(0px 0px 10px rgba(255, 156, 0, 0.7));
    transition: all 0.3s ease;
}

.widget-block:hover .top-players:before,
.widget-block:hover .top-guilds:before,
.widget-block:hover .top-event:before {
    filter: drop-shadow(0px 0px 15px rgba(255, 156, 0, 1));
}

/* Unified Row System */
.equalizer-widget-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 25px;
    margin: 0 15px 8px 15px;
    background: url('../img/bg-news-repeat.jpg') repeat;
    border: 1px solid rgba(255, 156, 0, 0.2);
    border-radius: 8px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.equalizer-widget-row::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 156, 0, 0.1) 50%, transparent 100%);
    transition: left 0.5s ease;
}

.equalizer-widget-row:hover {
    background: linear-gradient(90deg, rgba(255, 156, 0, 0.15) 0%, rgba(40, 45, 60, 0.8) 100%);
    border-color: rgba(255, 156, 0, 0.6);
    transform: translateX(5px) scale(1.02);
    box-shadow: 0px 8px 25px rgba(0, 0, 0, 0.6),
                0px 0px 20px rgba(255, 156, 0, 0.4),
                inset 0px 1px 0px rgba(255, 255, 255, 0.1);
}

.equalizer-widget-row:hover::before {
    left: 100%;
}

/* Left Column (Names, Events) */
.equalizer-widget-left {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
}

.equalizer-widget-rank {
    color: #ff9c00;
    font-weight: 700;
    font-size: 1.3rem;
    margin-right: 15px;
    text-shadow: 0px 0px 8px rgba(255, 156, 0, 0.6);
    min-width: 25px;
}

.equalizer-widget-flag {
    margin-right: 10px;
    border-radius: 3px;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
}

.equalizer-widget-logo {
    margin-right: 10px;
    filter: drop-shadow(0px 2px 5px rgba(0, 0, 0, 0.7));
}

.equalizer-widget-name {
    color: #fff;
    font-weight: 600;
    font-size: 1.3rem;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.3s ease;
}

.equalizer-widget-row:hover .equalizer-widget-name {
    color: #ff9c00;
}

.equalizer-widget-subtitle {
    color: rgba(255, 255, 255, 0.6);
    font-size: 1rem;
    margin-top: 2px;
    text-transform: capitalize;
}

/* Right Column (Stats, Times) */
.equalizer-widget-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
}

.equalizer-widget-value {
    color: #ff9c00;
    font-weight: 700;
    font-size: 1.3rem;
    text-shadow: 0px 0px 8px rgba(255, 156, 0, 0.6);
    transition: all 0.3s ease;
}

.equalizer-widget-row:hover .equalizer-widget-value {
    color: #ffcc00;
    text-shadow: 0px 0px 12px rgba(255, 204, 0, 0.8);
}

.equalizer-widget-time {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.1rem;
    margin-top: 2px;
    font-weight: 500;
}

.equalizer-widget-status {
    color: #4CAF50;
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.equalizer-widget-status.closed {
    color: #f44336;
}

/* Enhanced More Button */
.equalizer-widget-footer {
    padding: 20px;
    text-align: center;
    border-top: 1px solid rgba(255, 156, 0, 0.2);
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.3) 100%);
}

/* Event Status Colors */
.equalizer-event-open {
    color: #4CAF50 !important;
    text-shadow: 0px 0px 8px rgba(76, 175, 80, 0.6);
}

.equalizer-event-starting {
    color: #FF9800 !important;
    text-shadow: 0px 0px 8px rgba(255, 152, 0, 0.6);
}

.equalizer-event-closed {
    color: #f44336 !important;
    text-shadow: 0px 0px 8px rgba(244, 67, 54, 0.6);
}

/* Responsive Design */
@media (max-width: 768px) {
    .widget-block {
        width: 100%;
        max-width: 350px;
    }
    
    .equalizer-widget-row {
        margin: 0 10px 8px 10px;
        padding: 12px 15px;
    }
    
    .equalizer-widget-name {
        font-size: 0.9rem;
    }
}

/* ==========================================
   UNIVERSAL RANKING & INFO STYLES - COMPATIBILITY
   ========================================== */

/* Improve any tables that might be used for rankings or info */
.content table,
.rankings table,
.info-content table {
    border-collapse: collapse;
    width: 100%;
    margin: 15px 0;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.9) 0%, rgba(25, 30, 50, 0.8) 100%);
    border: 2px solid rgba(255, 156, 0, 0.3);
    border-radius: 10px;
    overflow: hidden;
}

.content table th,
.rankings table th,
.info-content table th {
    background: linear-gradient(90deg, rgba(255, 156, 0, 0.2) 0%, transparent 100%);
    color: #ff9c00;
    font-size: 1.3rem;
    font-weight: 700;
    padding: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    border-bottom: 2px solid rgba(255, 156, 0, 0.5);
}

.content table td,
.rankings table td,
.info-content table td {
    padding: 12px 15px;
    color: #fff;
    font-size: 1.2rem;
    font-weight: 600;
    border-bottom: 1px solid rgba(255, 156, 0, 0.1);
}

.content table tr:hover,
.info-content table tr:hover {
    background: linear-gradient(90deg, rgba(255, 156, 0, 0.15) 0%, rgba(40, 45, 60, 0.8) 100%);
    transform: scale(1.01);
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.5);
}

/* Improve general content text for better readability */
.content,
.rankings,
.info-content {
    font-size: 1.1rem;
    line-height: 1.6;
}

.content h1,
.content h2,
.content h3,
.rankings h1,
.rankings h2,
.rankings h3,
.info-content h1,
.info-content h2,
.info-content h3 {
    color: #ff9c00;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    margin: 20px 0 15px 0;
}

.content h1,
.rankings h1,
.info-content h1 {
    font-size: 2.2rem;
}

.content h2,
.rankings h2,
.info-content h2 {
    font-size: 1.8rem;
}

.content h3,
.rankings h3,
.info-content h3 {
    font-size: 1.5rem;
}

/* ==========================================
   ENHANCED RANKINGS STYLES FOR SHADOWMU TEMPLATE
   Comprehensive CSS for all ranking modules
   ========================================== */

/* Main ranking container and page title enhancement */
.page-title {
    position: relative;
    text-align: center;
    padding: 40px 0;
    margin-bottom: 30px;
}

.page-title span {
    font-size: 32px;
    font-weight: bold;
    text-transform: uppercase;
    color: #ffcc00;
    text-shadow: 
        0 0 20px rgba(255, 204, 0, 0.5),
        0 2px 4px rgba(0, 0, 0, 0.8);
    letter-spacing: 2px;
    position: relative;
}

/* Rankings menu styling */
.rankings_menu {
    width: 100%;
    overflow: auto;
    text-align: center;
    margin-bottom: 30px;
    padding: 20px 0;
}

.rankings_menu a {
    display: inline-block;
    width: 160px;
    margin: 5px;
    padding: 12px 8px;
    background: linear-gradient(135deg, rgba(25, 16, 7, 0.95), rgba(40, 25, 10, 0.9));
    border: 2px solid rgba(255, 204, 0, 0.3);
    border-radius: 8px;
    color: #ffcc00;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.rankings_menu a::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 204, 0, 0.2), transparent);
    transition: left 0.5s ease;
}

.rankings_menu a:hover {
    border-color: rgba(255, 204, 0, 0.6);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(255, 204, 0, 0.3);
    color: #fff;
}

.rankings_menu a:hover::before {
    left: 100%;
}

.rankings_menu a.active {
    background: linear-gradient(135deg, #ffcc00, #ff9900);
    border-color: #ffcc00;
    color: #000;
    font-weight: bold;
}

/* Enhanced ranking table container */
.table.dataTableChar,
.table.general-rank,
.rankings-table {
    width: 100%;
    margin: 20px 0;
    background: linear-gradient(135deg, rgba(25, 16, 7, 0.95), rgba(40, 25, 10, 0.9));
    border: 2px solid rgba(255, 204, 0, 0.3);
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 
        0 10px 30px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 204, 0, 0.1);
    backdrop-filter: blur(10px);
    border-collapse: separate;
    border-spacing: 0;
}

/* Table header styling */
.table.dataTableChar thead th,
.table.dataTableChar thead td,
.table.general-rank thead th,
.table.general-rank thead td,
.rankings-table tr:first-child td,
.bg-primary {
    background: linear-gradient(135deg, rgba(255, 204, 0, 0.9), rgba(255, 153, 0, 0.8)) !important;
    color: #000 !important;
    font-weight: bold !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    padding: 15px 12px !important;
    text-align: center !important;
    border-bottom: 2px solid rgba(255, 204, 0, 0.5) !important;
    text-shadow: none !important;
}

/* Table body rows */
.table.dataTableChar tbody tr,
.table.general-rank tbody tr,
.rankings-table tr {
    border-bottom: 1px solid rgba(255, 204, 0, 0.1);
    transition: all 0.3s ease;
    position: relative;
}

/* Table cells */
.table.dataTableChar td,
.table.general-rank td,
.rankings-table td {
    padding: 15px 12px !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    border-bottom: 1px solid rgba(255, 204, 0, 0.1) !important;
    vertical-align: middle !important;
    text-align: center !important;
}

/* Rankings place styling */
.rankings-table-place {
    color: #ffcc00 !important;
    font-weight: bold !important;
    font-size: 16px !important;
    text-shadow: 0 0 10px rgba(255, 204, 0, 0.5) !important;
}

/* Character images styling */
.rankings-class-image {
    width: 40px !important;
    height: auto !important;
    border-radius: 50% !important;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5) !important;
    transition: all 0.3s ease !important;
}

.rankings-class-image-sidebar {
    width: 25px !important;
    height: auto !important;
    border-radius: 50% !important;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5) !important;
}

/* Online/Offline status styling */
.default-char-online {
    border: 3px solid #00ff00 !important;
    box-shadow: 
        0 0 15px rgba(0, 255, 0, 0.5),
        inset 0 0 10px rgba(0, 255, 0, 0.2) !important;
}

.default-char-offline {
    border: 3px solid #888888 !important;
    box-shadow: 
        0 0 15px rgba(136, 136, 136, 0.3),
        inset 0 0 10px rgba(136, 136, 136, 0.1) !important;
}

/* Guild logo specific styling */
.rankings_guild_logo tr td {
    border: 0px !important;
    padding: 5px !important;
    margin: 0px !important;
}

/* Gens ranking image styling */
.rankings-gens-img {
    width: auto !important;
    height: 30px !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Online status indicators */
.online-status-indicator {
    width: 16px !important;
    height: 16px !important;
    margin-left: 8px !important;
    vertical-align: middle !important;
}

/* Rankings update timestamp */
.alert.alert-primary {
    background: linear-gradient(135deg, rgba(255, 204, 0, 0.15), rgba(255, 153, 0, 0.1)) !important;
    border: 1px solid rgba(255, 204, 0, 0.3) !important;
    border-radius: 8px !important;
    color: #ffcc00 !important;
    padding: 15px !important;
    margin-top: 20px !important;
    font-size: 13px !important;
    text-align: right !important;
}

/* Character profile links */
.table.dataTableChar a,
.table.general-rank a,
.rankings-table a {
    color: #ffcc00 !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}

.table.dataTableChar a:hover,
.table.general-rank a:hover {
    color: #fff !important;
    text-shadow: 0 0 10px rgba(255, 204, 0, 0.8) !important;
}

/* DataTables pagination styling */
div.dataTables_wrapper div.dataTables_paginate ul.pagination .page-link {
    background: linear-gradient(135deg, rgba(25, 16, 7, 0.95), rgba(40, 25, 10, 0.9)) !important;
    border: 1px solid rgba(255, 204, 0, 0.3) !important;
    color: #ffcc00 !important;
    padding: 8px 16px !important;
    margin: 0 2px !important;
    border-radius: 5px !important;
    transition: all 0.3s ease !important;
}

div.dataTables_wrapper div.dataTables_paginate ul.pagination .page-link:hover {
    background: linear-gradient(135deg, rgba(255, 204, 0, 0.2), rgba(255, 153, 0, 0.1)) !important;
    border-color: rgba(255, 204, 0, 0.6) !important;
    color: #fff !important;
}

div.dataTables_wrapper div.dataTables_paginate ul.pagination .page-item.active .page-link {
    background: linear-gradient(135deg, #ffcc00, #ff9900) !important;
    border-color: #ffcc00 !important;
    color: #000 !important;
    font-weight: bold !important;
}

/* DataTables search filter styling */
div.dataTables_wrapper div.dataTables_filter input {
    background: linear-gradient(135deg, rgba(25, 16, 7, 0.95), rgba(40, 25, 10, 0.9)) !important;
    border: 2px solid rgba(255, 204, 0, 0.3) !important;
    border-radius: 8px !important;
    color: #fff !important;
    padding: 10px 15px !important;
    margin-left: 10px !important;
    transition: all 0.3s ease !important;
}

div.dataTables_wrapper div.dataTables_filter input:focus {
    border-color: rgba(255, 204, 0, 0.6) !important;
    box-shadow: 0 0 15px rgba(255, 204, 0, 0.3) !important;
    outline: none !important;
}

/* Rankings filter menu styling */
.rankings-filter-container {
    background: linear-gradient(135deg, rgba(25, 16, 7, 0.95), rgba(40, 25, 10, 0.9));
    border: 2px solid rgba(255, 204, 0, 0.3);
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 30px;
    text-align: center;
}

/* Responsive design for rankings */
@media (max-width: 768px) {
    .table.dataTableChar,
    .table.general-rank,
    .rankings-table {
        font-size: 12px;
    }
    
    .table.dataTableChar td,
    .table.general-rank td,
    .rankings-table td {
        padding: 10px 8px !important;
        font-size: 12px !important;
    }
    
    .page-title span {
        font-size: 24px;
    }
    
    .rankings_menu a {
        width: 140px;
        font-size: 12px;
        padding: 10px 6px;
    }
    
    .rankings-class-image {
        width: 30px !important;
    }
}

/* ========================================== 
   EQUALIZER REGISTRATION FORM STYLES
   ========================================== */

.equalizer-registration-container {
    min-height: 100vh;
    background: url('../img/bg-news-repeat.jpg') repeat;
    padding: 50px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.equalizer-registration-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(22, 11, 3, 0.9) 100%);
    z-index: 1;
}

.equalizer-registration-header {
    position: relative;
    z-index: 2;
    margin-bottom: 50px;
}

.equalizer-registration-title {
    font-family: 'Candara', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: #ff9c00;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 3px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8),
                 0px 0px 15px rgba(255, 156, 0, 0.6);
    position: relative;
    padding: 20px 40px;
}

.equalizer-registration-title::before,
.equalizer-registration-title::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 80px;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, #ff9c00 50%, transparent 100%);
    transform: translateY(-50%);
}

.equalizer-registration-title::before {
    left: -100px;
}

.equalizer-registration-title::after {
    right: -100px;
}

.equalizer-registration-form {
    position: relative;
    z-index: 2;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.9) 0%, rgba(37, 22, 15, 0.9) 100%);
    border: 2px solid rgba(255, 156, 0, 0.3);
    border-radius: 15px;
    padding: 40px;
    min-width: 500px;
    box-shadow: 0px 15px 40px rgba(0, 0, 0, 0.8),
                0px 0px 30px rgba(255, 156, 0, 0.2);
}

.equalizer-form-group {
    display: block;
    margin-bottom: 25px;
    position: relative;
}

.equalizer-form-content {
    width: 100%;
    position: relative;
}

.equalizer-form-label {
    display: block;
    color: #ff9c00;
    font-family: 'Candara', sans-serif;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 10px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8),
                 0px 0px 15px rgba(255, 156, 0, 0.6);
    text-align: center;
}

.equalizer-form-input {
    width: 100%;
    background: rgba(0, 0, 0, 0.8);
    border: 3px solid rgba(255, 156, 0, 0.5);
    border-radius: 10px;
    padding: 18px 25px;
    color: #fff;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    transition: all 0.3s ease;
    outline: none;
    text-align: center;
    box-shadow: inset 0px 2px 5px rgba(0, 0, 0, 0.8),
                0px 0px 15px rgba(255, 156, 0, 0.2);
}

.equalizer-form-input::placeholder {
    color: rgba(255, 255, 255, 0.6);
    font-style: italic;
    text-align: center;
}

.equalizer-form-input:focus {
    border-color: #ff9c00;
    box-shadow: inset 0px 2px 5px rgba(0, 0, 0, 0.8),
                0px 0px 25px rgba(255, 156, 0, 0.6),
                0px 0px 40px rgba(255, 156, 0, 0.3);
    background: rgba(0, 0, 0, 0.9);
    transform: scale(1.02);
}

.equalizer-form-input:valid {
    border-color: #4caf50;
    box-shadow: inset 0px 2px 5px rgba(0, 0, 0, 0.8),
                0px 0px 15px rgba(76, 175, 80, 0.4);
}

.equalizer-form-input:invalid {
    border-color: #d47500;
}

.equalizer-form-actions {
    margin-top: 40px;
    text-align: center;
}

.equalizer-form-checkbox {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 30px;
}

.equalizer-confirm-button {
    margin-top: 20px;
}

.equalizer-checkbox {
    appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid #ff9c00;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.7);
    cursor: pointer;
    position: relative;
    transition: all 0.3s ease;
}

.equalizer-checkbox:checked {
    background: #ff9c00;
    border-color: #ffcc00;
}

.equalizer-checkbox:checked::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #5c320f;
    font-weight: bold;
    font-size: 14px;
}

.equalizer-checkbox-label {
    cursor: pointer;
    color: #fff;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    text-align: center;
}

.equalizer-link {
    color: #ff9c00;
    text-decoration: underline;
    transition: color 0.3s ease;
}

.equalizer-link:hover {
    color: #ffcc00;
}

.equalizer-recaptcha-container {
    display: flex;
    justify-content: center;
    margin: 20px 0;
}

/* Invalid feedback styling */
.invalid-feedback {
    color: #f44336;
    font-size: 12px;
    margin-top: 5px;
    display: none;
}

.was-validated .equalizer-form-input:invalid ~ .invalid-feedback {
    display: block;
}

.was-validated .equalizer-checkbox:invalid ~ .invalid-feedback {
    display: block;
}

/* ===============================
   EQUALIZER DOWNLOADS SECTION
   =============================== */

/* Main downloads container */
.panel-downloads {
    margin-bottom: 40px;
    background: linear-gradient(135deg, rgba(25, 16, 7, 0.95), rgba(40, 25, 10, 0.9));
    border: 1px solid rgba(255, 204, 0, 0.3);
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 
        0 10px 30px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 204, 0, 0.1);
    backdrop-filter: blur(10px);
    position: relative;
    transition: all 0.3s ease;
}

.panel-downloads::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, 
        transparent, 
        #ffcc00 20%, 
        #ff9900 50%, 
        #ffcc00 80%, 
        transparent
    );
    animation: shimmer 3s infinite;
}

@keyframes shimmer {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

.panel-downloads:hover {
    transform: translateY(-5px);
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.6),
        inset 0 1px 0 rgba(255, 204, 0, 0.2);
    border-color: rgba(255, 204, 0, 0.5);
}

/* Panel title styling */
.panel-downloads .panel-title {
    background: linear-gradient(135deg, rgba(255, 204, 0, 0.15), rgba(255, 153, 0, 0.1));
    color: #ffcc00;
    font-size: 20px;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
    padding: 20px;
    margin: 0;
    border-bottom: 1px solid rgba(255, 204, 0, 0.3);
    position: relative;
    letter-spacing: 1px;
    text-shadow: 0 0 10px rgba(255, 204, 0, 0.5);
}

.panel-downloads .panel-title::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -1px;
    transform: translateX(-50%);
    width: 80px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #ffcc00, transparent);
}

/* Panel body */
.panel-downloads .panel-body {
    padding: 0;
}

/* Table styling */
.panel-downloads .table {
    margin: 0;
    background: transparent;
    color: #fff;
}

.panel-downloads .table tr {
    border-bottom: 1px solid rgba(255, 204, 0, 0.1);
    transition: all 0.3s ease;
    position: relative;
}

.panel-downloads .table tr:hover {
    background: linear-gradient(135deg, rgba(255, 204, 0, 0.1), rgba(255, 153, 0, 0.05));
    transform: translateX(10px);
}

.panel-downloads .table tr:hover::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, #ffcc00, #ff9900);
}

.panel-downloads .table td {
    padding: 20px;
    border: none;
    vertical-align: middle;
    position: relative;
}

/* Download title styling */
.panel-downloads .table td:first-child {
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* Download description */
.download-description {
    font-size: 14px;
    color: #cccccc !important;
    margin-top: 8px;
    line-height: 1.4;
    opacity: 0.9;
}

/* File size styling */
.panel-downloads .table td:nth-child(2) {
    font-weight: bold;
    color: #ffcc00;
    font-size: 14px;
    text-align: center;
}

/* Download button container */
.panel-downloads .table td:last-child {
    text-align: center;
}

/* Enhanced download button */
.panel-downloads .btn {
    background: linear-gradient(135deg, #ffcc00, #ff9900) !important;
    border: none !important;
    color: #000 !important;
    padding: 12px 24px !important;
    border-radius: 25px !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    font-size: 12px !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: 0 4px 15px rgba(255, 204, 0, 0.3) !important;
    text-decoration: none !important;
}

.panel-downloads .btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left 0.5s ease;
}

.panel-downloads .btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(255, 204, 0, 0.5) !important;
    background: linear-gradient(135deg, #ff9900, #ffcc00) !important;
    color: #000 !important;
}

.panel-downloads .btn:hover::before {
    left: 100%;
}

.panel-downloads .btn:active {
    transform: translateY(0) !important;
    box-shadow: 0 4px 15px rgba(255, 204, 0, 0.3) !important;
}

/* Enhanced page title for downloads */
.page-title {
    position: relative;
    text-align: center;
    padding: 40px 0;
    margin-bottom: 30px;
}

.page-title span {
    font-size: 32px;
    font-weight: bold;
    text-transform: uppercase;
    color: #ffcc00;
    text-shadow: 
        0 0 20px rgba(255, 204, 0, 0.5),
        0 2px 4px rgba(0, 0, 0, 0.8);
    letter-spacing: 2px;
    position: relative;
}

.page-title span::before,
.page-title span::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 100px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #ffcc00, transparent);
}

.page-title span::before {
    right: 110%;
}

.page-title span::after {
    left: 110%;
}

/* Responsive design for downloads */
@media (max-width: 768px) {
    .panel-downloads .table td {
        padding: 15px 10px;
        font-size: 14px;
    }
    
    .panel-downloads .panel-title {
        font-size: 18px;
        padding: 15px;
    }
    
    .panel-downloads .btn {
        padding: 10px 20px !important;
        font-size: 11px !important;
    }
    
    .page-title span {
        font-size: 24px;
    }
}

/* ==========================================
   DONATION MODULE STYLES - SHADOWMU THEME
   ========================================== */

.donation-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.donation-content {
    background: url('../img/bg-news-repeat.jpg') repeat;
    border: 2px solid rgba(255, 156, 0, 0.3);
    border-radius: 15px;
    padding: 40px;
    box-shadow: 
        0 10px 30px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 204, 0, 0.1);
    position: relative;
    overflow: hidden;
}

.donation-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 20% 50%, rgba(255, 156, 0, 0.05) 0%, transparent 50%);
    pointer-events: none;
}

.donation-header {
    text-align: center;
    margin-bottom: 50px;
    position: relative;
    z-index: 2;
}

.donation-title {
    font-size: 2.5rem;
    color: #ff9c00;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 20px;
    text-shadow: 
        2px 2px 4px rgba(0, 0, 0, 0.8),
        0px 0px 15px rgba(255, 156, 0, 0.6);
    letter-spacing: 2px;
}

.donation-description {
    font-size: 1.3rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
    max-width: 600px;
    margin: 0 auto;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
}

.donation-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 40px;
    position: relative;
    z-index: 2;
}

.donation-option {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(25, 30, 50, 0.8) 100%);
    border: 2px solid rgba(255, 156, 0, 0.3);
    border-radius: 15px;
    padding: 35px 25px;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.donation-option::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 156, 0, 0.1) 50%, transparent 100%);
    transition: left 0.5s ease;
}

.donation-option:hover {
    transform: translateY(-8px);
    border-color: rgba(255, 156, 0, 0.6);
    box-shadow: 
        0 15px 35px rgba(0, 0, 0, 0.6),
        0 0 25px rgba(255, 156, 0, 0.3);
}

.donation-option:hover::before {
    left: 100%;
}

.option-icon {
    width: 120px;
    height: 80px;
    margin: 0 auto 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: all 0.3s ease;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.vip-icon {
    background-image: url('../img/viplogo.png');
}

.wc-icon {
    background-image: url('../img/gold.png');
}

.donation-option:hover .option-icon {
    transform: scale(1.1) rotate(5deg);
}

.donation-option h3 {
    font-size: 1.8rem;
    color: #ff9c00;
    margin-bottom: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

.donation-option p {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
    margin-bottom: 30px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
}

.donation-button {
    /* Heredar estilos del button existente */
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease; 
    cursor: pointer; 
    background-image: url(../img/button.jpg); 
    background-repeat: no-repeat; 
    background-size: cover; 
    padding: 19px 45px; 
    border: none; 
    color: #fff; 
    text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.2); 
    position: relative; 
    z-index: 1; 
    text-align: center; 
    text-transform: uppercase; 
    font-family: Candara, Calibri, Segoe, Segoe UI, Optima, Arial, sans-serif; 
    font-size: 15px;  
    -webkit-box-shadow: 0px 10px 15px 0px rgba(0, 0, 0, 0.2); 
    box-shadow: 0px 10px 15px 0px rgba(0, 0, 0, 0.2);
    /* Estilos específicos para donation */
    display: inline-block;
    text-decoration: none;
    margin-top: 10px;
}

.donation-button:hover {
    -webkit-filter: brightness(120%); 
    filter: brightness(120%);
    box-shadow: 0 10px 26px -6px rgb(255 156 0 / 50%);
    color: #fff;
    text-decoration: none;
}

/* Responsive Design */
@media (max-width: 768px) {
    .donation-content {
        padding: 25px;
    }
    
    .donation-title {
        font-size: 2rem;
    }
    
    .donation-description {
        font-size: 1.1rem;
    }
    
    .donation-options {
        grid-template-columns: 1fr;
        gap: 25px;
    }
    
    .donation-option {
        padding: 25px 20px;
    }
    
    .donation-option h3 {
        font-size: 1.5rem;
    }
    
    .donation-button {
        padding: 12px 28px;
        font-size: 13px;
    }
}

/* ==========================================
   PAYMENT MODULE STYLES - SHADOWMU THEME
   ========================================== */

.payment-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* Page Title Enhancement for Payment */
.page-title {
    position: relative;
    text-align: center;
    padding: 40px 0;
    margin-bottom: 30px;
}

.page-title span {
    font-size: 2.5rem;
    font-weight: bold;
    text-transform: uppercase;
    color: #ffcc00;
    text-shadow: 
        0 0 20px rgba(255, 204, 0, 0.5),
        0 2px 4px rgba(0, 0, 0, 0.8);
    letter-spacing: 2px;
    position: relative;
}

.page-title span::before,
.page-title span::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 100px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #ffcc00, transparent);
}

.page-title span::before {
    right: 110%;
}

.page-title span::after {
    left: 110%;
}

/* Payment Alert Styles */
.alert.alert-info {
    background: linear-gradient(135deg, rgba(255, 156, 0, 0.15), rgba(255, 153, 0, 0.1)) !important;
    border: 2px solid rgba(255, 156, 0, 0.3) !important;
    border-radius: 15px !important;
    color: #fff !important;
    padding: 25px !important;
    margin-bottom: 40px !important;
    font-size: 1.1rem !important;
    line-height: 1.6 !important;
    text-align: center !important;
    position: relative;
    overflow: hidden;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.5);
}

.alert.alert-info::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 50% 50%, rgba(255, 156, 0, 0.05) 0%, transparent 50%);
    pointer-events: none;
}

.alert.alert-info a {
    display: inline-block;
    margin-top: 15px;
    transition: all 0.3s ease;
    border-radius: 10px;
    overflow: hidden;
}

.alert.alert-info a:hover {
    transform: scale(1.05);
    filter: brightness(1.2);
}

.alert.alert-info img {
    border-radius: 10px;
    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.6);
    transition: all 0.3s ease;
}

/* Payment Panel Container */
.panelvip {
    background: url('../img/bg-news-repeat.jpg') repeat !important;
    border: 2px solid rgba(255, 156, 0, 0.3) !important;
    border-radius: 15px !important;
    margin: 20px !important;
    box-shadow: 
        0 15px 40px rgba(0, 0, 0, 0.6),
        inset 0 1px 0 rgba(255, 204, 0, 0.1) !important;
    transition: all 0.3s ease !important;
    position: relative;
    overflow: hidden;
    display: inline-block;
    width: 350px;
    vertical-align: top;
}

.panelvip::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 156, 0, 0.1) 50%, transparent 100%);
    transition: left 0.5s ease;
}

.panelvip:hover {
    transform: translateY(-8px) !important;
    border-color: rgba(255, 156, 0, 0.6) !important;
    box-shadow: 
        0 20px 50px rgba(0, 0, 0, 0.8),
        0 0 30px rgba(255, 156, 0, 0.4) !important;
}

.panelvip:hover::before {
    left: 100%;
}

/* Panel Header */
.panelvip .panel-heading {
    background: linear-gradient(135deg, rgba(255, 156, 0, 0.9), rgba(255, 153, 0, 0.8)) !important;
    color: #000 !important;
    font-size: 1.4rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    padding: 20px !important;
    text-align: center !important;
    border-bottom: 2px solid rgba(255, 156, 0, 0.5) !important;
    text-shadow: none !important;
    border-radius: 13px 13px 0 0 !important;
    position: relative;
}

.panelvip .panel-heading::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -2px;
    transform: translateX(-50%);
    width: 80px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #000, transparent);
}

/* Panel Body */
.panelvip .panel-body {
    padding: 30px 25px !important;
    text-align: center !important;
    background: transparent !important;
    position: relative;
    z-index: 2;
}

/* WCoin Amount */
.dias {
    font-size: 2.2rem !important;
    color: #ff9c00 !important;
    font-weight: 700 !important;
    margin-bottom: 20px !important;
    text-shadow: 
        2px 2px 4px rgba(0, 0, 0, 0.8),
        0px 0px 15px rgba(255, 156, 0, 0.6) !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
}

/* Gold Image */
.panelvip .panel-body img {
    margin: 20px 0 !important;
    filter: drop-shadow(0px 8px 20px rgba(0, 0, 0, 0.7)) !important;
    transition: all 0.3s ease !important;
}

.panelvip:hover .panel-body img {
    transform: scale(1.1) rotate(5deg) !important;
    filter: drop-shadow(0px 10px 25px rgba(255, 156, 0, 0.4)) !important;
}

/* Payment Methods Text */
.paid {
    font-size: 1.2rem !important;
    color: #fff !important;
    font-weight: 600 !important;
    margin-top: 25px !important;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8) !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

/* Panel Footer */
.panelvip .panel-footer {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(25, 30, 50, 0.5) 100%) !important;
    border-top: 1px solid rgba(255, 156, 0, 0.3) !important;
    padding: 25px !important;
    text-align: center !important;
    border-radius: 0 0 13px 13px !important;
    position: relative;
    z-index: 2;
}

/* Price Container */
.price-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    width: 100%;
}

/* Price Styling - Mejorado y Centrado */
.price {
    font-size: 1.6rem !important;
    color: #ffcc00 !important;
    font-weight: 800 !important;
    text-shadow: 
        2px 2px 4px rgba(0, 0, 0, 0.9),
        0px 0px 20px rgba(255, 204, 0, 0.8),
        0px 0px 40px rgba(255, 204, 0, 0.4) !important;
    margin: 8px auto !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    padding: 12px 20px !important;
    background: linear-gradient(135deg, rgba(255, 156, 0, 0.3), rgba(255, 153, 0, 0.2)) !important;
    border-radius: 12px !important;
    border: 2px solid rgba(255, 156, 0, 0.5) !important;
    min-width: 280px !important;
    text-align: center !important;
    display: block !important;
    font-family: 'Candara', sans-serif !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: 
        0 6px 20px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

.price::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 50% 50%, rgba(255, 204, 0, 0.1) 0%, transparent 70%);
    pointer-events: none;
}

.price:hover {
    transform: scale(1.02) !important;
    border-color: rgba(255, 156, 0, 0.8) !important;
    text-shadow: 
        2px 2px 4px rgba(0, 0, 0, 0.9),
        0px 0px 25px rgba(255, 204, 0, 1),
        0px 0px 50px rgba(255, 204, 0, 0.6) !important;
}

/* Payment Buttons - Centrados y Mejorados */
.payment-button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    padding: 20px 35px !important;
    margin: 10px auto !important;
    border-radius: 35px !important;
    text-decoration: none !important;
    font-weight: 800 !important;
    font-size: 1.3rem !important;
    text-transform: uppercase !important;
    letter-spacing: 3px !important;
    transition: all 0.4s ease !important;
    position: relative !important;
    overflow: hidden !important;
    border: 3px solid transparent !important;
    min-width: 260px !important;
    max-width: 300px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6) !important;
    text-align: center !important;
    font-family: 'Candara', sans-serif !important;
    cursor: pointer !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.payment-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    transition: left 0.7s ease;
}

.payment-button:hover::before {
    left: 100%;
}

.payment-button span {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    text-align: center;
}

/* MercadoPago Button - Centrado y Mejorado */
.payment-button.mercadopago {
    background: linear-gradient(135deg, #0099e6, #0066cc, #004499) !important;
    color: #ffffff !important;
    border-color: #0099e6 !important;
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.7) !important;
}

.payment-button.mercadopago:hover {
    background: linear-gradient(135deg, #00ccff, #0099e6, #66d9ff) !important;
    transform: translateY(-6px) scale(1.08) !important;
    box-shadow: 
        0 18px 40px rgba(0, 153, 230, 0.6),
        0 0 40px rgba(0, 204, 255, 0.4) !important;
    color: #ffffff !important;
    text-decoration: none !important;
    border-color: #00ccff !important;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8) !important;
}

/* PayPal Button - Centrado y Mejorado */
.payment-button.paypal {
    background: linear-gradient(135deg, #ffcc33, #ff9900, #cc7700) !important;
    color: #000000 !important;
    border-color: #ffcc33 !important;
    text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.4) !important;
}

.payment-button.paypal:hover {
    background: linear-gradient(135deg, #ffdd66, #ffcc33, #ffee99) !important;
    transform: translateY(-6px) scale(1.08) !important;
    box-shadow: 
        0 18px 40px rgba(255, 204, 51, 0.6),
        0 0 40px rgba(255, 238, 153, 0.5) !important;
    color: #000000 !important;
    text-decoration: none !important;
    border-color: #ffdd66 !important;
    text-shadow: 1px 1px 4px rgba(255, 255, 255, 0.5) !important;
}

/* Payment Button Icons - Centrados y Mejorados */
.payment-button img {
    transition: all 0.4s ease !important;
    filter: drop-shadow(0px 4px 10px rgba(0, 0, 0, 0.5)) !important;
    margin: 0 !important;
    vertical-align: middle !important;
    flex-shrink: 0 !important;
}

.payment-button:hover img {
    transform: scale(1.3) rotate(15deg) !important;
    filter: drop-shadow(0px 6px 15px rgba(0, 0, 0, 0.7)) !important;
}

/* Price Container - Centrado */
.price-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    width: 100%;
    text-align: center;
    padding: 10px;
}

/* Click text styling - Removido ya que usamos price-container */
.panelvip .panel-footer .click {
    display: none;
}

/* Compatibilidad con enlaces antiguos */
.panelvip .panel-footer a:not(.payment-button) {
    display: inline-block !important;
    background: linear-gradient(135deg, #ffcc00, #ff9900) !important;
    color: #000 !important;
    padding: 15px 25px !important;
    margin: 8px 5px !important;
    border-radius: 25px !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    font-size: 0.9rem !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    overflow: hidden !important;
    border: 2px solid #ffcc00 !important;
    min-width: 160px !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4) !important;
    text-align: center !important;
    line-height: 1.3 !important;
}

/* Click text styling - Removido ya que usamos price-container */
.panelvip .panel-footer .click {
    display: none;
}

/* Compatibilidad con enlaces antiguos */
.panelvip .panel-footer a:not(.payment-button) {
    display: inline-block !important;
    background: linear-gradient(135deg, #ffcc00, #ff9900) !important;
    color: #000 !important;
    padding: 15px 25px !important;
    margin: 8px 5px !important;
    border-radius: 25px !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    font-size: 0.9rem !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    overflow: hidden !important;
    border: 2px solid #ffcc00 !important;
    min-width: 160px !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4) !important;
    text-align: center !important;
    line-height: 1.3 !important;
}

/* Payment Buttons */
.payment-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 15px 25px !important;
    margin: 8px 5px !important;
    border-radius: 25px !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    font-size: 1.1rem !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    overflow: hidden !important;
    border: 2px solid transparent !important;
    min-width: 160px !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4) !important;
}

.payment-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s ease;
}

.payment-button:hover::before {
    left: 100%;
}

/* MercadoPago Button */
.payment-button.mercadopago {
    background: linear-gradient(135deg, #00a8e6, #0074cc) !important;
    color: #fff !important;
    border-color: #00a8e6 !important;
}

.payment-button.mercadopago:hover {
    background: linear-gradient(135deg, #0074cc, #00a8e6) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 30px rgba(0, 168, 230, 0.4) !important;
    color: #fff !important;
    text-decoration: none !important;
}

/* PayPal Button */
.payment-button.paypal {
    background: linear-gradient(135deg, #ffc439, #ff8c00) !important;
    color: #000 !important;
    border-color: #ffc439 !important;
}

.payment-button.paypal:hover {
    background: linear-gradient(135deg, #ff8c00, #ffc439) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 30px rgba(255, 196, 57, 0.4) !important;
    color: #000 !important;
    text-decoration: none !important;
}

/* Payment Button Icons */
.payment-button img {
    transition: all 0.3s ease !important;
    filter: drop-shadow(0px 2px 5px rgba(0, 0, 0, 0.3)) !important;
}

.payment-button:hover img {
    transform: scale(1.1) !important;
}

/* Responsive Design */
@media (max-width: 768px) {
    .panelvip {
        width: 100% !important;
        max-width: 350px !important;
        margin: 15px auto !important;
        display: block !important;
    }
    
    .page-title span {
        font-size: 2rem;
    }
    
    .page-title span::before,
    .page-title span::after {
        width: 60px;
    }
    
    .page-title span::before {
        right: 105%;
    }
    
    .page-title span::after {
        left: 105%;
    }
    
    .alert.alert-info {
        padding: 20px !important;
        font-size: 1rem !important;
    }
    
    .alert.alert-info img {
        max-width: 200px !important;
        width: 100% !important;
    }
    
    .panelvip .panel-heading {
        font-size: 1.2rem !important;
        padding: 15px !important;
    }
    
    .panelvip .panel-body {
        padding: 20px 15px !important;
    }
    
    .dias {
        font-size: 1.8rem !important;
    }
    
    .panelvip .panel-body img {
        max-width: 120px !important;
    }
    
    .price {
        font-size: 1.2rem !important;
        min-width: 220px !important;
        padding: 10px 15px !important;
        margin: 6px auto !important;
        letter-spacing: 1px !important;
    }
    
    .payment-button {
        padding: 16px 25px !important;
        font-size: 1.1rem !important;
        min-width: 200px !important;
        max-width: 280px !important;
        margin: 8px auto !important;
        letter-spacing: 2px !important;
        gap: 10px !important;
    }
    
    .payment-button img {
        max-width: 28px !important;
    }
    
    .price-container {
        gap: 15px;
        padding: 8px;
    }
    
    /* Compatibilidad con enlaces antiguos */
    .panelvip .panel-footer a:not(.payment-button) {
        padding: 12px 20px !important;
        font-size: 0.8rem !important;
        min-width: 140px !important;
        margin: 5px 2px !important;
        display: block !important;
        width: 90% !important;
    }
    
    .panelvip .panel-footer a:not(.payment-button) img {
        max-width: 25px !important;
    }
    
    .panelvip .panel-footer .click {
        font-size: 1rem !important;
        margin-bottom: 15px !important;
    }
}

@media (max-width: 480px) {
    .payment-button {
        width: 95% !important;
        margin: 10px auto !important;
        min-width: auto !important;
        max-width: none !important;
        display: flex !important;
        font-size: 1rem !important;
        padding: 14px 20px !important;
        letter-spacing: 1px !important;
    }
    
    .price {
        font-size: 1.1rem !important;
        min-width: 200px !important;
        width: 95% !important;
        margin: 8px auto !important;
        padding: 8px 12px !important;
    }
    
    .price-container {
        width: 100%;
        gap: 12px;
        padding: 5px;
    }
    
    .payment-button img {
        max-width: 24px !important;
    }
    
    /* Compatibilidad con enlaces antiguos */
    .panelvip .panel-footer a:not(.payment-button) {
        width: 100% !important;
        margin: 5px 0 !important;
        min-width: auto !important;
        display: block !important;
    }
}

/* Enhanced animations for payment module */
@keyframes paymentGlow {
    0% {
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
    }
    50% {
        box-shadow: 0 8px 25px rgba(255, 156, 0, 0.3);
    }
    100% {
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
    }
}

/* VIP Benefits Table Styling */
.vip-benefit {
    color: #c0c0c0 !important; /* Color plata para VIP PLATA */
    font-weight: bold !important;
    text-shadow: 0 0 5px rgba(192, 192, 192, 0.8) !important;
}

.vip-benefit-gold {
    color: #ffcc00 !important; /* Color oro para VIP ORO */
    font-weight: bold !important;
    text-shadow: 0 0 8px rgba(255, 204, 0, 0.8) !important;
}

/* ==========================================
   VIP PACKAGES HORIZONTAL TABLE LAYOUT
   ========================================== */

.vip-packages-container {
    max-width: 1200px;
    margin: 0 auto;
}

.vip-section {
    margin-bottom: 40px;
}

.vip-section-title {
    text-align: center;
    font-size: 1.8rem;
    font-weight: bold;
    margin-bottom: 20px;
    padding: 15px;
    border-radius: 10px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

.vip-section:nth-child(2) .vip-section-title {
    background: linear-gradient(135deg, #c0c0c0, #e8e8e8);
    color: #333;
    border: 2px solid #c0c0c0;
}

.vip-section:nth-child(3) .vip-section-title {
    background: linear-gradient(135deg, #ffcc00, #ff9c00);
    color: #000;
    border: 2px solid #ffcc00;
}

.vip-packages-table {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    align-items: stretch;
}

.vip-package-card {
    flex: 1;
    min-width: 280px;
    max-width: 350px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
    transition: all 0.3s ease;
    position: relative;
}

.vip-package-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6);
}

.vip-silver {
    background: linear-gradient(to bottom, rgba(25, 16, 7, 0.95), rgba(40, 25, 10, 0.9));
    border: 2px solid #c0c0c0;
}

.vip-gold {
    background: linear-gradient(to bottom, rgba(25, 16, 7, 0.95), rgba(40, 25, 10, 0.9));
    border: 2px solid #ffcc00;
}

.vip-package-header {
    padding: 15px;
    text-align: center;
    font-weight: bold;
}

.vip-silver .vip-package-header {
    background: linear-gradient(135deg, #c0c0c0, #e8e8e8);
    color: #333;
}

.vip-gold .vip-package-header {
    background: linear-gradient(135deg, #ffcc00, #ff9c00);
    color: #000;
}

.vip-package-header h4 {
    margin: 0 0 5px 0;
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.vip-duration {
    font-size: 1.4rem;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.vip-package-body {
    padding: 20px;
    text-align: center;
}

.vip-logo {
    width: 80px;
    height: auto;
    margin-bottom: 15px;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.6));
}

.vip-prices {
    margin-bottom: 20px;
}

.price-item {
    font-size: 1.5rem;
    font-weight: bold;
    margin: 8px 0;
    padding: 8px 12px;
    border-radius: 6px;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
}

.vip-silver .price-item {
    color: #c0c0c0;
    background: rgba(192, 192, 192, 0.1);
    border: 1px solid rgba(192, 192, 192, 0.3);
}

.vip-gold .price-item {
    color: #ffcc00;
    background: rgba(255, 204, 0, 0.1);
    border: 1px solid rgba(255, 204, 0, 0.3);
}

.vip-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.vip-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    text-align: center;
}

.vip-btn img {
    width: 20px;
    height: auto;
    vertical-align: middle;
}

.vip-btn.mercadopago {
    background: linear-gradient(135deg, #009ee3, #0074cc);
    color: #fff;
    border-color: #009ee3;
}

.vip-btn.mercadopago:hover {
    background: linear-gradient(135deg, #0074cc, #009ee3);
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 168, 230, 0.4);
    text-decoration: none;
    color: #fff;
}

.vip-btn.paypal {
    background: linear-gradient(135deg, #ffc439, #ff8c00);
    color: #000;
    border-color: #ffc439;
}

.vip-btn.paypal:hover {
    background: linear-gradient(135deg, #ff8c00, #ffc439);
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(255, 196, 57, 0.4);
    text-decoration: none;
    color: #000;
}

/* Responsive Design para VIP Packages */
@media (max-width: 768px) {
    .vip-packages-table {
        flex-direction: column;
        align-items: center;
    }
    
    .vip-package-card {
        max-width: 100%;
        width: 90%;
    }
    
    .vip-section-title {
        font-size: 1.4rem;
        padding: 10px;
    }
    
    .vip-duration {
        font-size: 1.2rem;
    }
    
    .price-item {
        font-size: 1.5rem;
    }
    
    .vip-btn {
        font-size: 0.9rem;
        padding: 10px 14px;
    }
}

@media (max-width: 480px) {
    .vip-packages-container {
        padding: 10px;
    }
    
    .vip-package-card {
        width: 95%;
        min-width: auto;
    }
    
    .vip-section-title {
        font-size: 1.2rem;
    }
    
    .vip-logo {
        width: 60px;
    }
    
    .price-item {
        font-size: 1rem;
        padding: 6px 10px;
    }
    
    .vip-btn {
        font-size: 0.8rem;
        padding: 8px 12px;
    }
    
    .vip-btn img {
        width: 16px;
	}
}

/* ==========================================
   FAQ MODULE - EQUALIZER STYLES
   ========================================== */

/* FAQ Container */
.faq-container {
    max-width: 1000px;
    margin: 20px auto;
    padding: 20px;
}

/* FAQ Item */
.faq-item {
    background: linear-gradient(to bottom, rgba(25, 16, 7, 0.95), rgba(40, 25, 10, 0.9));
    border: 2px solid rgba(255, 156, 0, 0.6);
    border-radius: 12px;
    margin-bottom: 15px;
    overflow: hidden;
    box-shadow: 
        0 6px 20px rgba(0, 0, 0, 0.6),
        inset 0 1px 0 rgba(255, 204, 0, 0.1);
    transition: all 0.3s ease;
    position: relative;
}

.faq-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 156, 0, 0.1), transparent);
    transition: left 0.5s ease;
    z-index: 1;
}

.faq-item:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 156, 0, 0.8);
    box-shadow: 
        0 10px 30px rgba(0, 0, 0, 0.8),
        0 0 20px rgba(255, 156, 0, 0.3);
}

.faq-item:hover::before {
    left: 100%;
}

/* FAQ Question */
.faq-question {
    display: flex;
    align-items: center;
    padding: 20px 25px;
    cursor: pointer;
    background: linear-gradient(135deg, rgba(255, 156, 0, 0.2), rgba(255, 156, 0, 0.1));
    border-bottom: 1px solid rgba(255, 156, 0, 0.3);
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
}

.faq-question:hover {
    background: linear-gradient(135deg, rgba(255, 156, 0, 0.3), rgba(255, 156, 0, 0.2));
}

.faq-question.active {
    background: linear-gradient(135deg, rgba(255, 156, 0, 0.4), rgba(255, 156, 0, 0.3));
    border-bottom-color: rgba(255, 156, 0, 0.5);
}

/* FAQ Emoji */
.faq-emoji {
    font-size: 1.8rem;
    margin-right: 15px;
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.8));
    transition: transform 0.3s ease;
}

.faq-question:hover .faq-emoji {
    transform: scale(1.1);
}

/* FAQ Text */
.faq-text {
    flex: 1;
    color: #ffcc00;
    font-size: 1.5rem;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* FAQ Arrow */
.faq-arrow {
    color: #ff9c00;
    font-size: 1.2rem;
    font-weight: bold;
    transition: transform 0.3s ease;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
}

/* FAQ Answer */
.faq-answer {
    max-height: 0;
    overflow: hidden;
    background: linear-gradient(to bottom, rgba(40, 25, 10, 0.8), rgba(25, 16, 7, 0.9));
    transition: max-height 0.4s ease, padding 0.4s ease;
    position: relative;
    z-index: 2;
}

.faq-answer.active {
    max-height: 500px;
    padding: 25px;
}

/* FAQ Content */
.faq-content {
    color: #fff;
    font-size: 1.5rem;
    line-height: 1.8;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.faq-content strong {
    color: #ffcc00;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
}

.faq-content br {
    margin-bottom: 8px;
}

/* Enlaces en FAQ */
.faq-content a {
    color: #ff9c00;
    text-decoration: none;
    font-weight: bold;
    border-bottom: 1px solid rgba(255, 156, 0, 0.3);
    transition: all 0.3s ease;
}

.faq-content a:hover {
    color: #ffcc00;
    border-bottom-color: rgba(255, 204, 0, 0.8);
    text-shadow: 0 0 8px rgba(255, 204, 0, 0.6);
}

/* Estilos especiales para textos destacados */
.faq-content [style*="color: #ff4444"] {
    background: linear-gradient(135deg, rgba(244, 67, 54, 0.2), rgba(244, 67, 54, 0.1));
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid rgba(244, 67, 54, 0.4);
    display: inline-block;
    margin: 5px 0;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
}

/* Responsive Design para FAQ */
@media (max-width: 768px) {
    .faq-container {
        padding: 10px;
        margin: 10px;
    }
    
    .faq-question {
        padding: 15px 20px;
        flex-wrap: wrap;
    }
    
    .faq-emoji {
        font-size: 1.5rem;
        margin-right: 10px;
    }
    
    .faq-text {
        font-size: 1rem;
        flex-basis: calc(100% - 60px);
    }
    
    .faq-arrow {
        font-size: 1rem;
    }
    
    .faq-answer.active {
        padding: 20px;
        max-height: 600px;
    }
    
    .faq-content {
        font-size: 0.9rem;
        line-height: 1.6;
    }
}

@media (max-width: 480px) {
    .faq-question {
        padding: 12px 15px;
    }
    
    .faq-emoji {
        font-size: 1.3rem;
        margin-right: 8px;
    }
    
    .faq-text {
        font-size: 0.9rem;
        text-transform: none;
        letter-spacing: 0;
    }
    
    .faq-answer.active {
        padding: 15px;
        max-height: 700px;
    }
    
    .faq-content {
        font-size: 0.85rem;
        line-height: 1.5;
    }
}

/* Animación suave para los acordeones */
@keyframes faqGlow {
    0% { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 204, 0, 0.1); }
    50% { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8), 0 0 20px rgba(255, 156, 0, 0.3); }
    100% { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 204, 0, 0.1); }
}

.faq-question.active {
    animation: faqGlow 2s ease-in-out infinite;
}

/* ==========================================
   MY ACCOUNT MODULE - EQUALIZER STYLES
   ========================================== *//* My Account Table - Estilo Equalizer */
.myaccount-table {
    width: 100% !important;
    border: 2px solid rgba(255, 156, 0, 0.6) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    background: linear-gradient(to bottom, rgba(25, 16, 7, 0.95), rgba(40, 25, 10, 0.9)) !important;
    box-shadow: 
        0 8px 25px rgba(0, 0, 0, 0.6),
        inset 0 1px 0 rgba(255, 204, 0, 0.1) !important;
    margin-bottom: 30px !important;
}

.myaccount-table tr {
    border-bottom: 1px solid rgba(255, 156, 0, 0.2) !important;
    transition: all 0.3s ease !important;
}

.myaccount-table tr:hover {
    background: rgba(255, 156, 0, 0.1) !important;
    box-shadow: inset 0 0 20px rgba(255, 204, 0, 0.1) !important;
}

.myaccount-table tr:nth-child(odd) {
    background: rgba(25, 16, 7, 0.7) !important;
}

.myaccount-table tr:nth-child(even) {
    background: rgba(40, 25, 10, 0.7) !important;
}

.myaccount-table tr td:first-child {
    background: linear-gradient(135deg, rgba(255, 156, 0, 0.3), rgba(255, 156, 0, 0.2)) !important;
    color: #ffcc00 !important;
    font-weight: bold !important;
    font-size: 1.1rem !important;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8) !important;
    border-right: 2px solid rgba(255, 156, 0, 0.4) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.myaccount-table tr td {
    padding: 18px 20px !important;
    border-bottom: 1px solid rgba(255, 156, 0, 0.15) !important;
    color: #fff !important;
    font-size: 1rem !important;
    vertical-align: middle !important;
}

.myaccount-table tr:last-child td {
    border-bottom: none !important;
}

/* Labels de estado con estilo Equalizer */
.myaccount-table .label-success {
    background: linear-gradient(135deg, #44a047, #2e7d32) !important;
    color: #fff !important;
    padding: 8px 12px !important;
    border-radius: 20px !important;
    font-size: 0.9rem !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3) !important;
}

.myaccount-table .label-danger {
    background: linear-gradient(135deg, #e53e3e, #c53030) !important;
    color: #fff !important;
    padding: 8px 12px !important;
    border-radius: 20px !important;
    font-size: 0.9rem !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3) !important;
}

.myaccount-table .label-default {
    background: linear-gradient(135deg, #ffcc00, #ff9c00) !important;
    color: #000 !important;
    padding: 8px 12px !important;
    border-radius: 20px !important;
    font-size: 0.9rem !important;
    font-weight: bold !important;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3) !important;
}

/* Botones de cambio con estilo Equalizer */
.myaccount-table .btn {
    background: linear-gradient(135deg, #ff9c00, #cc7700) !important;
    color: #000 !important;
    border: 2px solid #ffcc00 !important;
    border-radius: 8px !important;
    padding: 8px 16px !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3) !important;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.3) !important;
}

.myaccount-table .btn:hover {
    background: linear-gradient(135deg, #ffcc00, #ff9c00) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 15px rgba(255, 156, 0, 0.4) !important;
    color: #000 !important;
    text-decoration: none !important;
}

/* Characters Section - Estilo Equalizer */
.myaccount-character-block {
    background: linear-gradient(to bottom, rgba(25, 16, 7, 0.95), rgba(40, 25, 10, 0.9)) !important;
    border: 2px solid rgba(255, 156, 0, 0.6) !important;
    border-radius: 15px !important;
    padding: 15px !important;
    margin: 10px !important;
    box-shadow: 
        0 8px 25px rgba(0, 0, 0, 0.6),
        inset 0 1px 0 rgba(255, 204, 0, 0.1) !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    overflow: hidden !important;
}

.myaccount-character-block::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 156, 0, 0.1), transparent);
    transition: left 0.5s ease;
}

.myaccount-character-block:hover {
    transform: translateY(-5px) !important;
    border-color: rgba(255, 156, 0, 0.8) !important;
    box-shadow: 
        0 15px 35px rgba(0, 0, 0, 0.8),
        0 0 20px rgba(255, 156, 0, 0.3) !important;
}

.myaccount-character-block:hover::before {
    left: 100%;
}

.myaccount-character-block img {
    border-radius: 10px !important;
    border: 2px solid rgba(255, 156, 0, 0.4) !important;
    box-shadow: 
        0 5px 15px rgba(0, 0, 0, 0.8),
        inset 0 1px 0 rgba(255, 204, 0, 0.2) !important;
    transition: all 0.3s ease !important;
}

.myaccount-character-block img:hover {
    border-color: rgba(255, 156, 0, 0.8) !important;
    box-shadow: 
        0 8px 20px rgba(0, 0, 0, 0.9),
        0 0 15px rgba(255, 156, 0, 0.4) !important;
    transform: scale(1.05) !important;
}

.myaccount-character-block-location {
    color: #ffcc00 !important;
    font-size: 0.9rem !important;
    font-weight: bold !important;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8) !important;
    margin-top: 10px !important;
    text-align: center !important;
    background: rgba(255, 156, 0, 0.1) !important;
    padding: 8px !important;
    border-radius: 8px !important;
    border: 1px solid rgba(255, 156, 0, 0.3) !important;
}

.myaccount-character-block-level {
    background: linear-gradient(135deg, #ff9c00, #cc7700) !important;
    color: #000 !important;
    font-weight: bold !important;
    font-size: 1rem !important;
    padding: 6px 12px !important;
    border-radius: 20px !important;
    border: 2px solid #ffcc00 !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5) !important;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.3) !important;
    position: absolute !important;
    top: 15px !important;
    right: 15px !important;
    z-index: 10 !important;
}

.myaccount-character-name {
    text-align: center !important;
    margin-bottom: 15px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid rgba(255, 156, 0, 0.3) !important;
}

.myaccount-character-name a {
    color: #ffcc00 !important;
    font-weight: bold !important;
    font-size: 1.2rem !important;
    text-decoration: none !important;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8) !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    transition: all 0.3s ease !important;
}

.myaccount-character-name a:hover {
    color: #fff !important;
    text-shadow: 0 0 10px rgba(255, 204, 0, 0.8) !important;
    text-decoration: none !important;
}

/* Connection History Table - Estilo Equalizer */
.general-table-ui {
    background: linear-gradient(to bottom, rgba(25, 16, 7, 0.95), rgba(40, 25, 10, 0.9)) !important;
    border: 2px solid rgba(255, 156, 0, 0.6) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 
        0 8px 25px rgba(0, 0, 0, 0.6),
        inset 0 1px 0 rgba(255, 204, 0, 0.1) !important;
}

.general-table-ui tr {
    border-bottom: 1px solid rgba(255, 156, 0, 0.2) !important;
    transition: all 0.3s ease !important;
}

.general-table-ui tr:hover {
    background: rgba(255, 156, 0, 0.1) !important;
}

.general-table-ui tr:first-child {
    background: linear-gradient(135deg, rgba(255, 156, 0, 0.4), rgba(255, 156, 0, 0.3)) !important;
}

.general-table-ui tr:first-child td {
    color: #000 !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.3) !important;
}

.general-table-ui td {
    color: #fff !important;
    padding: 12px 15px !important;
    border-bottom: 1px solid rgba(255, 156, 0, 0.15) !important;
}

/* Responsive Design para MyAccount */
@media (max-width: 768px) {
    .myaccount-table tr td:first-child {
        font-size: 1rem !important;
    }
    
    .myaccount-table tr td {
        padding: 12px 15px !important;
        font-size: 0.9rem !important;
    }
    
    .myaccount-character-block {
        margin: 5px !important;
        padding: 10px !important;
    }
    
    .myaccount-character-block-level {
        font-size: 0.8rem !important;
        padding: 4px 8px !important;
        top: 10px !important;
        right: 10px !important;
    }
    
    .myaccount-character-name a {
        font-size: 1rem !important;
    }
}

.panelvip:hover {
    animation: paymentGlow 2s ease-in-out infinite;
}

/* ==========================================
   PAYMENT & VIP MODULE STYLES - EQUALIZER COLORS
   ========================================== */

/* Tabla de beneficios VIP */
.server-info-module {
    margin: 20px auto 30px auto;
    max-width: 900px;
    background: linear-gradient(to bottom, rgba(25, 16, 7, 0.95), rgba(40, 25, 10, 0.9));
    border: 1px solid rgba(255, 156, 0, 0.4);
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

.server-info-module h2 {
    color: #ffcc00 !important;
    text-shadow: 0 0 10px rgba(255, 204, 0, 0.6) !important;
    margin-bottom: 15px !important;
}

.server-info-module .table {
    background: transparent !important;
    color: #fff !important;
    border: 1px solid rgba(255, 156, 0, 0.3) !important;
    border-radius: 6px !important;
}

.server-info-module .table thead th {
    background: linear-gradient(to bottom, #ff9c00, #cc7700) !important;
    color: #000 !important;
    font-weight: bold !important;
    border: 1px solid #ffcc00 !important;
    padding: 12px 8px !important;
}

.server-info-module .table tbody td {
    border: 1px solid rgba(255, 156, 0, 0.2) !important;
    padding: 10px 8px !important;
    background: rgba(25, 16, 7, 0.3) !important;
}

.server-info-module .table tbody tr:hover td {
    background: rgba(255, 156, 0, 0.1) !important;
}

.server-info-module .vip-benefit {
    color: #ffcc00 !important;
    font-weight: bold !important;
    text-shadow: 0 0 5px rgba(255, 204, 0, 0.4) !important;
}

/* Estilos generales de los paneles */
.panelvip, .panelwcoin {
    max-width: 1000px;
    margin: 15px auto;
    border: 1px solid rgba(255, 156, 0, 0.4); /* Dorado Equalizer */
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    background: linear-gradient(to bottom, rgba(25, 16, 7, 0.95), rgba(40, 25, 10, 0.9)); /* Fondo dorado oscuro */
    overflow: hidden;
    font-family: Arial, sans-serif;
    color: #fff;
}

/* Estilos del encabezado del panel */
.panelvip .panel-heading, .panelwcoin .panel-heading {
    background: linear-gradient(to bottom, #ff9c00, #cc7700) !important; /* Degradado dorado Equalizer */
    color: #000 !important; /* Texto negro para contraste */
    font-size: 1.1rem !important;
    font-weight: bold !important;
    text-align: center !important;
    padding: 8px !important;
    border-bottom: 1px solid #ffcc00 !important;
    border-radius: 8px 8px 0 0 !important;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.3) !important;
}

/* Estilos del cuerpo del panel */
.panelvip .panel-body, .panelwcoin .panel-body {
    padding: 15px !important;
    text-align: center !important;
    background: transparent !important;
}

/* Estilos para la cantidad de WcoinC/VIP */
.panelvip .dias, .panelwcoin .dias {
    font-size: 1.3rem !important;
    font-weight: bold !important;
    color: #ffcc00 !important; /* Dorado para "WC/VIP" */
    margin-bottom: 10px !important;
    text-shadow: 0 0 10px rgba(255, 204, 0, 0.6) !important;
}

/* Estilos para las imágenes dentro del panel */
.panelvip .panel-body img, .panelwcoin .panel-body img {
    margin: 8px 0 !important;
    border-radius: 50% !important;
    max-width: 80px !important;
    height: auto !important;
    transition: transform 0.3s ease !important;
    filter: drop-shadow(0 0 8px rgba(255, 156, 0, 0.4)) !important;
}

.panelvip .panel-body img:hover, .panelwcoin .panel-body img:hover {
    transform: scale(1.05) !important;
}

/* Estilos para el texto "Medios de Pago" */
.panelvip .paid, .panelwcoin .paid {
    font-size: 1.5rem !important;
    font-weight: bold !important;
    color: #ffcc00 !important; /* Dorado para "Medios de Pago" */
    margin: 15px 0 !important;
    text-shadow: 0 0 5px #ffcc00 !important;
    transition: transform 0.2s ease-in-out !important;
}

.panelvip .paid:hover, .panelwcoin .paid:hover {
    transform: scale(1.05) !important;
}

/* Estilos del pie del panel */
.panelvip .panel-footer, .panelwcoin .panel-footer {
    padding: 12px !important;
    background: linear-gradient(to bottom, rgba(40, 25, 10, 0.9), rgba(25, 16, 7, 0.95)) !important;
    border-top: 1px solid rgba(255, 156, 0, 0.4) !important;
    text-align: center !important;
    border-radius: 0 0 8px 8px !important;
}

/* Estilos del contenedor de precios - SIN RECUADRO, CENTRADO */
.panelvip .price-container, .panelwcoin .price-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 15px 10px !important;
    margin: 10px auto !important;
    max-width: 100% !important;
    background: transparent !important;
    gap: 12px !important;
}

/* Estilos para los precios - SIN RECUADRO, CENTRADOS */
.panelvip .price, .panelwcoin .price {
    font-size: 1.8rem !important;
    color: #ffcc00 !important; /* Dorado para el precio */
    font-weight: bold !important;
    text-align: center !important;
    margin: 0 auto 10px auto !important;
    background: transparent !important;
    padding: 8px 15px !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-shadow: 
        0 0 15px rgba(255, 204, 0, 0.8),
        0 0 25px rgba(255, 204, 0, 0.4),
        2px 2px 4px rgba(0, 0, 0, 0.8) !important;
    display: block !important;
    width: 100% !important;
    letter-spacing: 1px !important;
}

/* Estilos generales de los botones de pago - LETRA MÁS GRANDE */
.panelvip .payment-button, .panelwcoin .payment-button {
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    position: relative !important;
    z-index: 1 !important;
    display: block !important;
    width: 100% !important;
    padding: 12px 20px !important;
    border-radius: 8px !important;
    font-size: 1.3rem !important; /* Aumentado de 0.9rem a 1.3rem */
    font-weight: bold !important;
    text-align: center !important;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2) !important;
    background: #ff9c00 !important; /* Fondo dorado */
    border: 2px solid #ffcc00 !important; /* Borde dorado claro */
    color: #000 !important; /* Texto negro */
    margin-top: 10px !important;
    text-decoration: none !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
}

.panelvip .payment-button img, .panelwcoin .payment-button img {
    vertical-align: middle !important;
    margin-right: 8px !important;
    max-height: 24px !important; /* Aumentado de 20px a 24px */
    width: auto !important;
    transition: transform 0.3s ease !important;
}

.panelvip .payment-button:hover, .panelwcoin .payment-button:hover {
    background: #ff9c00 !important;
    color: #000 !important;
    box-shadow: 0px 8px 12px rgba(0, 0, 0, 0.4) !important;
    text-decoration: none !important;
    transform: translateY(-3px) scale(1.02) !important;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3) !important;
}

.panelvip .payment-button::before, .panelwcoin .payment-button::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    background: linear-gradient(45deg, #ffcc00, #ff9c00, #cc7700, #ffcc00);
    background-size: 400%;
    z-index: -1;
    filter: blur(5px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    animation: glowing 5s linear infinite;
    opacity: 0;
    transition: opacity 0.1s ease-in-out;
    border-radius: 5px;
}

.panelvip .payment-button:hover::before, .panelwcoin .payment-button:hover::before {
    opacity: 1;
}

@keyframes glowing {
    0% { background-position: 0 0; }
    50% { background-position: 400% 0; }
    100% { background-position: 0 0; }
}

/* Colores específicos para Mercado Pago y PayPal (manteniendo Equalizer colors) */
.panelvip .payment-button.mercadopago, .panelwcoin .payment-button.mercadopago {
    background: linear-gradient(to bottom, #009ee3, #007bbf) !important;
    color: #fff !important;
    border-color: #009ee3 !important;
}

.panelvip .payment-button.mercadopago:hover, .panelwcoin .payment-button.mercadopago:hover {
    background: linear-gradient(to bottom, #007bbf, #005980) !important;
    color: #fff !important;
}

.panelvip .payment-button.paypal, .panelwcoin .payment-button.paypal {
    background: linear-gradient(to bottom, #ffc439, #ff8c00) !important;
    color: #000 !important;
    border-color: #ffc439 !important;
}

.panelvip .payment-button.paypal:hover, .panelwcoin .payment-button.paypal:hover {
    background: linear-gradient(to bottom, #ff8c00, #cc7700) !important;
    color: #000 !important;
}

/* Estilos para el mensaje de alerta - Colores Equalizer */
.alert.alert-info {
    background: linear-gradient(to bottom, rgba(25, 16, 7, 0.95), rgba(40, 25, 10, 0.9)) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 156, 0, 0.4) !important;
    border-radius: 8px !important;
    padding: 15px !important;
    margin-bottom: 15px !important;
    text-align: center !important;
    font-size: 1.1rem !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3) !important;
}

.alert.alert-info a {
    display: block !important;
    margin-top: 15px !important;
}

/* Page Title Enhancement para ambos módulos */
.page-title span {
    font-size: 2.5rem !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    color: #ffcc00 !important;
    text-shadow: 
        0 0 20px rgba(255, 204, 0, 0.5),
        0 2px 4px rgba(0, 0, 0, 0.8) !important;
    letter-spacing: 2px !important;
    position: relative !important;
}

.page-title span::before,
.page-title span::after {
    background: linear-gradient(90deg, transparent, #ffcc00, transparent) !important;
}

/* Responsive Design */
@media (max-width: 768px) {
    .panelvip, .panelwcoin {
        max-width: 95%;
        margin: 10px auto;
    }
    
    .page-title span {
        font-size: 2rem !important;
    }
    
    .alert.alert-info {
        padding: 12px !important;
        font-size: 1rem !important;
    }
    
    .alert.alert-info img {
        max-width: 200px !important;
        width: 100% !important;
    }
    
    .panelvip .panel-body, .panelwcoin .panel-body {
        padding: 12px !important;
    }
    
    .panelvip .dias, .panelwcoin .dias {
        font-size: 1.2rem !important;
    }
    
    .panelvip .panel-body img, .panelwcoin .panel-body img {
        max-width: 60px !important;
    }
    
    .panelvip .price, .panelwcoin .price {
        font-size: 1.5rem !important;
        padding: 6px 12px !important;
        margin: 0 auto 8px auto !important;
    }
    
    .panelvip .payment-button, .panelwcoin .payment-button {
        padding: 10px 16px !important;
        font-size: 1.1rem !important;
        margin-top: 8px !important;
    }
    
    .panelvip .payment-button img, .panelwcoin .payment-button img {
        max-height: 18px !important;
    }
    
    .panelvip .price-container, .panelwcoin .price-container {
        width: 100% !important;
        max-width: none !important;
        padding: 8px !important;
        gap: 10px !important;
    }
}

@media (max-width: 480px) {
    .panelvip, .panelwcoin {
        margin: 8px;
    }
    
    .page-title span {
        font-size: 1.8rem !important;
    }
    
    .panelvip .price, .panelwcoin .price {
        font-size: 1.3rem !important;
        padding: 5px 10px !important;
    }
    
    .panelvip .payment-button, .panelwcoin .payment-button {
        font-size: 1rem !important;
        padding: 8px 12px !important;
        margin-top: 6px !important;
    }
    
    .panelvip .price-container, .panelwcoin .price-container {
        width: 100% !important;
        max-width: none !important;
        padding: 5px !important;
        gap: 8px !important;
    }
}