/* ---------------- CHANGE THEME COLOR SETTINGS ---------------- */
:root {
  /* Fonts */
  --font-family: "Poppins", sans-serif;
  --font-weight: 500;

  /* Backgrounds */
  --bg: #080b0f;
  --bg-dark: #15181d;
  --bg-darker: #0e1016;
  --bg-light: #9c9eb4;
  --bg-primary: #ffc107;
  --bg-secondary: #eaeaea;

  /* Borders */
  --border: #1c202b;
  --border-bottom: #222633;
  --border-dark: #15181d;
  --border-darker: #0e1016;
  --border-light: #323649;
  --border-primary: #ffc107;
  --border-secondary: #eaeaea;
  --primary-border-bottom: #dd8500;

  /* Social Borders */
  --discord-border: #404eed;
  --kick-border: #53fc19;
  --twitch-border: #6034b2;
  --youtube-border: #ff0000;
  --youtube-border-bottom: #861f1f;

  /* General Buttons */
  --btn-cancel: #cf2222;
  --btn-cancel-border-bottom: #631616;
  --btn-hover: #eaeaea;
  --btn-primary: #ffc107;
  --btn-primary-border-bottom: #dd8500;
  --btn-secondary: #eaeaea;
  --btn-secondary-border-bottom: #858585;
  --btn-txt-dark: #0d0d0d;
  --btn-txt-light: #eaeaea;

  /* Social Buttons */
  --btn-discord: #404eed;
  --btn-discord-border-bottom: #0000ee;
  --btn-kick: #53fc19;
  --btn-kick-border-bottom: #30a30a;
  --btn-twitch: #6034b2;
  --btn-twitch-border-bottom: #36196d;
  --btn-youtube: #ff0000;

  /* Button Hovers */
  --btn-hover-border: #c0c0c0;
  --btn-hover-border-bottom: #858585;

  /* General Text */
  --txt-code: #ffcf87;
  --txt-dark: #0d0d0d;
  --txt-muted: #929eaf;
  --txt-placeholder: #3a3f46;
  --txt-primary: #ffc107;
  --txt-secondary: #eaeaea;
  --txt-selection: #080b0f;

  /* Social Text */
  --txt-discord: #404eed;
  --txt-kick: #53fc19;
  --txt-twitch: #6034b2;
  --txt-youtube: #ff0000;

  /* Staff Roles */
  --txt-beta-tester: #ffff88;
  --txt-community-manager: #ff4cff;
  --txt-content-creator: #992dff;
  --txt-designer: #17ff77;
  --txt-developer: #ff2e2e;
  --txt-events-coordinator: #ff952b;
  --txt-gm: #508dff;
  --txt-manager: #74ff3d;
  --txt-senior-gm: #00ffff;
  --txt-support: #2bffca;

  /* WoW Classes */
  --txt-deathknight: #c41f3b;
  --txt-druid: #ff7d0a;
  --txt-hunter: #abd473;
  --txt-mage: #69ccf0;
  --txt-paladin: #f58cba;
  --txt-priest: #ffffff;
  --txt-rogue: #fff569;
  --txt-shaman: #0070de;
  --txt-warlock: #9482c9;
  --txt-warrior: #c79c6e;
  --txt-monk: #00ff96;
  --txt-demonhunter: #a330c9;

  /* WoW Item Qualities */
  --txt-item-poor: #9d9d9d;
  --txt-item-common: #ffffff;
  --txt-item-uncommon: #1eff00;
  --txt-item-rare: #0070dd;
  --txt-item-epic: #a335ee;
  --txt-item-legendary: #ff8000;
  --txt-item-artifact: #e6cc80;
  --txt-item-heirloom: #00ccff;
}
/* ---------------- END OF CHANGE THEME COLOR SETTINGS ---------------- */

/* Global Styles */
* {
  font-family: var(--font-family);
  font-weight: var(--font-weight);
}

body {
  background-color: var(--bg);
  background-image: none;
}

::selection {
  background-color: var(--bg-primary);
  color: var(--txt-dark);
}

::-moz-selection {
  background-color: var(--bg-primary);
  color: var(--txt-dark);
}

/* Navbar Styles */
.header::before,
.nav-active::before,
.dropdown-toggle::after {
  display: none;
}

/* Navbar - Main Styles */
.header {
  width: 100%;
  height: auto;
  z-index: 98;
  background-color: var(--bg-darker);
  background-image: none;
  -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5); /* For Safari and Chrome */
  -moz-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5); /* For Firefox */
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5); /* Standard Syntax */
}

/* Navbar - Main Styles - Dividers */
.header .navbar .navbar-nav .nav-item::after {
  background-color: none;
}

/* Navbar - Link Dividers */
.header .navbar .navbar-nav .nav-item::after {
  display: none;
}

.header .navbar .navbar-nav .nav-item .nav-link {
  color: var(--txt-primary);
  text-transform: uppercase;
}

.nav-link {
  color: var(--txt-primary);
  text-transform: uppercase;
  transition: none;
  font-size: 1.1rem;
}

.nav-link:hover,
.nav-link:focus,
.nav-item:hover {
  color: var(--txt-secondary) !important;
  background-color: var(--bg-darker);
}

.nav-link.active {
  color: var(--txt-secondary) !important;
  border-radius: 0rem;
}

.nav-link:focus-visible {
  box-shadow: none;
}

/* Navbar - Default State */
.header .navbar .navbar-nav .nav-item .nav-link {
  border: 0.1rem solid transparent;
}

/* Navbar - Hover Block */
.header .navbar .navbar-nav .nav-item:hover .nav-link,
.header .navbar .navbar-nav .nav-item .nav-link:hover,
.header .navbar .navbar-nav .nav-item .nav-link:active,
.header .navbar .navbar-nav .nav-item .nav-link.nav-active {
  background-color: var(--bg-dark);
  border-color: var(--border);
}

/* Navbar Logo */
.navbar-logo {
  width: 300px;      /* ancho fijo */
  height: 90px;      /* alto fijo */
  object-fit: contain; /* ajusta la imagen sin deformarla */
  display: block;
  margin: auto;
  transition: all 0.3s ease-in-out;
}

.navbar-logo:hover {
  filter: saturate(0) brightness(1.2);
}

/* UCP - Nav */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  box-shadow: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  background-color: var(--bg-primary) !important;
  color: var(--txt-dark) !important;
  font-weight: 600;
}

/* Account Info Text */
.section-topbar .membership-bar .membership-bar-info,
.info-welcome {
  color: var(--txt-secondary);
  font-size: 1rem;
  font-style: normal;
  text-shadow: none;
}

.section-topbar {
  background-color: transparent;
}

/* Currency Text */
.gold-points {
  color: var(--txt-primary) !important;
  font-weight: 500 !important;
  text-transform: uppercase;
}
.silver-points {
  color: var(--txt-secondary) !important;
  font-weight: 500 !important;
  text-transform: uppercase;
}

.text-gold {
  color: var(--txt-primary) !important;
}

.text-silver,
.ampersand {
  color: var(--txt-secondary) !important;
}

.text-gold,
.text-silver,
.ampersand {
  font-size: 1rem;
  font-weight: 500;
}

/* Anchor Tag */
a {
  color: var(--txt-primary);
  font-weight: 600;
  text-decoration: none;
  text-shadow: none;
}

a:hover {
  color: var(--txt-secondary);
}

/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--txt-primary);
  font-weight: 600;
  text-transform: uppercase;
}

/* Paragraphs */
p {
  color: var(--txt-secondary);
  font-weight: 500;
  text-shadow: none;
}

/* Code Blocks */
body code {
  color: var(--txt-code);
  font-size: 0.875em;
  word-wrap: break-word;
}

.text-warning {
  color: var(--txt-primary) !important;
}

/* Dropdown Menus */
.dropdown .dropdown-menu,
.dropdown .dropdown-menu li .dropdown-item {
  background-color: var(--bg-darker);
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
}

.dropdown .dropdown-menu {
  border: 0.1rem solid var(--border);
  border-radius: 0;
  padding: 0;
}

.dropdown .dropdown-menu li .dropdown-item {
  color: var(--txt-secondary);
  padding: 0.6em 0;
  z-index: 100;
}

.dropdown-item {
  background-color: transparent;
  color: var(--txt-secondary);
  padding: 0.6em 1em;
  text-transform: uppercase;
  font-weight: 600;
}

.dropdown-item:hover,
.dropdown-item:focus {
  color: var(--txt-primary);
  text-transform: uppercase;
}

.dropdown .dropdown-menu li .dropdown-item::after {
  border: 0.1rem solid var(--border);
  width: auto;
}

.dropdown .dropdown-menu li:hover .dropdown-item,
.dropdown .dropdown-menu li .dropdown-item:hover,
.dropdown .dropdown-menu li .dropdown-item:active,
.dropdown .dropdown-menu li .dropdown-item.nav-active {
  background-color: var(--bg);
  color: var(--txt-primary);
  text-transform: uppercase;
}

.dropdown-item:hover,
.dropdown-item:focus {
  color: var(--txt-primary);
  background-color: var(--bg-dark);
}

.header .navbar .navbar-nav .nav-item .dropdown-menu {
  margin-top: 0;
}

/* Mobile Menu */
.offcanvas {
  background-color: var(--bg-darker);
  border-right: 0.1rem solid var(--border) !important;
}

.offcanvas-header {
  background-color: var(--bg-darker);
  border-bottom: 0.1rem solid var(--border);
  padding: 1rem;
}

.mobile-logo {
  width: 1rem;
  height: auto;
}

.btn-close {
  opacity: 1;
}

/* Text and Backgrounds */
.text-light {
  color: var(--txt-secondary);
}

.bg-dark {
  background-color: var(--bg-dark) !important;
}

.bg-darker::before {
  background-color: var(--bg-darker) !important;
}

.border {
  border-color: var(--border) !important;
}

.border-bottom {
  border-bottom: 0.1rem solid var(--border) !important;
}

/* Section Padding */
.section-padding {
  overflow: hidden;
  padding-top: 5rem;
  padding-bottom: 5rem;
}

/* Button - Default */
.btn,
.btn-warning,
.nice_button,
.btn-close,
.btn-primary,
.btn-secondary,
.accordion-button,
.btn-check,
.btn.active,
.btn.show {
  background-color: var(--btn-primary) !important;
  border-bottom: 0.3rem solid var(--btn-primary-border-bottom) !important;
  border-radius: 0;
  font-family: "Poppins", sans-serif;
  color: var(--btn-txt-dark);
  font-size: 1rem;
  font-weight: 600;
  text-shadow: none;
  font-style: normal;
  text-transform: uppercase;
  box-shadow: none !important;
  transition: all 0.3s ease-in-out;
  border-radius: 0.15rem !important;
}

/* Button - Default - Hover States */
.btn:hover,
.btn-warning:hover,
.nice_button:hover,
.btn-close:hover,
.btn-primary:hover,
.btn-secondary:hover,
.accordion-button:hover,
.btn-check:hover,
.btn.active:hover,
.btn.show:hover {
  background-color: var(--btn-secondary) !important;
  border-bottom: 0.3rem solid var(--btn-secondary-border-bottom) !important;
  border-radius: 0;
  color: var(--btn-txt-dark) !important;
  font-size: 1rem;
  font-weight: 600;
  text-shadow: none;
  font-style: normal;
  text-transform: uppercase;
  transition: all 0.3s ease-in-out !important;
  border-radius: 0.15rem !important;
}

/* Button - Default - Active States */
.btn:active,
.btn-warning:active,
.nice_button:active,
.btn-close:active,
.btn-primary:active,
.btn-secondary:active,
.accordion-button:active,
.btn:focus,
.btn-warning:focus,
.nice_button:focus,
.btn-close:focus,
.btn-primary:focus,
.btn-secondary:focus,
.accordion-button:focus,
.btn-check:active,
.btn-check:focus,
.btn.active:active,
.btn.active:focus,
.btn.show:active,
.btn.show:focus {
  background-color: var(--btn-primary);
  border-bottom: 0.3rem solid var(--btn-primary-border-bottom);
  border-radius: 0;
  color: var(--btn-txt-dark);
  font-size: 1rem;
  font-weight: 600;
  text-shadow: none;
  font-style: normal;
  text-transform: uppercase;
  box-shadow: none;
  transition: all 0.3s ease-in-out !important;
}

.btn.active,
.nice_active {
  color: var(--btn-txt-dark);
  background-color: var(--btn-secondary) !important;
  border-bottom: 0.3rem solid var(--btn-secondary-border-bottom) !important;
  transition: all 0.3s ease-in-out !important;
}

/* Button - Disabled */
.btn.disabled,
.btn:disabled {
  color: var(--btn-txt-dark);
  background-color: var(--btn-secondary);
  border-bottom: var(--btn-secondary-border-bottom);
  transition: all 0.3s ease-in-out !important;
}

/* Button - Others */
button,
.nice_button,
input[type="reset"],
input[type="button"],
input[type="submit"] {
  background-color: var(--btn-primary);
  border-bottom: 0.3rem solid var(--btn-primary-border-bottom);
  border-radius: 0 !important;
  color: var(--btn-txt-dark);
  font-family: "Poppins", sans-serif;
  font-size: 1rem;
  font-weight: 600;
  text-shadow: none;
  font-style: normal;
  text-transform: uppercase;
  box-shadow: none;
  transition: all 0.3s ease-in-out !important;
}

/* ---------------- HOMEPAGE HERO BANNERS ---------------- */

/* Hero Section */
.hero {
  position: relative;
  height: 50vh;
  overflow: hidden;
  z-index: 0;
}

/* Hero - Video */
.hero .hero-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 105%;
  height: 100%;
  object-fit: cover;
  background-color: var(--bg);
  opacity: 1;
  z-index: -2;
  /* transform: scaleX(-1); */
}

/* Hero - Heading Vertical Spacing Adjustment */
body h2.tighten-up {
  margin-bottom: -0.3rem;
}

/* Hero - Video - Grid Overlay */
.video-overlay {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to right, hsla(0, 0%, 5%, 0.3) 1px, transparent 1px), linear-gradient(to bottom, hsla(0, 0%, 5%, 0.3) 1px, transparent 1px);
  background-size: 2px 2px; /* Increase the spacing between the dots */
  opacity: 1;
}
/* ---------------- END OF HOMEPAGE HERO BANNERS ---------------- */

/* ---------------- BANNERS ---------------- */

/* Banner Border */
.banner {
  border-top: 0.1rem solid var(--border);
  border-bottom: 0.1rem solid var(--border);
}

/* Banner Grid Overlay Effect */
.banner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to right, hsla(0, 0%, 5%, 0.3) 1px, transparent 1px), linear-gradient(to bottom, hsla(0, 0%, 5%, 0.3) 1px, transparent 1px);
  background-size: 2px 2px; /* Increase the spacing between the dots */
  opacity: 0.5;
}

/* Positions the heading and description text above the overlays */
.section-heading,
.section-description {
  position: relative;
  z-index: 10;
}

/* Responsive - General - For large screens */
.bg-responsive {
  background-position: right 30%;
  background-size: cover;
  background-repeat: no-repeat;
  /* background-size: 2600px; */
  background-color: #101218;
}

/* Responsive - Socials - For large screens */
.bg-responsive-socials {
  background-position: left top;
  background-size: cover;
  background-repeat: no-repeat;
  margin-bottom: 0.1rem;
}

/* Headers - Reduce Opacity on Mobile */
@media (max-width: 765px) {
  .bg-responsive::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 1);
    opacity: 0.6;
    z-index: 1;
  }

  .bg-responsive > div {
    position: relative;
    z-index: 2;
  }
}

/* Responsive - More Sections - For large screens */
.more-section {
  background-position: right top;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Responsive - General - For small screens */
@media (max-width: 765px) {
  .bg-responsive {
    background-position: right center;
    text-align: center;
  }
}

/* Responsive - Socials - For large screens */
@media (max-width: 765px) {
  .bg-responsive-socials {
    background-position: left center;
    text-align: center;
  }
}

.banner .section-heading,
.banner .section-description {
  text-shadow: #080b0f 0px 1px 1px !important;
}

/* ---------------- END OF BANNERS ---------------- */

/* Dim Images - On Hover */
.dim-image {
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
}

.dim-image:hover {
  opacity: 0.6;
}

/* ---------------- SOCIAL BANNERS ---------------- */

/* Discord Banner - Animated Background Color */
.discord-banner {
  border: solid var(--discord-border);
  border-width: 0.1rem 0;
  position: relative;
  overflow: hidden;
}

.discord-banner::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, transparent, #404eed, transparent);
  animation: backgroundShine 4s linear infinite;
  transform: rotate(-45deg);
  opacity: 0.5;
  filter: blur(100px);
}

@keyframes backgroundShine {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

/* Discord Button */
.btn-discord {
  background-color: var(--btn-discord) !important;
  border-bottom: 0.3rem solid var(--btn-discord-border-bottom) !important;
  color: var(--btn-txt-light);
  overflow: hidden;
}

/* Discord Button Hover */
.btn-discord:hover {
  background-color: var(--btn-secondary);
  border-bottom-color: var(--btn-hover-border-bottom);
  color: var(--btn-txt-dark);
}

.btn-discord-footer {
  background-color: var(--btn-discord) !important;
  border-bottom: 0.3rem solid var(--btn-discord-border-bottom) !important;
  color: var(--btn-txt-light);
  overflow: hidden;
  border-radius: 0;
}

/* Discord Button Hover */
.btn-discord-footer:hover {
  background-color: var(--btn-secondary) !important;
  border-bottom-color: var(--btn-hover-border-bottom) !important;
  color: var(--btn-txt-dark);
  border-radius: 0;
}

/* Discord Text */
.text-discord {
  color: var(--txt-discord);
}

/* Discord Banner Paragraph */
.discord-banner p {
  margin: 0;
}

/* YouTube Section */
.youtube-section {
  border: solid var(--youtube-border);
  border-width: 0.1rem 0;
}

/* YouTube - Button */
.btn-youtube {
  background-color: var(--btn-youtube) !important;
  border-bottom: 0.3rem solid var(--youtube-border-bottom) !important;
  color: var(--btn-txt-light);
  transition: all 0.3s ease-in-out;
}

/* YouTube - Button Hover */
.btn-youtube:hover {
  background-color: var(--btn-secondary);
  border-bottom-color: var(--btn-hover-border-bottom);
  color: var(--btn-txt-dark);
}

/* YouTube - Text Color */
.text-youtube {
  color: var(--txt-youtube);
}

/* YouTube - Video Embed Responsive */
.embed-responsive {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 0;
}

/* YouTube - Video Embed Responsive Item */
.embed-responsive-item {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* YouTube - Video Embed Responsive Pseudo-element */
.embed-responsive::before {
  content: "";
  display: block;
  padding-top: 55%;
}

/* Twitch Section */
.twitch-section {
  border: solid var(--twitch-border);
  border-width: 0.1rem 0;
}

/* Twitch - Button */
.btn-twitch {
  background-color: var(--btn-twitch) !important;
  border-bottom: 0.3rem solid var(--btn-twitch-border-bottom) !important;
  color: var(--btn-txt-light);
}

/* Twitch - Button Hover */
.btn-twitch:hover {
  background-color: var(--btn-secondary);
  border-bottom: 0.3rem solid var(--btn-hover-border-bottom);
  color: var(--btn-txt-dark);
}

/* Twitch - Text Color */
.text-twitch {
  color: var(--txt-twitch);
}

/* Kick Section */
.kick-section {
  border: solid var(--kick-border);
  border-width: 0.1rem 0;
}

/* Kick - Button */
.btn-kick {
  background-color: var(--btn-kick) !important;
  border-bottom: 0.3rem solid var(--btn-kick-border-bottom) !important;
  color: var(--btn-txt-dark);
}

/* Kick - Button Hover */
.btn-kick:hover {
  background-color: var(--btn-secondary);
  border-bottom: 0.3rem solid var(--btn-secondary-border);
  color: var(--btn-txt-dark);
}

/* Kick - Text Color */
.text-kick {
  color: var(--txt-kick);
}

/* ---------------- END - SOCIAL BANNERS ---------------- */

/* Server Features Section */
#card-features .cards {
  background-color: var(--bg-darker);
  border: 0.1rem solid var(--border);
  font-size: 1rem;
}

/* Card Images - Hide Overflow */
#card-features .cards .image-box {
  overflow: hidden;
}

/* Card Images - Set Size */
#card-features .cards .image-box img {
  height: 100%;
  width: 100%;
  transition: transform 0.3s;
  transform: scale(1.01);
}

/* Card Images - Hover Effect */
#card-features .cards:hover .image-box img {
  opacity: 0.5;
  transform: scale(1.1);
  transition: all 0.3s ease-in-out;
}

/* Card Image Zoom Properties and Hover State */
.card .card-img-zoom {
  overflow: hidden;
  opacity: 1;
  border-bottom: 0.1rem solid var(--border);
  transition: all 0.3s;
}

.card .card-img-zoom img {
  transition: transform 0.3s;
  transform: scale(1.01);
}

.card:hover .card-img-zoom img {
  opacity: 0.7;
  transform: scale(1.1);
}

.card-header {
  color: var(--txt-dark);
  background-color: var(--bg-primary);
  border-bottom: 1px solid var(--border-light);
  font-weight: 600;
  text-transform: uppercase;
}

.card:not(.card-disabled).card-hover:hover {
  filter: saturate(0) brightness(1.2);
  transition: filter 0.3s;
  border: 0.1rem solid var(--border-primary);
}

.card-img,
.card-img-top {
  border-radius: 0;
  border: 0.1rem solid var(--border);
  border-bottom: 0;
}

#vote-cards,
#donate-cards {
  border: 0.1rem solid var(--border-light);
}

.card-header:first-child {
  border-radius: 0;
}

/* Server Team Members - Card Background Images */
.small-screen-bg {
  display: none;
}

@media (max-width: 768px) {
  .card {
    position: relative;
  }
  .small-screen-bg {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-repeat: no-repeat;
    background-position: 50% 30%;
    background-size: cover;
    opacity: 0.1;
    filter: saturate(0.5);
  }
  .card::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
}

/* Server Team Members - Profile Link - Hover State */
.profile-link:hover h6 {
  color: var(--txt-secondary) !important;
}

/* Testimonial Section */
.quote_ {
  opacity: 0.1 !important;
}

/* Testimonial Section - Avatar Images */
.testimonial-avatar {
  border: 0.1rem solid var(--border);
  transition: opacity 0.3s ease-in-out;
}

.testimonial-avatar:hover {
  border: 0.1rem solid var(--border);
  opacity: 0.7;
  transition: opacity 0.3s ease-in-out;
}

/* Class & Rank Text Colors */
.text-designer {
  color: var(--txt-designer);
}

.text-developer {
  color: var(--txt-developer);
}

.text-gm {
  color: var(--txt-gm);
}

.text-senior-gm {
  color: var(--txt-senior-gm);
}

.text-support {
  color: var(--txt-support);
}

.text-deathknight {
  color: var(--txt-deathknight);
}

.text-druid {
  color: var(--txt-druid);
}

.text-hunter {
  color: var(--txt-hunter);
}

.text-mage {
  color: var(--txt-mage);
}

.text-paladin {
  color: var(--txt-paladin);
}

.text-priest {
  color: var(--txt-priest);
}

.text-rogue {
  color: var(--txt-rogue);
}

.text-shaman {
  color: var(--txt-shaman);
}

.text-warlock {
  color: var(--txt-warlock);
}

.text-warrior {
  color: var(--txt-warrior);
}

/* WoW Item Qualities */
.item-poor {
  color: var(--txt-item-poor);
}

.item-common {
  color: var(--txt-item-common);
}

.item-uncommon {
  color: var(--txt-item-uncommon);
}

.item-rare {
  color: var(--txt-item-rare);
}

.item-epic {
  color: var(--txt-item-epic);
}

.item-legendary {
  color: var(--txt-item-legendary);
}

.item-artifact {
  color: var(--txt-item-artifact);
}

.item-heirloom {
  color: var(--txt-item-heirloom);
}

/* Store - Cart */
#cart_item_count {
  color: var(--txt-secondary);
}

/* Store - Price Color DP & VP */
#cart_price #dp_price_full span,
#cart_price #vp_price_full span {
  color: var(--txt-primary);
}

/* Store - Override VP price color */
#cart_price #vp_price_full span {
  color: var(--txt-secondary);
}

/* Store - Checkout Info */
#checkout_info {
  padding-bottom: 1rem;
}

/* Store - Margin */
#checkout_info .mb-3 {
  margin-top: 20px;
}

/* Store - Checkout Info Font */
#checkout_info b {
  color: var(--txt-primary);
  font-weight: 500;
}

/* Store - Hide Images Checkout */
#checkout_info img {
  display: none;
}

/* Store - Padding Paragraphs Checkout Info */
#checkout_info p {
  padding-bottom: 5rem;
}

/* Store - Item Quality Font */
#item_quality {
  font-family: "Poppins", sans-serif;
  font-size: 1rem;
  font-style: normal;
  font-weight: 500;
  text-transform: uppercase;
}

/* Store - Background Color Card Body */
#item_space .card-body {
  background-color: var(--bg);
}

/* Store - Filter - Button Focus & Active States */
.btn-check:checked + .btn,
.btn.show,
.btn:first-child:active,
:not(.btn-check) + {
  color: var(--txt-dark);
  background-color: var(--btn-secondary);
  border-color: var(--btn-secondary-border);
}

/* Store - Filter - Button Active State When Filter Is Enabled */
.nice_active {
  color: var(--txt-dark);
  background-color: var(--btn-secondary);
  border-color: var(--btn-secondary-border);
}

/* Store - Filter - Box and Dropdown Menu - Remove Browser Styes */
select.filter-menu {
  background-color: var(--bg-dark);
  color: var(--txt-muted);
  text-transform: uppercase;
  border: 1px solid var(--border);
  padding: 0.375rem 0.75rem;

  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

/* Store - Filter - Dropdown Menu - Items */
select.filter-menu option {
  background-color: var(--bg-dark);
  color: var(--txt-secondary);
  text-transform: uppercase;
  border: 1px solid var(--border);
  padding: 0.375rem 0.75rem;
}

/* Store - Filter - Search Box */
input.filter-menu {
  background-color: var(--bg-dark);
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  color: var(--txt-primary);
  text-transform: uppercase;
  border: 1px solid var(--border);
  padding: 0.375rem 0.75rem;
}

/* Store - Filter - Search Box */
input.filter-menu:active,
input.filter-menu:focus {
  background-color: transparent;
  box-shadow: none;
}

/* Store - Filter - Search Box - Remove Browser Styles */
input.filter-menu:-webkit-autofill,
input.filter-menu:-webkit-autofill:hover,
input.filter-menu:-webkit-autofill:focus,
input.filter-menu:-webkit-autofill:active {
  -webkit-box-shadow: none !important;
}

/* Store - Filter - Search Placeholder Text */
#filter_name::placeholder {
  color: var(--txt-placeholder);
  opacity: 1; /* Firefox */
  text-transform: uppercase;
  font-size: 1rem;
}

.store-groups {
  padding: 0.55rem;
}

body .store_item {
  margin: 0.3rem;
  padding: 1rem;
  border: 0.1rem solid var(--border-light) !important;
  border-radius: 0rem;
}

/* Tables */
.table {
  --bs-table-bg: var(--bg-darker);
  --bs-table-striped-color: var(--txt-secondary);
  --bs-table-striped-bg: var(--bg-dark);
  --bs-table-active-color: var(--txt-secondary);
  --bs-table-active-bg: var(--bg-dark);
  --bs-table-hover-color: var(--txt-primary);
  --bs-table-hover-bg: var(--bg);
  --bs-table-color: var(--txt-secondary);
  cursor: pointer;
}

/* Table Header */
.table thead th {
  background-color: var(--bg-light);
  color: var(--txt-dark);
  text-transform: uppercase;
  font-size: 1rem;
}

.table thead th:hover {
  background-color: var(--bg-primary);
  color: var(--txt-dark);
}

/* Table - Items - Vertically Align Center */
.table td,
.table th {
  vertical-align: middle;
}

#dungeons,
#raids,
#mythics,
#search_results_items {
  border-color: var(--border);
  border-style: solid;
  border-width: 0.1rem;
}

#dungeons td,
#dungeons th,
#raids td,
#raids th,
#mythics td,
#mythics th,
#search_results_items td,
#search_results_items th {
  /* text-align: start; */
  vertical-align: middle;
}

/* Table - Armor - Character - Border Color */
.armory-table th,
.armory-table td,
.armory-table tbody,
thead,
tbody,
tfoot,
tr,
td,
th,
table.dataTable thead th,
table.dataTable thead td {
  border: 0.1rem solid var(--border) !important;
}

table.dataTable thead th,
table.dataTable thead td {
  padding: 10px 18px;
  border: 0.1rem solid var(--border);
}

table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc,
table.dataTable thead .sorting {
  background-image: none !important;
}

table.dataTable thead .sorting_asc::before {
  content: "\f0de"; /* fa-sort-asc */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  float: right;
}

table.dataTable thead .sorting_desc::before {
  content: "\f0dd"; /* fa-sort-desc */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  float: right;
}

table.dataTable thead .sorting::before {
  content: "\f0dc"; /* fa-sort */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  float: right;
}

.dataTables_wrapper {
  position: relative;
  padding-bottom: 5%;
}

body .dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_processing,
.dataTables_wrapper .dataTables_paginate {
  color: var(--txt-secondary) !important;
}

body .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
  color: var(--txt-dark) !important;
}

/* Datatables - Processing */
.dataTables_wrapper .dataTables_processing {
  top: 60% !important;
  padding: none !important;
  font-size: 0.8em !important;
  background-color: transparent !important;
  background: none !important;
  text-transform: uppercase !important;
}

#changelogTable td {
  font-family: monospace;
  font-weight: 100;
  font-size: 0.9rem;
  text-transform: capitalize;
}

#changelogTable th {
  font-weight: 600;
  font-size: 0.9rem;
}

#changelogTable tbody tr:hover td,
#changelogTable tbody tr:hover th {
  color: var(--txt-primary) !important;
}

/* Table - Sorting & Searching */
body .dataTables_wrapper .dataTables_paginate .paginate_button {
  background-color: var(--bg-light) !important;
  border: 0.1rem solid var(--border) !important;
  border-radius: 0.25rem;
}

body .dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  color: var(--txt-muted) !important;
  border: 0.1rem solid var(--border);
  background-color: var(--bg-dark);
  background: none !important;
  background: none !important;
  background: none !important;
  background: none !important;
  background: none !important;
  background: none !important;
}

body .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  color: var(--txt-dark) !important;
  border: 0.1rem solid var(--border);
  background-color: var(--bg-darker);
  background: var(--bg-primary) !important;
}

body .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
  cursor: default;
  color: var(--txt-dark) !important;
  border: 1px solid var(--border);
  background: transparent;
  box-shadow: none;
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  border: 1px solid var(--border-light) !important;
  border-radius: 0 !important;
  padding: 0.3rem !important;
  background-color: transparent;
  color: var(--txt-secondary) !important;
}

table.dataTable.no-footer {
  margin-bottom: 1rem !important;
}

.dataTables_filter label {
  margin-bottom: 1rem !important;
}

label {
  color: var(--txt-muted) !important;
  font-family: "Poppins", sans-serif !important;
  font-size: 0.8rem !important;
  text-shadow: none !important;
  text-transform: uppercase;
  display: flex;
  align-items: center; /* Add this line */
  gap: 1rem !important;
}

/* Table Borders */
.table-bordered {
  border: 0.1rem solid var(--border);
}

/* Accordion button properties */
.accordion .accordion-item .accordion-header .accordion-button {
  color: var(--txt-dark);
  font-style: normal;
  box-shadow: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 1rem;
  text-shadow: none;
  border-radius: 0;
  padding: 0.8rem;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
}

/* Accordion chevron arrow dark */
.accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='txt-dark'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  transform: rotate(-180deg);
}

/* Accordion body properties */
.accordion .accordion-item .accordion-body {
  background-color: var(--bg-dark);
  border: 0.1rem solid var(--border-light);
  font-weight: 500;
  text-transform: capitalize;
  color: var(--txt-secondary);
  text-shadow: none;
}

/* Accordion button after properties */
.accordion .accordion-item .accordion-header .accordion-button::after {
  background-image: none;
  font-family: "Font Awesome 5 Free";
  content: "\f107";
  font-weight: 900;
}

/* Card properties in timeline cards */
#timeline-cards .card {
  background-color: #080b0f;
  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.4);
  margin-top: 50px;
}

/* Image zoom properties in card */
#timeline-cards .card .card-img-zoom {
  overflow: hidden;
}

/* Image properties in image zoom */
#timeline-cards .card .card-img-zoom img {
  height: 100%;
  width: 100%;
}

/* Card hover properties in timeline cards */
#timeline-cards .card:hover {
  box-shadow: 0 15px 26px rgba(0, 0, 0, 0.5);
}

/* Image properties in image zoom on card hover */
#timeline-cards .card:hover .card-img-zoom img {
  opacity: 0.7;
  transform: scale(1.15);
}

.card-bg {
  background-color: var(--bg-darker);
}

/* Bootstrap Tooltip */
.tooltip {
  background-color: var(--bg-darker);
  border: 0.1rem solid var(--border-light);
  padding: 3rem;
  border-radius: 0.25rem;
  box-shadow: none;
  color: var(--txt-secondary);
  text-transform: capitalize;
  font-size: 1rem;
}

.tooltip-inner {
  padding: 0.3rem;
  color: var(--txt-secondary);
  background-color: var(--bg-darker);
  border-radius: 0.25rem;
}

/* FusionGEN Tooltip */
#fusion_tooltip,
.fusion_tooltip {
  background-color: var(--bg-dark);
  border: 0.1rem solid var(--border-light);
  border-radius: 0.25;
  box-shadow: none;
  color: var(--txt-secondary);
  padding: 1rem;
  text-transform: capitalize;
  font-size: 0.8rem;
}

/* Tooltip - Hide Arrow */
.bs-tooltip-top .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before {
  display: none;
}

/* Affix-icon padding */
.affix-icon {
  padding: 0.2rem;
}

/* Avatar link setup */
.avatar-link {
  display: inline-block;
  position: relative;
  cursor: pointer;
}

/* Avatar image and text transitions */
.avatar-img,
.avatar-text {
  transition: opacity 0.3s ease-in-out;
}

/* Avatar image opacity on hover */
.avatar-link:hover .avatar-img {
  opacity: 0.3;
}

/* Avatar text visibility on hover */
.avatar-link:hover .avatar-text {
  opacity: 1;
}

/* Avatar text positioning and color */
.avatar-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  color: var(--txt-primary);
}

.avatar {
  float: left;
  margin-right: 10px;
  margin-left: 0;
  margin-top: 3px;
}

/* Avatar box shadow and border */
body .my_avatar {
  box-shadow: none;
  border: 0.1rem solid var(--border-light);
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
}

/* Avatar image desaturation on hover */
body .my_avatar:hover img {
  filter: saturate(0);
}

/* Avatar box shadow and border on hover */
body .my_avatar:hover {
  box-shadow: none;
  border: 0.1rem solid var(--border-primary);
}

/* Current avatar border */
body .avatar_current {
  border: 0.1rem solid var(--border-primary);
}

/* Badge border radius and font size */
.badge {
  border-radius: 0;
  font-size: 0.75em;
}

/* Character - Fit Image */
.character-avatar {
  object-fit: cover;
}

/* Alliance background image */
body .bg-faction.alliance {
  background-image: url(/application/images/misc/bg_alliance_complete.png);
}

/* Dark border color */
.border-dark {
  border-color: var(--border-dark);
}

/* Default card setup */
.card {
  background-color: var(--bg-darker);
  border: 0.1rem solid var(--border);
  border-radius: 0rem;
  box-shadow: none;
}

/* Card title color */
.card-title {
  color: var(--txt-primary);
}

/* Card footer border */
.card-footer {
  border-top: 0.1rem solid var(--border);
}

/* Footer - Discord Widget Header */
.discord-header {
  background-color: var(--btn-discord);
}

/* Disabled card appearance */
.card-disabled {
  opacity: 50%;
  filter: saturate(0);
}

/* Character select block text */
.character-select .d-block {
  color: var(--txt-secondary);
  font-weight: 500;
  text-transform: uppercase;
}

/* Character select image setup */
.character-select img {
  background-color: transparent;
  border: 0.1rem solid #323649;
  border-radius: 0 !important;
}

/* Copper points text setup */
.copper-points,
.copper-points:before {
  color: #ffb45e;
  font-weight: 500;
  text-transform: uppercase;
}

/* Copper points icon */
.copper-points:before {
  content: "\f51e";
  font-family: "FontAwesome";
}

/* Hide icon within copper points */
.copper-points i {
  display: none;
}

/* dp_price_value customization */
.dp_price_value {
  color: #141a21 !important;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  text-shadow: none;
}

/* Error feedback customization */
.error-feedback {
  background-color: #13141a;
  border: 0.1rem solid #323649;
  border-radius: 0;
  color: #df2929 !important;
  text-transform: uppercase;
}

/* Icon color settings */
.fa-arrow-alt-circle-left:before,
.fa-circle-left:before,
.fa-arrow-alt-circle-right:before,
.fa-circle-right:before,
.fa-shopping-cart {
  color: #080b0f;
}

/* Specific icon color override */
.fa-circle-arrow-right:before {
  color: var(--txt-secondary) !important;
  content: "\e1d9" !important;
}

/* Font weight for all children of fa-ul */
.fa-ul > * {
  font-weight: 400 !important;
}

/* Positioning for fixed-arrow */
.fixed-arrow {
  bottom: 20px;
  position: fixed;
  right: 20px;
  z-index: 999;
}

/* Page link color and background settings */
.page-item .page-link,
.page-item.disabled .page-link,
#search_results_items_next {
  color: var(--txt-secondary);
  background-color: var(--primary-color);
  border-radius: 0.25rem;
}

/* Border radius for last page-item */
.page-item:last-child .page-link {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

/* Background color for active page-item and on hover */
.page-item.active .page-link,
.pagination li a:hover {
  background-color: var(--txt-secondary);
}

/* Margin for pagination button */
ul.pagination li.paginate_button {
  margin-right: 0.2rem;
}

/* Box shadow for select on focus and active, and page-link on focus */
select:focus,
select:active,
.page-link:focus {
  box-shadow: none !important;
}

/* Customization for item, item a, and item img */
.item,
.item a,
.item img {
  border-radius: 0 !important;
}

/* Customization for item a */
.item a {
  background-image: none !important;
}

/* Customization for item img */
.item img {
  border: #181b25 0.1rem solid;
  border-radius: 4px !important;
}

/* Customization for item_price img */
.item_price img {
  display: none;
}

/* Customization for list-group, list-group-item, list-group-item active, list-group-item + .list-group-item */
.list-group,
.list-group-item,
.list-group-item.active,
.list-group-item + .list-group-item {
  border-radius: 0;
  background-color: var(--bg-darker);
  border-color: var(--border);
  font-family: "Poppins", sans-serif;
  color: var(--txt-secondary);
  box-shadow: none;
  text-transform: uppercase;
}

/* Customization for list-group-item:focus, list-group-item.active */
.list-group-item:focus,
.list-group-item.active {
  background-color: var(--bg-primary);
  color: var(--txt-dark);
  cursor: pointer;
}

/* Customization for list-group-item:hover */
.list-group-item:hover {
  background-color: var(--bg-secondary);
  color: var(--txt-dark);
  cursor: pointer;
}

/* Customization for location-select .d-block */
.location-select .d-block {
  color: var(--primary-color) !important;
  font-weight: 500;
  text-transform: uppercase;
}

/* Customization for nice_active::after, nice_active::before, nice_button img */
.nice_active::after,
.nice_active::before,
.nice_button img {
  display: none;
}

/* Customization for page-subbody */
.page-subbody {
  background: none;
  margin: 0rem;
  padding: 0rem;
}

/* Customization for page_form label */
.page_form label {
  color: var(--txt-muted);
  font-family: "Poppins", sans-serif;
  font-size: 1rem !important;
  font-weight: 500;
}

/* Customization for pagebody */
.pagebody {
  background: none;
  box-shadow: none;
  color: var(--txt-muted);
  padding: 1rem;
}

/* Customization for realm_bar and poll_bar */
.realm_bar,
.poll_bar {
  border-radius: 0;
  margin: 0;
}

/* Hide span inside realm_bar_fill */
.realm_bar_fill span {
  visibility: hidden;
}

/* Customization for realm_bar_fill.alliance and realm_bar_fill.horde */
.realm_bar_fill.alliance,
.realm_bar_fill.horde {
  border: 2px solid #141a21;
  border-radius: 0;
  padding: 0.4rem;
}

/* Background color for realm_bar_fill.alliance */
.realm_bar_fill.alliance {
  background-color: #0070dd;
}

/* Background color for realm_bar_fill.horde */
.realm_bar_fill.horde {
  background-color: #c41e3b;
}

/* Customization for profile-avatar */
.section-topbar .membership-bar .membership-bar-profile .profile-avatar {
  border: 0.1rem solid var(--border-primary);
  box-shadow: none;
}

/* Border color change on hover and active for profile-avatar */
.section-topbar .membership-bar .membership-bar-profile:hover,
.section-topbar .membership-bar .membership-bar-profile:active {
  border-color: var(--border-secondary);
}

/* Customization for sidebox */
.sidebox {
  background-color: var(--bg-darker);
  background-image: none;
  border: 0.1rem solid var(--border);
  border-radius: 0;
  box-shadow: none;
}

/* Padding for card-body inside sidebox */
.sidebox .card-body {
  padding: 0;
}

/* Customization for sidebox-body */
.sidebox .sidebox-body {
  color: var(--txt-secondary);
  height: auto;
  padding: 0.5rem;
  text-transform: uppercase;
  width: 100%;
}

/* Customization for silver-points and its pseudo-element */
.silver-points,
.silver-points:before {
  color: #d4d4d4;
  font-weight: 500;
  text-transform: uppercase;
}

/* Content for silver-points:before */
.silver-points:before {
  content: "\f51e";
  font-family: "FontAwesome";
}

/* Hide i inside silver-points */
.silver-points i {
  display: none;
}

/* Customization for sort */
.sort {
  display: none;
  font-family: "Poppins", sans-serif;
  font-size: 1rem;
  font-weight: 500;
  text-transform: uppercase;
}

/* Customization for popup messages */
.swal2-container.swal2-center > .swal2-popup {
  color: var(--txt-secondary);
  text-transform: uppercase;
  border: 0.1rem solid var(--border-light);
  border-radius: 0;
  box-shadow: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  background-color: var(--bg-dark);
  background-image: none;
}

.swal2-title {
  color: var(--txt-primary);
  font-size: 2em;
  font-weight: 600;
  text-align: center;
  text-transform: uppercase;
  word-wrap: break-word;
}

/* Customization for confirm button in popup messages */
.swal2-styled.swal2-confirm {
  background-color: var(--btn-primary) !important;
  border-bottom: 0.3rem solid var(--btn-primary-border-bottom) !important;
  color: var(--btn-txt-dark);
  font-size: 1rem;
  font-weight: 600;
  text-shadow: none;
  font-style: normal;
  text-transform: uppercase;
  box-shadow: none !important;
}

/* Customization for cancel button in popup messages */
.swal2-deny {
  background-color: var(--btn-cancel) !important;
  border-bottom: 0.3rem solid var(--btn-cancel-border-bottom) !important;
  color: var(--btn-txt-dark);
  font-size: 1rem;
  font-weight: 600;
  text-shadow: none;
  font-style: normal;
  text-transform: uppercase;
  box-shadow: none !important;
  transition: all 3s ease;
}

/* Customization for user-avatar */
.user-avatar {
  display: inline-block;
  height: 150px;
  position: relative;
  width: 150px;
}

/* Customization for avatar-change-text inside user-avatar */
.user-avatar .avatar-change-text {
  background-color: rgba(19, 21, 30, 0.8);
  border-radius: 0 !important;
  color: var(--primary-color) !important;
  display: none;
  height: calc(100% + 2px);
  left: -0.1rem;
  position: absolute;
  text-transform: uppercase !important;
  top: -0.1rem;
  width: calc(100% + 2px);
}

/* Customization for img inside user-avatar */
.user-avatar img {
  border: 0.1rem solid var(--primary-color);
  height: 150px;
  width: 100%;
}

/* Customization for avatar-change-text inside user-avatar on hover */
.user-avatar:hover .avatar-change-text {
  display: flex;
}

/* Customization for vp_price_value */
.vp_price_value {
  color: var(--txt-dark) !important;
  font-family: "Poppins", sans-serif;
  text-shadow: none;
}

/* Customization for invalid form controls on focus */
.was-validated .form-control:invalid:focus,
.form-control.is-invalid:focus {
  border-color: var(--border);
  box-shadow: none;
}

.form-check-input:checked {
  background-color: var(--bg-light);
  border-color: var(--border);
}

.form-check-input:focus {
  border-color: var(--border);
  box-shadow: none;
}

/* Customization for hr */
hr {
  border-top: 0.1rem solid var(--border-light);
  color: var(--border-light);
  height: 0.1rem;
}

/* Customization for img.item_icon */
body .store_item img.item_icon {
  border: 0.1rem solid var(--border-light);
  margin-right: 0.1rem;
}

/* Customization for select and its options */
select,
select option,
select optgroup {
  font-family: "Poppins", sans-serif;
  font-size: 1rem;
  font-style: normal;
  font-weight: 500;
  text-transform: uppercase;
  background-color: var(--bg-dark);
  color: var(--txt-muted);
}

/* Additional customization for select */
select {
  background-position: 90% 50%;
  background-repeat: no-repeat;
  background-size: 1rem;
}

/* Customization for list items */
ul.list-unstyled li:not(:last-child) {
  border-bottom: 0.1rem solid var(--border-bottom);
  padding: 1rem;
}

/* Additional customization for list items with no-custom-style class */
ul.list-unstyled li:not(:last-child).no-custom-style {
  border-bottom: none;
  padding: 0;
}

/* Customization for form controls */
select,
textarea,
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="file"],
input[type="text"],
input[type="time"],
input[type="week"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="search"],
input[type="password"],
input[type="datetime-local"] {
  color: var(--txt-dark);
  font-size: 0.9rem;
  font-family: var(--font-family);
  font-weight: 500;
  border-radius: 0;
  background-color: var(--bg-light);
  border-color: var(--border-light);
  text-shadow: none;
}

/* Customization for form-select */
.form-select {
  cursor: pointer;
  padding: 0.8rem;
  font-size: 0.9rem;
  background-color: var(--bg-light);
  border: transparent;
  text-shadow: none;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  border-radius: 0;
}

/* Form - Search Box - Focus */
textarea:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="date"]:focus,
input[type="file"]:focus,
input[type="text"]:focus,
input[type="text"]:active,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="email"]:focus,
input[type="month"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="password"]:focus,
input[type="datetime-local"]:focus {
  color: var(--txt-dark);
  background-color: var(--bg-light);
  box-shadow: none;
}

/* Customization for form controls on focus */
select:focus,
textarea:focus,
input:focus {
  border: transparent;
  box-shadow: none !important;
}

/* Customization for input-group */
.input-group {
  gap: 1rem;
  display: flex;
  flex-direction: row;
  border: transparent;
}

/* Font size for countdown label */
.countdown-label {
  font-size: 1rem;
}

.footer-logo {
  width: 100%;
  max-width: 80%;
  margin: auto;
}

@media (max-width: 768px) {
  .footer-logo {
    max-width: 100%;
  }
}

/* Footer - Logo - Hover */
.footer-logo {
  transition: filter 0.3s;
}

.footer-logo:hover {
  filter: saturate(0) brightness(1.2);
}

/* Textures */
.texture::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' viewBox='0 0 700 700' width='700' height='700' opacity='0.2'%3E%3Cdefs%3E%3Cfilter id='nnnoise-filter' x='-20%25' y='-20%25' width='140%25' height='140%25' filterUnits='objectBoundingBox' primitiveUnits='userSpaceOnUse' color-interpolation-filters='linearRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' seed='3' stitchTiles='stitch' x='0%25' y='0%25' width='100%25' height='100%25' result='turbulence'%3E%3C/feTurbulence%3E%3CfeSpecularLighting surfaceScale='18' specularConstant='0.2' specularExponent='20' lighting-color='%23eaeaea' x='0%25' y='0%25' width='100%25' height='100%25' in='turbulence' result='specularLighting'%3E%3CfeDistantLight azimuth='3' elevation='95'%3E%3C/feDistantLight%3E%3C/feSpecularLighting%3E%3C/filter%3E%3C/defs%3E%3Crect width='700' height='700' fill='%230e1016'%3E%3C/rect%3E%3Crect width='700' height='700' fill='%23eaeaea' filter='url(%23nnnoise-filter)'%3E%3C/rect%3E%3C/svg%3E");
  background-size: 350px 350px;
  background-repeat: repeat;
  z-index: -1;
  opacity: 1;
}

/* Button - Return To Top Button */
#return-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-in-out, visibility 0.3s;
  padding: 0.75rem 1rem;
  font-size: 1.2rem;
  border-radius: 0.25rem;
  text-align: center;
}

#return-to-top.show {
  opacity: 1;
  visibility: visible;
}


/* Notice Bar */
.notice-bar {
  overflow: hidden;
  border-bottom: 0.1rem solid var(--border-light);
}

/* Notice Bar - Animation */
.notice-bar::before,
.notice-bar::after {
  content: "";
  position: absolute;
  top: 49%;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, transparent, #ff0019, transparent);
  animation: backgroundShine 3s linear infinite;
  opacity: 1;
}

.notice-bar::before {
  transform: scaleY(3%);
}

.notice-bar::after {
  filter: blur(6px);
  opacity: 0.1;
}

@keyframes backgroundShine {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

/* News Article Image */
.img-height {
  height: 20rem;
  object-fit: cover;
}

/* Maintenance Page */
.maintenance-margin {
  margin-top: 10rem;
}

.maintenance-logo {
  width: 400px; /* Adjust as needed */
  margin: auto;
}

/* --- NAV estilo vidrio/azulado --- */
.glass-nav {
  /* capa de vidrio + transparencia */
  background: linear-gradient(180deg, rgba(20, 34, 61, .78), rgba(12, 23, 43, .64));
  backdrop-filter: saturate(120%) blur(8px);
  -webkit-backdrop-filter: saturate(120%) blur(8px);
  box-shadow: inset 0 -1px 0 rgba(160, 200, 255, .15);
  z-index: 1030; /* por encima del hero */
}

/* eliminamos el fondo negro del contenedor interno */
.glass-nav .nav-surface {
  background: transparent !important;
  border: 0 !important;
}

/* links del menú */
.glass-nav .navbar-nav .nav-link {
  color: #c7d9ff;               /* azul claro */
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 1.1rem .9rem;
  opacity: .9;
  transition: color .2s ease, opacity .2s ease;
}

/* hover / activo más brillante */
.glass-nav .navbar-nav .nav-link:hover,
.glass-nav .navbar-nav .nav-link.active {
  color: #e8f1ff;
  opacity: 1;
}

/* colores de Login/Register (lado derecho) */
.glass-nav .section-topbar .nav-link {
  color: #e5c64a;               /* dorado sutil */
  text-transform: uppercase;
  letter-spacing: .06em;
}
.glass-nav .section-topbar .nav-link:hover {
  color: #ffe27a;
}

/* logo con un leve realce */
.glass-nav .navbar-logo {
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.35));
}

/* en pantallas pequeñas, algo más compacto */
@media (max-width: 1199.98px) {
  .glass-nav .navbar-nav .nav-link { padding: .85rem .75rem; }
}

/* ====== MENÚ: solo glow en el texto, sin bloques de fondo ====== */

/* Anula el fondo/recuadro que aparece en hover */
.header .navbar .navbar-nav .nav-item:hover .nav-link,
.header .navbar .navbar-nav .nav-item .nav-link:hover,
.header .navbar .navbar-nav .nav-item .nav-link:active,
.header .navbar .navbar-nav .nav-item .nav-link.nav-active,
.nav-link:hover,
.nav-link:focus,
.nav-item:hover {
  background-color: transparent !important;
  border-color: transparent !important;
}

/* Transición suave para el glow */
.glass-nav .navbar-nav .nav-link {
  transition: color .2s ease, text-shadow .2s ease, opacity .2s ease;
}

/* ==== Glow azul hielo en el menú (hover/activo) ==== */
.glass-nav .navbar-nav .nav-link {
  transition: color .2s ease, text-shadow .25s ease, opacity .2s ease;
}

.glass-nav .navbar-nav .nav-link:hover,
.glass-nav .navbar-nav .nav-link:focus,
.glass-nav .navbar-nav .nav-link.active {
  color: #EAF7FF !important; /* un poco más claro que #C7EBFC al brillar */
  text-shadow:
    0 0 6px rgba(199, 235, 252, 0.95),
    0 0 14px rgba(120, 200, 255, 0.60),
    0 0 28px rgba(120, 200, 255, 0.35);
  background: transparent !important; /* sin bloque oscuro detrás */
  border-color: transparent !important;
}

/* ===== Cambiar color de enlaces del menú a #C7EBFC ===== */
.glass-nav .navbar-nav .nav-link {
  color: #C7EBFC !important;
}

.glass-nav .section-topbar .nav-link {
  color: #C7EBFC !important;
}

/* ==== GLOW AZUL INTENSO EN EL MENÚ ==== */
.glass-nav .navbar-nav .nav-link {
  display: inline-block;                 /* permite que el drop-shadow afecte al texto */
  font-weight: 700;                      /* un poco más grueso para que el brillo se note */
  transition: color .2s ease, text-shadow .25s ease, filter .25s ease, opacity .2s ease;
}

.glass-nav .navbar-nav .nav-link:hover,
.glass-nav .navbar-nav .nav-link:focus,
.glass-nav .navbar-nav .nav-link.active {
  color: #F5FBFF !important; /* más claro que #C7EBFC al brillar */
  text-shadow:
    0 0 2px  rgba(199,235,252,1),
    0 0 6px  rgba(120,200,255,0.95),
    0 0 12px rgba(120,200,255,0.85),
    0 0 24px rgba(80,170,255,0.75),
    0 0 36px rgba(60,140,255,0.60);
  filter: drop-shadow(0 0 10px rgba(120,200,255,0.55))
          drop-shadow(0 0 18px rgba(120,200,255,0.35)); /* halo extra alrededor */
  background: transparent !important;
  border-color: transparent !important;
}

/* ===== Feature strip tipo Revelation ===== */
.rw-feature-strip {
  position: relative;
  padding: 40px 0 60px;
}

.rw-panel {
  background: radial-gradient(120% 120% at 20% 0%, rgba(34,56,92,0.65) 0%, rgba(12,22,40,0.85) 60%, rgba(8,16,30,0.95) 100%);
  border: 1px solid rgba(119,160,255,0.18);
  border-radius: 18px;
  box-shadow: 0 20px 40px rgba(2,8,20,.45), inset 0 0 0 1px rgba(255,255,255,.03);
  backdrop-filter: blur(6px);
  padding: 32px 28px;
}

.rw-panel--left { 
  position: relative;
  overflow: hidden; 
}
.rw-panel--right { 
  position: relative; 
}

/* Títulos/estilos */
.rw-eyebrow {
  font-size: .95rem;
  letter-spacing: .28em;
  color: #c9d6ff;
  opacity: .9;
  text-transform: uppercase;
  margin: 0 0 6px;
}
.rw-title {
  font-weight: 800;
  letter-spacing: .08em;
  margin: 0 0 18px;
  color: #C1E3FE;
  text-shadow: 0 2px 10px rgba(0,140,255,.15);
}
.rw-copy {
  color: #9fb4d9;
  line-height: 1.7;
  margin-bottom: 28px;
}

.rw-btn {
  display: inline-block;
  padding: 12px 28px;
  border-radius: 14px;
  border: 2px solid rgba(120,180,255,.45);
  color: #e9f3ff;
  text-decoration: none;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: 0 0 0 3px rgba(38,100,255,.12), inset 0 0 12px rgba(140,200,255,.15);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.rw-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(160,220,255,.75);
  box-shadow: 0 0 0 5px rgba(60,130,255,.18), inset 0 0 16px rgba(160,220,255,.25);
}

/* Video panel */
.rw-video {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(119,160,255,0.18);
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
}
.rw-video-copy {
  color: #9fb4d9;
}
.rw-video-copy a { color: #cbdcff; text-decoration: underline; }

/* Personaje superpuesto (PNG con transparencia) */
.rw-character {
  position: absolute;
  left: -124px;          /* mover horizontal del personaje */
  bottom: 2px;        /* mover vertical del personaje */
  width: 520px;         /* tamaño base */
  pointer-events: none; /* que no bloquee clics */
  filter: drop-shadow(0 24px 36px rgba(0,0,0,.55));
  z-index: 50;
}
.char-original {
  width: 520px;
  left: -124px;
  bottom: 2px;
}

.char-alt1 {
  width: 380px;
  left: -110px;
  bottom: -30px;
}

.char-alt2 {
  width: 380px;
  left: -70px;
  bottom: -30px;
}


/* Ajustes responsivos */
@media (max-width: 1199.98px) {
  .rw-character { width: 360px; left: -30px; bottom: -36px; }
}
@media (max-width: 991.98px) {
  .rw-character { display: none; }
}

/* Sube la sección para que se meta sobre el HERO */
.rw-feature-strip{
  margin-top: -320px;   /* prueba con -60, -80, -100, -140 según veas */
  position: relative;
  z-index: 3;           /* por si necesitas quedar por encima de fondos */
}

/* En móvil, evita solapes fuertes */
@media (max-width: 991.98px){
  .rw-feature-strip{ margin-top: 0; }
}
/* Empujar el texto a la derecha (deja hueco al personaje) */
.rw-panel--left{
  padding-left: 18rem;   /* pruébalo con 16–22rem según lo veas */
}

/* Responsivo: reduce el empuje en anchos menores */
@media (max-width: 1400px){
  .rw-panel--left{ padding-left: 14rem; }
}
@media (max-width: 1200px){
  .rw-panel--left{ padding-left: 10rem; }
}
@media (max-width: 992px){
  .rw-panel--left{ padding-left: 1.25rem; } /* normal en móvil */
}
/* Solo el párrafo */
.rw-panel--left .rw-copy{
  text-align: right;
}

/* === BOTÓN: posición fija e igual para los 3 slides === */
:root{
  /* cuanto más grande, más abajo queda el botón */
  --rw-btn-bottom: 50px;   /* prueba 120–150px si lo quieres aún más abajo */
}

.rw-panel--left{ position: relative; }

.rw-panel--left .rw-btn{
  position: absolute;
  right: 275px;               /* pegado a la derecha del panel */
  bottom: var(--rw-btn-bottom);
  margin: 0;                 /* anula márgenes previos */
}

/* En móvil volvemos a flujo normal para evitar solapes */
@media (max-width: 992px){
  .rw-panel--left .rw-btn{
    position: static;
    margin-top: 16px;
  }
}


/* ==== Fondo tenue dentro del panel izquierdo (feature-strip) ==== */
.rw-panel--left {
  position: relative;      /* asegurar contexto para ::before */
  overflow: hidden;        /* ya lo tienes, por si acaso */
}

/* Fondo tenue del panel izquierdo tomado de una variable CSS */
.rw-panel--left {
  position: relative;
  overflow: hidden;
}

/* La imagen de fondo la inyectamos por --rw-slide vía JS */
.rw-panel--left::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--rw-slide); /* <— aquí caerán slide1/2/3 */
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
  opacity: .5;                 /* ~50% de opacidad */
  z-index: 0;
  pointer-events: none;
  transition: opacity .45s ease; /* suaviza el fade */
}

/* El contenido siempre por encima del fondo */
.rw-panel--left > * {
  position: relative;
  z-index: 1;
}

/* Estado de desvanecido */
.rw-panel--left.fade-out::before {
  opacity: 0;
}

/* (Opcional) en móvil quitar la imagen si quieres */
/*
@media (max-width: 991.98px){
  .rw-panel--left::before { display: none; }
}
*/
/* Personaje: transición para el fade */
.rw-character {
  transition: opacity .45s ease;
}
.rw-character.fade-out { opacity: 0; }

/* Textos: marca los elementos "fadables" y apágalos durante el cambio */
.rw-fadable { transition: opacity .35s ease; }
.rw-panel--left.fade-out-text .rw-fadable { opacity: 0; }
/* ==== Indicadores del slider: líneas horizontales ==== */
.rw-dots{
  position: absolute;
  left: 50%;
  bottom: 18px;               /* mueve más arriba/abajo si quieres */
  transform: translateX(-50%);
  display: flex;
  gap: 28px;                  /* separación entre líneas */
  align-items: center;
  z-index: 2;                 /* por encima del fondo del panel */
  pointer-events: auto;       /* clickeables */
}

.rw-dot{
  position: relative;
  width: 74px;                /* largo de la línea */
  height: 6px;                /* grosor de la línea */
  border-radius: 4px;
  background: rgba(22, 44, 88, .85);   /* línea apagada */
  box-shadow: inset 0 0 0 1px rgba(140, 170, 220, .12);
  opacity: .9;
  cursor: pointer;
  transition: opacity .2s ease, transform .2s ease, background .2s ease;
}

/* sub-línea dorada (como en tu captura) */
.rw-dot::after{
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: -6px;               /* distancia bajo la línea principal */
  height: 3px;                /* grosor sub-línea */
  border-radius: 3px;
  background: #b7862e;        /* dorado */
  opacity: .55;
}
/* === Quitar la sub-línea amarilla bajo los indicadores del slider === */
.rw-dot::after{
  display: none !important;
  content: none !important;
}

.rw-dot:hover{ opacity: 1; transform: translateY(-1px); }

/* activo: línea iluminada + sub-línea más visible */
.rw-dot.is-active{
  background: linear-gradient(180deg, #9fd0ff, #4aa3ff);
  box-shadow:
    0 0 10px rgba(110,188,255,.35),
    inset 0 -1px 0 rgba(255,255,255,.25);
}
.rw-dot.is-active::after{ opacity: .95; }

/* ==== FEATURE SHOWCASE (estilos) ==== */
.fsx { position: relative; padding-top: 3rem; padding-bottom: 3rem; }

.fsx-wrap{
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
}

.fsx-track{
  display: flex;
  gap: 22px;
  overflow-x: auto;
  padding: 8px 4px;
  scroll-snap-type: x mandatory;
  scroll-padding: 12px;
  scrollbar-width: none;          /* Firefox */
}
.fsx-track::-webkit-scrollbar { display: none; } /* Chrome/Safari */

.fsx-card{
  min-width: 280px;
  max-width: 320px;
  background: radial-gradient(120% 120% at 20% 0%, rgba(34,56,92,0.55) 0%, rgba(12,22,40,0.85) 60%, rgba(8,16,30,0.95) 100%);
  border: 1px solid rgba(119,160,255,0.18);
  border-radius: 16px;
  box-shadow: 0 16px 32px rgba(2,8,20,.45), inset 0 0 0 1px rgba(255,255,255,.03);
  overflow: hidden;
  scroll-snap-align: center;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.fsx-card:hover{
  transform: translateY(-3px);
  border-color: rgba(160,220,255,.35);
  box-shadow: 0 22px 44px rgba(2,8,20,.6);
}
.fsx-card.is-featured{
  outline: 2px solid rgba(120,180,255,.35);
  box-shadow: 0 0 0 4px rgba(50,120,255,.15), 0 20px 42px rgba(2,8,20,.55);
}

.fsx-card__img{
  height: 220px;
  background-size: cover;
  background-position: center;
  border-bottom: 1px solid rgba(119,160,255,0.18);
  filter: saturate(1.05);
}
.fsx-card__body{ padding: 18px 18px 22px; }
.fsx-card__title{
  color: #C1E3FE;
  font-weight: 800;
  letter-spacing: .06em;
  margin: 0 0 10px;
  text-transform: uppercase;
  text-shadow: 0 2px 10px rgba(0,140,255,.12);
}
.fsx-card__text{ color: #9fb4d9; margin: 0; line-height: 1.6; }

.fsx-btn{
  background: rgba(28,40,72,.75);
  border: 1px solid rgba(140,170,220,.25);
  width: 42px; height: 42px;
  border-radius: 12px;
  display: grid; place-items: center;
  font-size: 26px; line-height: 1;
  color: #cfe6ff;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.fsx-btn:hover{
  background: rgba(40,68,120,.9);
  border-color: rgba(160,200,255,.55);
  transform: translateY(-1px);
}
.fsx-btn--prev{ justify-self: start; }
.fsx-btn--next{ justify-self: end; }

@media (max-width: 991.98px){
  .fsx-card{ min-width: 240px; }
}
/* ===== Divider / Separador de sección ===== */

.rw-divider__line{
  height: 1px;              /* grosor de la línea */
  width: 100%;
  border-radius: 2px;
  background: linear-gradient(
    90deg,
    rgba(0,0,0,0) 0%,
    rgba(120,170,255,.12) 10%,
    #6fb7ff 50%,
    rgba(120,170,255,.12) 90%,
    rgba(0,0,0,0) 100%
  );
  box-shadow:
    0 0 10px rgba(110, 188, 255, .28),
    0 0 22px rgba(110, 188, 255, .18);
  opacity: .9;
}

/* Variante más discreta (opcional). Cambia el background por este si la quieres menos brillante: */
/*
.rw-divider__line{
  background: linear-gradient(90deg, transparent, rgba(160,190,255,.35), transparent);
  box-shadow: 0 0 8px rgba(120,170,255,.18);
}
*/
.rw-character {
  transition: opacity 0.4s ease-in-out;
  opacity: 1;
}

.rw-character.fade-out {
  opacity: 0;
}

/* ===== Social: glow en capas + tooltip con punta ===== */

/* contenedor */
.social-list{ gap:22px; }

/* botón redondo base */
.social{
  --brand:#333;                 /* se redefine por red */
  --badge-bg:var(--brand);
  width:56px;height:56px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:#7DACE2;color:#111;text-decoration:none;
  /* sombra base suave */
  box-shadow:0 6px 12px rgba(0,0,0,.15);
  /* la curva del vídeo */
  transition: all .4s cubic-bezier(.68,-.55,.265,1.55);
  position:relative;line-height:1;font-size:1.5rem;
}

/* hover: color de marca + glow en capas */
.social:hover{
  background:var(--brand); color:#fff; transform:translateY(-2px);
  /* fallback sencillo */
  box-shadow:
    0 0 6px var(--brand),
    0 0 18px var(--brand),
    0 0 36px var(--brand);
  /* versión con intensidades (si el navegador soporta color-mix) */
  box-shadow:
    0 0 6px  color-mix(in srgb, var(--brand) 95%, transparent),
    0 0 24px color-mix(in srgb, var(--brand) 60%, transparent),
    0 0 48px color-mix(in srgb, var(--brand) 40%, transparent),
    0 0 72px color-mix(in srgb, var(--brand) 25%, transparent);
}

/* tooltip pastilla + punta hacia abajo */
.social::after{
  content:attr(data-label);
  position:absolute; bottom:100%; left:50%;
  transform:translateX(-50%) translateY(-8px);
  background:var(--badge-bg); color:#fff;
  font-size:.85rem;font-weight:600;
  padding:.4rem .8rem;border-radius:999px;white-space:nowrap;
  opacity:0; pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
}
.social::before{
  content:""; position:absolute; bottom:100%; left:50%;
  transform:translateX(-50%) translateY(2px);
  border:6px solid transparent; border-top-color:var(--badge-bg);
  opacity:0; transition:opacity .25s ease, transform .25s ease;
}
.social:hover::after{ opacity:1; transform:translateX(-50%) translateY(-14px); }
.social:hover::before{ opacity:1; transform:translateX(-50%) translateY(-4px); }

/* Colores de marca (puedes ajustarlos o moverlos a :root) */
:root{
  --brand-facebook:#1877f2;
  --brand-youtube:#ff0000;
  --brand-tiktok:#000000;   /* o #69C9D0 */
  --brand-x:#000000;
  --brand-whatsapp:#25d366;
}
.social--facebook{ --brand:var(--brand-facebook); }
.social--youtube { --brand:var(--brand-youtube); }
.social--tiktok  { --brand:var(--brand-tiktok); }
.social--x       { --brand:var(--brand-x); }
.social--whatsapp{ --brand:var(--brand-whatsapp); }

/* Accesibilidad: menos movimiento si el usuario lo pide */
@media (prefers-reduced-motion: reduce){
  .social{ transition:none; }
  .social:hover{ transform:none; }
}

/* ===== OCULTAR MENÚ VIEJO DEL THEME ===== */
#header,
#menu,
.header,
.navbar,
.navbar-default,
.navbar-area,
.header-menu,
.menu-container {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Fondo global */
body {
  background: #000 url('../images/background6.webp') no-repeat top center !important;
  background-size: cover !important;
}

/* Contenedor del nuevo menú */
.mastnav {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
  gap: 24px !important;
  padding: 14px 24px !important;
  background: transparent !important;
  z-index: 5 !important;
}

/* Fondo full-width */
.mastnav::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 100vw !important;
  height: 100% !important;
  background: #0f0f0f !important;
  z-index: -1 !important;
}

/* Línea decorativa inferior */
.mastnav::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  bottom: -14px !important;
  width: 100vw !important;
  height: 28px !important;
  background: url("../images/titan/menu.png") repeat-x center !important;
  pointer-events: none !important;
}

/* Logo centrado */
.mastnav .brand {
  width: 260px !important;
  height: 60px !important;
  display: block !important;
  background: url("../images/titan/logo.png") no-repeat center / contain !important;
}

/* Listas */
.mastnav .nav-left,
.mastnav .nav-right {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 22px !important;
}
.mastnav .nav-left {
  justify-content: flex-start !important;
}
.mastnav .nav-right {
  justify-content: flex-end !important;
}

/* Enlaces */
.mastnav a {
  text-decoration: none !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  font-weight: 600 !important;
  color: #d9a55a !important;
  transition: color 0.2s ease !important;
}
.mastnav a:hover {
  color: #f0cf84 !important;
}

/* Botón registrar */
.mastnav a.btn-register {
  padding: 6px 12px !important;
  border: 1px solid rgba(217, 165, 90, 0.4) !important;
  border-radius: 4px !important;
}

/* Responsive */
@media (max-width: 980px) {
  .mastnav {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 10px 12px 28px !important;
  }
  .mastnav .brand {
    margin: 0 auto !important;
  }
  .mastnav .nav-left,
  .mastnav .nav-right {
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 14px 18px !important;
  }
  .mastnav::after {
    bottom: -10px !important;
    height: 22px !important;
  }
}
/* ====== WOW Cards (estilo lore) ====== */
.features-wow { --gold:#ffb431; --ink:#0d0f12; }
.features-wow .wow-grid{
  display:grid; grid-template-columns:repeat(12,1fr); gap:28px;
}
.wow-card{
  position:relative; border-radius:10px; overflow:hidden;
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 8px 28px rgba(0,0,0,.55);
  background:#111;
  isolation:isolate;
}
.wow-card::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background:var(--bg) center/cover no-repeat;
  transform:scale(1.03);
  filter:brightness(.95) contrast(1.05);
}
.wow-card::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.65) 55%, rgba(0,0,0,.85) 100%);
}

/* tamaños: 2 grandes arriba, 3 pequeñas abajo */
.wow-card--hero{ grid-column:span 6; min-height:340px; }
.wow-card--mini{ grid-column:span 4; min-height:300px; }

@media (max-width: 1200px){
  .wow-card--hero{ grid-column:span 12; }
  .wow-card--mini{ grid-column:span 6; }
}
@media (max-width: 768px){
  .wow-card--mini{ grid-column:span 12; }
}

/* contenido */
.wow-body{ padding:26px 28px 28px; }
.wow-eyebrow{
  font-family:"Uncial Antiqua", serif; color:#e8d8b1;
  font-size:22px; line-height:1.1; margin:0 0 6px;
  text-shadow:0 1px 0 #000, 0 0 8px rgba(0,0,0,.65);
}
.wow-title{
  font-family:"Cinzel", serif; font-weight:800;
  color:var(--gold); margin:0 0 14px; letter-spacing:.3px;
  font-size:28px; text-shadow:0 1px 0 #000, 0 0 10px rgba(0,0,0,.55);
}
.wow-text{
  color:#cfd6df; font-size:14px; line-height:1.65; margin:0;
}

/* separador “and” (opcional) */
.wow-sep{ display:flex; align-items:center; gap:10px; margin:4px 0 12px; }
.wow-sep::before,.wow-sep::after{
  content:""; height:1px; flex:1;
  background:linear-gradient(90deg, transparent, rgba(255,180,49,.85), transparent);
}
.wow-sep b{ font-family:"Uncial Antiqua", serif; color:var(--gold); letter-spacing:2px; }

/* esquinas decorativas (usa tu PNG/WebP) */
.wow-corners span{
  position:absolute; width:26px; height:26px; opacity:.9; filter:drop-shadow(0 1px 0 #000);
  background:var(--corner) center/contain no-repeat;
}
.wow-corners .tl{ left:10px; top:10px; transform:rotate(0deg); }
.wow-corners .tr{ right:10px; top:10px; transform:rotate(90deg); }
.wow-corners .bl{ left:10px; bottom:10px; transform:rotate(270deg); }
.wow-corners .br{ right:10px; bottom:10px; transform:rotate(180deg); }