.elementor-229 .elementor-element.elementor-element-ed8f730{--display:flex;--min-height:80px;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--overlay-opacity:1;border-style:solid;--border-style:solid;border-width:0px 0px 1px 0px;--border-top-width:0px;--border-right-width:0px;--border-bottom-width:1px;--border-left-width:0px;border-color:#040B11;--border-color:#040B11;box-shadow:0px 1px 1px 0px #143D52;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-229 .elementor-element.elementor-element-ed8f730:not(.elementor-motion-effects-element-type-background), .elementor-229 .elementor-element.elementor-element-ed8f730 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#0C1B27;}.elementor-229 .elementor-element.elementor-element-ed8f730::before, .elementor-229 .elementor-element.elementor-element-ed8f730 > .elementor-background-video-container::before, .elementor-229 .elementor-element.elementor-element-ed8f730 > .e-con-inner > .elementor-background-video-container::before, .elementor-229 .elementor-element.elementor-element-ed8f730 > .elementor-background-slideshow::before, .elementor-229 .elementor-element.elementor-element-ed8f730 > .e-con-inner > .elementor-background-slideshow::before, .elementor-229 .elementor-element.elementor-element-ed8f730 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{--background-overlay:'';background-color:#091A28;}.elementor-229 .elementor-element.elementor-element-f03d629{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:center;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:260px;--padding-right:0px;--z-index:1;}.elementor-229 .elementor-element.elementor-element-f03d629.e-con{--align-self:center;}.elementor-229 .elementor-element.elementor-element-774457e{--display:flex;}.elementor-229 .elementor-element.elementor-element-9036a76{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-229 .elementor-element.elementor-element-9036a76.elementor-element{--align-self:center;}.elementor-229 .elementor-element.elementor-element-d6ab1da .menu-mobile-nav-button .hitboox-icon{color:#FFFFFF;}.elementor-229 .elementor-element.elementor-element-d6ab1da .menu-mobile-nav-button:hover .hitboox-icon{color:#54ADF7;}.elementor-229 .elementor-element.elementor-element-d6ab1da > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-229 .elementor-element.elementor-element-e47057a{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:flex-end;--align-items:center;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:20px;}.elementor-229 .elementor-element.elementor-element-eb15e66 .main-navigation{text-align:center;}.elementor-229 .elementor-element.elementor-element-eb15e66 .main-navigation ul.menu > li.menu-item > a{font-size:14px;font-weight:400;padding:35px 15px 35px 15px;}.elementor-229 .elementor-element.elementor-element-eb15e66 .main-navigation ul.menu li.menu-item .sub-menu .menu-item a{font-family:"Outfit", Sans-serif;font-size:14px;font-weight:400;line-height:1em;letter-spacing:0.1px;}.elementor-229 .elementor-element.elementor-element-eb15e66 .main-navigation ul.menu > li.menu-item > a:not(:hover){color:#FFFFFF;}.elementor-229 .elementor-element.elementor-element-eb15e66.show-style-menu-yes .main-navigation ul.menu  > li.menu-item:hover {background-color:#0A151F;}.elementor-229 .elementor-element.elementor-element-eb15e66 .main-navigation .sub-menu{background-color:#0A151F;}.elementor-229 .elementor-element.elementor-element-eb15e66 .main-navigation ul.menu >li.menu-item >a:hover{color:#54ADF7;}.elementor-229 .elementor-element.elementor-element-eb15e66 .main-navigation ul.menu >li.menu-item:hover >a:not(:hover){color:#FFFFFF;}.elementor-229 .elementor-element.elementor-element-eb15e66 .main-navigation ul.menu li.menu-item .sub-menu .menu-item a:hover{color:#54ADF7;}.elementor-229 .elementor-element.elementor-element-eb15e66 .main-navigation ul.menu li.menu-item .sub-menu .menu-item:hover > a{background-color:#0C1A27;}.elementor-229 .elementor-element.elementor-element-eb15e66 .main-navigation ul.menu > li.menu-item.current-menu-item > a:not(:hover){color:#FFFFFF;}.elementor-229 .elementor-element.elementor-element-eb15e66 .main-navigation ul.menu > li.menu-item.current-menu-parent > a:not(:hover){color:#FFFFFF;}.elementor-229 .elementor-element.elementor-element-eb15e66 .main-navigation ul.menu > li.menu-item.current-menu-ancestor > a:not(:hover){color:#FFFFFF;}.elementor-229 .elementor-element.elementor-element-eb15e66 .main-navigation ul.menu > li.menu-item.current-menu-item:hover > a:not(:hover){color:#FFFFFF;}.elementor-229 .elementor-element.elementor-element-eb15e66 .main-navigation ul.menu > li.menu-item.current-menu-parent:hover > a:not(:hover){color:#FFFFFF;}.elementor-229 .elementor-element.elementor-element-eb15e66 .main-navigation ul.menu > li.menu-item.current-menu-ancestor:hover > a:not(:hover){color:#FFFFFF;}.elementor-229 .elementor-element.elementor-element-eb15e66 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 15px 0px 0px;}.elementor-229 .elementor-element.elementor-element-500f911{--divider-border-style:dotted;--divider-color:#082D41;--divider-border-width:2px;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:25px 0px 25px 0px;width:var( --container-widget-width, 50px );max-width:50px;--container-widget-width:50px;--container-widget-flex-grow:0;--e-transform-rotateZ:90deg;}.elementor-229 .elementor-element.elementor-element-500f911 .elementor-divider-separator{width:100px;margin:0 auto;margin-center:0;}.elementor-229 .elementor-element.elementor-element-500f911 .elementor-divider{text-align:center;padding-block-start:2px;padding-block-end:2px;}.elementor-229 .elementor-element.elementor-element-500f911.elementor-element{--align-self:center;}.elementor-229 .elementor-element.elementor-element-505eadf{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-229 .elementor-element.elementor-element-a1077d3{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--margin-top:-87px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-229 .elementor-element.elementor-element-a2ef9f8{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--margin-top:5px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-229 .elementor-element.elementor-element-a2ef9f8.e-con{--align-self:center;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );}.elementor-229 .elementor-element.elementor-element-0facdcf img{width:145px;max-width:145px;}.elementor-229 .elementor-element.elementor-element-0facdcf{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-229 .elementor-element.elementor-element-4e57f33{--display:flex;--min-height:0px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:40px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-heading .elementor-heading-title{color:var( --e-global-color-primary );}.elementor-229 .elementor-element.elementor-element-f657e5f .elementor-heading-title{font-family:"Outfit", Sans-serif;font-size:30px;font-weight:800;line-height:1em;letter-spacing:0.5px;color:#FFFFFF;}.elementor-229 .elementor-element.elementor-element-f657e5f{margin:15px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-229 .elementor-element.elementor-element-b825016 .elementor-heading-title{font-family:"Outfit", Sans-serif;font-size:18px;font-weight:400;line-height:1em;letter-spacing:2.1px;color:#FFFFFF;}.elementor-229 .elementor-element.elementor-element-b825016{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.breadcrumb-wrap .breadcrumb-overlay, .elementor-page-91743 .breadcrumb-wrap .breadcrumb-overlay{opacity:0.5;}body.elementor-page-229:not(.elementor-motion-effects-element-type-background), body.elementor-page-229 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-accent );}@media(max-width:1024px){.elementor-229 .elementor-element.elementor-element-ed8f730{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:30px;--padding-right:0px;}.elementor-229 .elementor-element.elementor-element-f03d629{--justify-content:space-around;}.elementor-229 .elementor-element.elementor-element-774457e{--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:flex-end;--align-items:center;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:20px;}.elementor-229 .elementor-element.elementor-element-774457e.e-con{--align-self:flex-end;}.elementor-229 .elementor-element.elementor-element-9036a76{padding:5px 20px 0px 0px;}.elementor-229 .elementor-element.elementor-element-d6ab1da .menu-mobile-nav-button .hitboox-icon{font-size:2.5rem;}.elementor-229 .elementor-element.elementor-element-d6ab1da .menu-mobile-nav-button .hitboox-icon svg{height:2.5rem;}}@media(min-width:768px){.elementor-229 .elementor-element.elementor-element-ed8f730{--width:100%;}.elementor-229 .elementor-element.elementor-element-f03d629{--content-width:1290px;}.elementor-229 .elementor-element.elementor-element-a2ef9f8{--width:500px;}}@media(max-width:767px){.elementor-229 .elementor-element.elementor-element-ed8f730{--justify-content:space-between;--flex-wrap:nowrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:15px;--padding-right:15px;}.elementor-229 .elementor-element.elementor-element-f03d629{--justify-content:flex-end;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:10px;--padding-top:0px;--padding-bottom:0px;--padding-left:109px;--padding-right:0px;}.elementor-229 .elementor-element.elementor-element-f03d629.e-con{--align-self:flex-start;}.elementor-229 .elementor-element.elementor-element-774457e{--width:50%;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:flex-end;--margin-top:20px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-229 .elementor-element.elementor-element-774457e.e-con{--align-self:flex-start;}.elementor-229 .elementor-element.elementor-element-9036a76{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 20px 0px 0px;}.elementor-229 .elementor-element.elementor-element-9036a76.elementor-element{--align-self:flex-end;}.elementor-229 .elementor-element.elementor-element-d6ab1da .menu-mobile-nav-button .hitboox-icon{font-size:2rem;}.elementor-229 .elementor-element.elementor-element-d6ab1da .menu-mobile-nav-button .hitboox-icon svg{height:2rem;}.elementor-229 .elementor-element.elementor-element-d6ab1da > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-229 .elementor-element.elementor-element-d6ab1da.elementor-element{--align-self:center;}.elementor-229 .elementor-element.elementor-element-a2ef9f8{--justify-content:flex-start;}.elementor-229 .elementor-element.elementor-element-4e57f33{--width:45%;--margin-top:10px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-229 .elementor-element.elementor-element-4e57f33.e-con{--align-self:flex-start;}.elementor-229 .elementor-element.elementor-element-f657e5f .elementor-heading-title{font-size:22px;}.elementor-229 .elementor-element.elementor-element-b825016 .elementor-heading-title{font-size:12px;letter-spacing:2.4px;}}/* Start custom CSS for shortcode, class: .elementor-element-9036a76 *//* ======================================================
   Celentis User Menu — MOBILE/TABLET SHORTCODE (Right Header)
   ====================================================== */

/* ======================================================
   ROOT VARIABLES (easy tuning)
   ====================================================== */

:root {
  /* Login colors */
  --ci-login-text: #ffffff;
  --ci-login-link: #54ADF7;
  --ci-login-link-hover: #9ED1FA;
  --ci-login-sep: rgba(255,255,255,0.5);

  /* Typography */
  --ci-login-font-size: 14px;
  --ci-login-font-weight: 500;
  --ci-login-link-weight: 500;

  /* Panel spacing + positioning (mobile/tablet) */
@media (max-width: 1024px) {
  :root {
    --ci-panel-top: 72px;   /* base offset below header */
    --ci-panel-gap: 0px;    /* fine-tune up/down */
  }

  .ci-user-menu details[open] > :not(summary) {
    top: calc(var(--ci-panel-top) + var(--ci-panel-gap)) !important;
  }
}          /* vertical gap from avatar/trigger to panel */
  --ci-panel-edge-pad: 12px;    /* inset from the RIGHT edge of the screen */

  /* Optional: small manual nudge (use small values) */
  
/* =========================
   TABLET (1024px → 768px)
   ========================= */
@media (max-width: 1024px) and (min-width: 769px) {

  /* Tablet micro nudges */
  --ci-panel-nudge-x: -49px;
  --ci-panel-nudge-y: -6px;

  .elementor-229 .elementor-element.elementor-element-9036a76 details[open] > :not(summary) {
    transform: translate(
      var(--ci-panel-nudge-x),
      var(--ci-panel-nudge-y)
    ) !important;
  }
}

/* =========================
   MOBILE (≤ 768px)
   ========================= */
@media (max-width: 768px) {

  /* Mobile micro nudges */
  --ci-panel-nudge-x: -49px;
  --ci-panel-nudge-y: -12px;

  .elementor-229 .elementor-element.elementor-element-9036a76 details[open] > :not(summary) {
    transform: translate(
      var(--ci-panel-nudge-x),
      var(--ci-panel-nudge-y)
    ) !important;
  }
}

/* ======================================================
   Base
   ====================================================== */

.ci-user-menu {
  position: relative;
  display: inline-block;
  overflow: visible;
}

/* Remove default <details> marker */
.ci-user-menu summary { list-style: none; }
.ci-user-menu summary::-webkit-details-marker { display: none; }

/* Trigger */
.ci-user-menu__trigger {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  user-select: none;
}

/* Badge */
.ci-login-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

/* Avatar: support multiple variants reliably */
.ci-login-badge img,
.ci-login-badge img.avatar,
.ci-login-avatar {
  width: 44px;
  height: 44px;
  max-width: 44px;
  max-height: 44px;
  border-radius: 999px;
  object-fit: cover;
  flex-shrink: 0;
  display: block;
}

/* Keep text styles defined (even if hidden on mobile/tablet) */
.ci-login-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.ci-login-name {
  font-weight: 600;
  font-size: 14px;
  color: #ffffff;
}

.ci-discord-linked {
  font-size: 12px;
  color: #54ADF7;
}

.ci-discord-not-linked {
  font-size: 12px;
  color: #e74c3c;
}

.ci-user-menu__chev {
  font-size: 14px;
  opacity: 0.7;
  transform: translateY(-1px);
  color: #ffffff;
}

/* ======================================================
   Dropdown Panel (viewport-safe, right anchored)
   ====================================================== */

.ci-user-menu__panel {
  position: absolute;
  top: calc(100% + var(--ci-panel-gap));

  /* RIGHT-anchored so it expands left into the screen */
  left: auto;
  right: 0;

  /* Inset from screen edge (prevents clipping even if header is flush right) */
  margin-right: var(--ci-panel-edge-pad);

  /* Never exceed viewport width */
  width: min(320px, calc(100vw - (var(--ci-panel-edge-pad) * 2)));
  min-width: 220px;

  padding: 8px;
  border-radius: 0 0 10px 10px;
  z-index: 9999;

  background: rgba(5, 21, 32, 0.9);
  border: 1px solid #082D41;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 12px 34px rgba(0,0,0,0.35);

  /* Hidden by default */
  opacity: 0;
  transform: translateY(-4px);
  visibility: hidden;
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;

  /* Optional safe nudge */
  translate: var(--ci-panel-nudge-x) 0;
}

/* Hover bridge (gap matches --ci-panel-gap) */
.ci-user-menu__panel::before {
  content: "";
  position: absolute;
  top: calc(-1 * var(--ci-panel-gap));
  left: 0;
  right: 0;
  height: var(--ci-panel-gap);
  background: transparent;
}

/* Divider */
.ci-user-menu__sep {
  height: 1px;
  background: rgba(8, 45, 65, 0.9);
  margin: 6px 0;
}

/* ======================================================
   Menu Items — Glowing Left Border
   ====================================================== */

.ci-user-menu__item {
  position: relative;
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  text-decoration: none;
  font-size: 14px;
  color: #ffffff;
  background: transparent;
  transition: color 220ms ease, padding-left 220ms ease;
}

.ci-user-menu__item::before {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 8px;
  width: 2px;
  background: transparent;
  border-radius: 2px;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 220ms ease, transform 220ms ease, background 220ms ease;
  filter:
    drop-shadow(0 0 6px rgba(255, 58, 0, 0.85))
    drop-shadow(0 0 12px rgba(255, 58, 0, 0.45));
}

.ci-user-menu__item:hover,
.ci-user-menu__item:focus-visible {
  color: #ffffff;
  padding-left: 16px;
  outline: none;
}

.ci-user-menu__item:hover::before,
.ci-user-menu__item:focus-visible::before {
  background: #FF3A00;
  opacity: 1;
  transform: translateX(0);
}

.ci-user-menu__logout { font-weight: 600; }

/* ======================================================
   OPEN BEHAVIOR (mobile uses JS toggling [open])
   ====================================================== */

.ci-user-menu:hover .ci-user-menu__panel,
.ci-user-menu[open] .ci-user-menu__panel {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
}

.ci-user-menu summary {
  pointer-events: auto;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* ======================================================
   Mobile + Tablet: Avatar-only trigger
   ====================================================== */

@media (max-width: 1024px) {
  .ci-user-menu__trigger { gap: 0; }
  .ci-login-badge { gap: 0; }

  /* Avatar-only */
  .ci-login-text,
  .ci-user-menu__chev {
    display: none !important;
  }
}

/* ======================================================
   Guest State (Mobile/Tablet) — User icon + "Login"
   ====================================================== */

.ci-login-guest {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  font-size: var(--ci-login-font-size);
  font-weight: var(--ci-login-font-weight);
  color: var(--ci-login-text);
}

.ci-login-guest a {
  color: var(--ci-login-link);
  font-weight: var(--ci-login-link-weight);
  text-decoration: none;
  font-size: inherit;
  transition: color 180ms ease, text-shadow 180ms ease;
}

.ci-login-sep {
  color: var(--ci-login-sep);
  pointer-events: none;
  font-size: inherit;
}

@media (max-width: 1024px) {
  .ci-login-guest {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;

    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: center;
  }

  /* Hide Register + separator */
  .ci-login-guest .ci-login-sep,
  .ci-login-guest a:not(:first-child) {
    display: none !important;
  }

  /* Login link becomes icon button */
  .ci-login-guest a:first-child {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding: 0;
    color: var(--ci-login-text);
    text-decoration: none;
    text-align: center;
  }

  .ci-login-guest a:first-child::before {
    content: "👤";
    display: block;
    font-size: 22px;
    line-height: 1;
    margin: 0 0 2px 0;
    text-align: center;
  }

  .ci-login-guest a:first-child:hover {
    color: var(--ci-login-link-hover);
    text-shadow: 0 0 8px rgba(255, 58, 0, 0.4);
  }
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-505eadf *//* ======================================================
   Celentis User Menu — DESKTOP SHORTCODE ONLY
   (Use this CSS only on the desktop shortcode)
   ====================================================== */

/* ======================================================
   Base
   ====================================================== */

.ci-user-menu {
  position: relative;
  display: inline-block;
}

/* Remove default <details> marker */
.ci-user-menu summary { list-style: none; }
.ci-user-menu summary::-webkit-details-marker { display: none; }

/* Trigger */
.ci-user-menu__trigger {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  user-select: none;
}

/* ======================================================
   Badge (Avatar + Text)
   ====================================================== */

.ci-login-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

/* Avatar: support multiple variants reliably */
.ci-login-badge img,
.ci-login-badge img.avatar,
.ci-login-avatar {
  width: 50px;
  height: 50px;
  max-width: 50px;
  max-height: 50px;
  border-radius: 999px;
  object-fit: cover;
  flex-shrink: 0;
  display: block;
}

.ci-login-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.ci-login-name {
  font-weight: 600;
  font-size: 14px;
  color: #ffffff;
}

.ci-discord-linked {
  font-size: 12px;
  color: #54ADF7;
}

.ci-discord-not-linked {
  font-size: 12px;
  color: #e74c3c;
}

.ci-user-menu__chev {
  font-size: 14px;
  opacity: 0.7;
  transform: translateY(-1px);
  color: #ffffff;
}

/* ======================================================
   Dropdown Panel
   ====================================================== */

.ci-user-menu__panel {
  position: absolute;
  top: calc(100% + 15px);
  left: 0;
  right: auto;

  min-width: 220px;
  width: 100%;

  padding: 8px;
  border-radius: 0 0 10px 10px;
  z-index: 9999;

  background: rgba(5, 21, 32, 0.9);
  border: 1px solid #082D41;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 12px 34px rgba(0,0,0,0.35);

  /* Hidden by default */
  opacity: 0;
  transform: translateY(-4px);
  visibility: hidden;
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
}

/* Hover bridge (prevents hover gap) */
.ci-user-menu__panel::before {
  content: "";
  position: absolute;
  top: -15px;
  left: 0;
  right: 0;
  height: 15px;
  background: transparent;
}

/* Divider */
.ci-user-menu__sep {
  height: 1px;
  background: rgba(8, 45, 65, 0.9);
  margin: 6px 0;
}

/* ======================================================
   Menu Items — Glowing Left Border Only
   ====================================================== */

.ci-user-menu__item {
  position: relative;
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  text-decoration: none;
  font-size: 14px;

  color: #ffffff;
  background: transparent;

  transition: color 220ms ease, padding-left 220ms ease;
}

/* Left glow bar */
.ci-user-menu__item::before {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 8px;
  width: 2px;

  background: transparent;
  border-radius: 2px;

  opacity: 0;
  transform: translateX(-4px);
  transition:
    opacity 220ms ease,
    transform 220ms ease,
    background 220ms ease;

  /* Glow ONLY on bar */
  filter:
    drop-shadow(0 0 6px rgba(255, 58, 0, 0.85))
    drop-shadow(0 0 12px rgba(255, 58, 0, 0.45));
}

/* Hover / focus */
.ci-user-menu__item:hover,
.ci-user-menu__item:focus-visible {
  color: #ffffff;
  padding-left: 16px;
  outline: none;
}

.ci-user-menu__item:hover::before,
.ci-user-menu__item:focus-visible::before {
  background: #FF3A00;
  opacity: 1;
  transform: translateX(0);
}

/* Logout emphasis */
.ci-user-menu__logout {
  font-weight: 600;
}

/* ======================================================
   OPEN BEHAVIOR — DESKTOP
   ====================================================== */

/* Hover opens dropdown */
.ci-user-menu:hover .ci-user-menu__panel {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
}

/* Keep summary interactive */
.ci-user-menu summary {
  pointer-events: auto;
  cursor: pointer;
}

/* Optional: flip dropdown via Elementor class */
.ci-menu-end .ci-user-menu__panel {
  left: auto;
  right: 0;
}

/* ======================================================
   Guest State (Desktop Login/Register)
   ====================================================== */

:root {
  /* Colors */
  --ci-login-text: #ffffff;
  --ci-login-link: #54ADF7;
  --ci-login-link-hover: #9ED1FA;
  --ci-login-sep: rgba(255,255,255,0.5);

  /* Typography */
  --ci-login-font-size: 14px;
  --ci-login-font-weight: 500;
  --ci-login-link-weight: 500;
}

.ci-login-guest {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  font-size: var(--ci-login-font-size);
  font-weight: var(--ci-login-font-weight);
  color: var(--ci-login-text);
}

.ci-login-guest a {
  color: var(--ci-login-link);
  font-weight: var(--ci-login-link-weight);
  text-decoration: none;
  font-size: inherit;
  transition: color 180ms ease, text-shadow 180ms ease;
}

.ci-login-guest a:hover {
  color: var(--ci-login-link-hover);
  text-shadow: 0 0 8px rgba(255, 58, 0, 0.6);
}

.ci-login-sep {
  color: var(--ci-login-sep);
  pointer-events: none;
  font-size: inherit;
}/* End custom CSS */