/* =========================================================
   HEADER GLOBAL MAPECHECONNECT
========================================================= */

:root{

  --header-h:78px;

  --gold:#d99b2e;
  --gold2:#ffd278;

  --line:rgba(255,255,255,.08);

}

/* =========================================================
   HEADER
========================================================= */

.site-header{

  position:fixed;

  top:0;
  left:0;

  width:100%;

  height:var(--header-h);

  z-index:9999;

}

/* =========================================================
   CONTAINER
========================================================= */

.header-bar{

  width:min(100%,1300px);

  height:100%;

  margin:0 auto;

  padding:0 28px;

  display:flex;

  align-items:center;

  justify-content:space-between;

  position:relative;
}

/* =========================================================
   LOGO
========================================================= */

.brand{

  display:flex;

  align-items:center;

  gap:14px;

  text-decoration:none;
}

.brand img{

  height:56px;

  width:auto;

  object-fit:contain;
}

.brand .name{

  color:#fff;

  font-size:22px;

  font-weight:900;

  letter-spacing:-.5px;
}

/* =========================================================
   NAV
========================================================= */

.nav{

  display:flex;

  align-items:center;

  gap:14px;
}

/* =========================================================
   LINKS
========================================================= */

.nav a{

  position:relative;

  display:flex;

  align-items:center;

  justify-content:center;

  min-height:48px;

  padding:0 20px;

  border-radius:16px;

  color:#fff;

  font-size:15px;

  font-weight:800;

  text-decoration:none;

  transition:.25s;
}

/* =========================================================
   HOVER
========================================================= */

.nav a:hover{

  color:var(--gold2);

  background:
  rgba(255,255,255,.04);
}

/* =========================================================
   LOGIN BTN
========================================================= */

.tab{

  background:
  linear-gradient(
    180deg,
    var(--gold2),
    var(--gold)
  ) !important;

  color:#111 !important;

  box-shadow:
  0 10px 28px rgba(217,155,46,.25);
}
/* =========================================================
   DECONNECTION
========================================================= */
.logout-user-icon{
    width:44px;
    height:44px;

    padding:0 !important;

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

    border-radius:14px;

    background:
        linear-gradient(
            180deg,
            #ff4b4b,
            #c91f1f
        ) !important;

    box-shadow:
        0 10px 24px rgba(255,0,0,.28),
        inset 0 1px 0 rgba(255,255,255,.22);

    text-decoration:none;
}

.logout-user-icon:hover{
    transform:translateY(-1px);

    background:
        linear-gradient(
            180deg,
            #ff6161,
            #d82626
        ) !important;
}

.logout-user-icon:active{
    transform:scale(.96);
}

.logout-user-icon img{
    width:22px;
    height:22px;
    object-fit:contain;
    filter:brightness(0) invert(1);
}
.header-logout-form{
    margin:0;
    padding:0;
    display:flex;
    align-items:center;
    justify-content:center;
}

.header-exit-btn{
    width:48px;
    height:48px;

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

    border:0;
    outline:0;
    cursor:pointer;

    border-radius:16px;

    background:
        linear-gradient(
            180deg,
            #ff4b4b,
            #c91f1f
        );

    box-shadow:
        0 12px 26px rgba(255,0,0,.28),
        inset 0 1px 0 rgba(255,255,255,.22);

    transition:.18s ease;
}

.header-exit-btn:hover{
    transform:translateY(-1px);

    background:
        linear-gradient(
            180deg,
            #ff6161,
            #d82626
        );
}

.header-exit-btn:active{
    transform:scale(.96);
}

.header-exit-btn img{
    width:30px;
    height:30px;
    object-fit:contain;
    filter:brightness(0) invert(1);
}
/* =========================================================
   MENU BUTTON
========================================================= */

.menu-toggle{

  display:none;

  align-items:center;

  justify-content:center;

  width:52px;
  height:52px;

  border:none;

  border-radius:18px;

  background:
  rgba(255,255,255,.05);

  border:
  1px solid rgba(255,255,255,.06);

  color:#fff;

  font-size:28px;

  cursor:pointer;

  transition:.25s;
}

.menu-toggle:hover{

  background:
  rgba(255,255,255,.08);
}

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

@media(max-width:900px){

  .header-bar{

    padding:0 18px;
  }

  /* =========================
     LOGO
  ========================= */

  .brand img{

    height:46px;
  }

  .brand .name{

    font-size:18px;
  }

  /* =========================
     HAMBURGER
  ========================= */

  .menu-toggle{

    display:flex;
  }

  /* =========================
     NAV MOBILE
  ========================= */

  .nav{

    position:absolute;

    top:84px;
    right:18px;

    width:260px;

    display:none;

    flex-direction:column;

    align-items:stretch;

    gap:12px;

    padding:16px;

    border-radius:26px;

    background:
    rgba(5,10,15,.97);

    border:
    1px solid rgba(255,255,255,.06);

    backdrop-filter:blur(20px);

    box-shadow:
    0 20px 60px rgba(0,0,0,.45);
  }

  .nav.active{

    display:flex;
  }

  /* =========================
     LINKS
  ========================= */

  .nav a{

    width:100%;

    min-height:54px;

    justify-content:center;

    background:
    rgba(255,255,255,.04);

    border-radius:18px;
  }

}