@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;600;700;800&family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --bg: #070914;
  --sidebar: #0b0e1a;
  --card: #101527;
  --card2: #141a31;
  --border: #252d49;
  --primary: #7c5cff;
  --cyan: #22d3ee;
  --pink: #f472b6;
  --success: #35e0a1;
  --warning: #ffbe55;
  --danger: #ff667d;
  --text: #f7f8ff;
  --muted: #8993ad;
  --sidebar-w: 274px;
  --shadow: 0 18px 50px rgba(0, 0, 0, .28);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background:
    radial-gradient(
      circle at 85% 5%,
      rgba(124, 92, 255, .12),
      transparent 28%
    ),
    radial-gradient(
      circle at 10% 80%,
      rgba(34, 211, 238, .08),
      transparent 25%
    ),
    var(--bg);

  color: var(--text);

  font-family: Inter, Arial, sans-serif;
  font-size: 14px;
}

a {
  color: inherit;
}


/* =====================================================
   APP LAYOUT
===================================================== */

.app {
  min-height: 100vh;

  display: grid;

  grid-template-columns:
    var(--sidebar-w) 1fr;
}


/* =====================================================
   SIDEBAR
===================================================== */

.sidebar {
  position: sticky;
  top: 0;

  height: 100vh;

  padding: 20px 14px;

  background: rgba(11, 14, 26, .96);

  border-right:
    1px solid var(--border);

  overflow: auto;
}


.brand {
  display: flex;
  gap: 12px;
  align-items: center;

  padding: 6px 10px 22px;

  font-family: Orbitron;
}


.brand-mark {
  width: 42px;
  height: 42px;

  border-radius: 13px;

  display: grid;
  place-items: center;

  background:
    linear-gradient(
      135deg,
      var(--primary),
      var(--cyan)
    );

  box-shadow:
    0 0 34px rgba(124, 92, 255, .35);

  font-weight: 900;
}


.brand small {
  display: block;

  color: var(--muted);

  font: 600 9px Inter;

  letter-spacing: 1.4px;

  margin-top: 3px;
}


.branch-card {
  padding: 12px;

  border:
    1px solid var(--border);

  background:
    linear-gradient(
      135deg,
      rgba(124, 92, 255, .08),
      rgba(34, 211, 238, .03)
    );

  border-radius: 14px;

  margin-bottom: 16px;
}


.branch-card small,
.nav-label {
  color: var(--muted);

  font-size: 9px;

  font-weight: 800;

  letter-spacing: 1.2px;

  text-transform: uppercase;
}


.nav-label {
  padding: 14px 12px 6px;
}


.nav {
  display: grid;
  gap: 4px;
}


.nav a {
  display: flex;
  align-items: center;

  gap: 11px;

  padding: 10px 12px;

  border-radius: 10px;

  text-decoration: none;

  color: var(--muted);

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

  transition: .2s;
}


.nav a:hover {
  background:
    rgba(124, 92, 255, .08);

  color: #fff;

  transform:
    translateX(2px);
}


.nav a.active {
  background:
    linear-gradient(
      90deg,
      rgba(124, 92, 255, .22),
      rgba(34, 211, 238, .06)
    );

  color: #fff;

  border:
    1px solid rgba(124, 92, 255, .22);

  box-shadow:
    inset 3px 0 var(--primary);
}


.nav i {
  width: 18px;
  text-align: center;
}


/* =====================================================
   MAIN
===================================================== */

.main {
  min-width: 0;
}


/* =====================================================
   TOP BAR
===================================================== */

.topbar {
  height: 78px;

  padding: 0 28px;

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

  border-bottom:
    1px solid var(--border);

  background:
    rgba(7, 9, 20, .75);

  backdrop-filter:
    blur(16px);

  position: sticky;

  top: 0;

  z-index: 1000;
}


.topbar h1 {
  font-family: Orbitron;

  font-size: 18px;

  margin: 0;
}


.topbar p {
  margin: 4px 0 0;

  color: var(--muted);

  font-size: 10px;
}


/* =====================================================
   HEADER USER MENU
===================================================== */

.topbar-user-menu {
  position: relative;

  z-index: 1001;
}


/*
  Existing user-chip class is retained,
  but it no longer creates a white/default
  button background.
*/

.user-chip {
  display: flex;

  gap: 10px;

  align-items: center;
}


/* CLICKABLE USER AREA */

.user-menu-trigger {
  display: flex;
  align-items: center;

  gap: 10px;

  margin: 0;

  padding: 6px 8px;

  border:
    1px solid transparent !important;

  border-radius: 12px;

  background:
    transparent !important;

  color:
    var(--text) !important;

  box-shadow:
    none !important;

  outline: none;

  appearance: none;

  -webkit-appearance: none;

  cursor: pointer;

  font: inherit;

  text-align: left;

  transition:
    background .2s ease,
    border-color .2s ease,
    transform .2s ease;
}


.user-menu-trigger:hover {
  background:
    rgba(255, 255, 255, .04) !important;

  border-color:
    rgba(255, 255, 255, .08) !important;

  transform:
    translateY(-1px);
}


.user-menu-trigger:focus,
.user-menu-trigger:active,
.user-menu-trigger.active {
  background:
    rgba(124, 92, 255, .07) !important;

  border-color:
    rgba(124, 92, 255, .15) !important;

  color:
    var(--text) !important;

  box-shadow:
    none !important;

  outline: none;
}


.user-info {
  display: flex;

  flex-direction: column;

  align-items: flex-end;

  min-width: 0;
}


.user-info b {
  color: var(--text);

  font-size: 12px;

  line-height: 1.3;
}


.user-business-name {
  margin-top: 2px;

  max-width: 180px;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  font-size: 10px;
}


/* AVATAR */

.avatar {
  width: 38px;
  height: 38px;

  flex: 0 0 38px;

  border-radius: 12px;

  display: grid;

  place-items: center;

  background:
    linear-gradient(
      135deg,
      var(--primary),
      var(--cyan)
    );

  color: #07101d;

  font-weight: 900;
}


/* DROPDOWN ARROW */

.user-menu-arrow {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 14px;

  color: var(--muted);

  font-size: 11px;

  line-height: 1;

  opacity: .8;

  transition:
    transform .2s ease,
    color .2s ease,
    opacity .2s ease;
}


.user-menu-trigger:hover
.user-menu-arrow {
  color: var(--text);

  opacity: 1;
}


.user-menu-trigger.active
.user-menu-arrow {
  transform:
    rotate(180deg);

  color: var(--cyan);
}


/* =====================================================
   USER DROPDOWN
===================================================== */

.user-dropdown {
  position: absolute;

  top:
    calc(100% + 10px);

  right: 0;

  width: 260px;

  padding: 8px;

  border:
    1px solid var(--border);

  border-radius: 16px;

  background:
    linear-gradient(
      145deg,
      #11162a,
      #0c1020
    );

  box-shadow:
    0 24px 70px
    rgba(0, 0, 0, .55);

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

  transform:
    translateY(-8px)
    scale(.98);

  transform-origin:
    top right;

  transition:
    opacity .18s ease,
    visibility .18s ease,
    transform .18s ease;

  z-index: 99999;
}


.user-dropdown.show {
  opacity: 1;

  visibility: visible;

  pointer-events: auto;

  transform:
    translateY(0)
    scale(1);
}


/* DROPDOWN HEADER */

.user-dropdown-header {
  display: flex;

  align-items: center;

  gap: 12px;

  padding: 10px;
}


.user-dropdown-avatar {
  flex-shrink: 0;
}


.user-dropdown-header strong {
  display: block;

  color: var(--text);

  font-size: 14px;
}


.user-dropdown-business {
  margin-top: 3px;

  font-size: 11px;
}


.user-dropdown-email {
  margin-top: 2px;

  max-width: 180px;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  font-size: 10px;

  opacity: .8;
}


/* DROPDOWN DIVIDER */

.user-dropdown-divider {
  height: 1px;

  margin: 6px 4px;

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


/* DROPDOWN LINKS */

.user-dropdown-item {
  display: flex;

  align-items: center;

  gap: 11px;

  width: 100%;

  padding: 11px 12px;

  border-radius: 10px;

  color: #dfe5ff;

  text-decoration: none;

  font-size: 13px;

  font-weight: 600;

  transition:
    background .18s ease,
    color .18s ease,
    transform .18s ease;
}


.user-dropdown-item:hover {
  background:
    rgba(124, 92, 255, .10);

  color: #fff;

  transform:
    translateX(2px);
}


.user-dropdown-icon {
  width: 20px;

  display: flex;

  align-items: center;

  justify-content: center;

  color: var(--muted);

  font-size: 14px;
}


/* LOGOUT */

.user-dropdown-logout {
  color: #ff8da0;
}


.user-dropdown-logout
.user-dropdown-icon {
  color: var(--danger);
}


.user-dropdown-logout:hover {
  background:
    rgba(255, 102, 125, .10);

  color: #ff9bab;
}


/* =====================================================
   CONTENT
===================================================== */

.content {
  padding:
    24px 28px 42px;
}


.grid {
  display: grid;

  gap: 16px;
}


/* =====================================================
   DATE RANGE FILTER
===================================================== */

.date-range-card {
  margin-bottom: 16px;

  padding: 12px 14px;
}


.date-range-toolbar {
  display: flex;

  align-items: flex-end;

  justify-content: flex-start !important;

  gap: 10px;

  flex-wrap: wrap;

  margin-bottom: 0;
}


.date-range-selector {
  min-width: 190px;

  width: 190px;

  margin: 0;
}


.date-range-field {
  margin: 0;
}


.custom-date-fields {
  display: flex;

  align-items: flex-end;

  gap: 10px;

  flex-wrap: wrap;
}


.custom-date-fields.hidden {
  display: none;
}


.date-range-apply {
  flex: 0 0 auto;

  margin-left: 0 !important;

  margin-right: 0 !important;
}


.date-range-summary {
  padding-bottom: 9px;

  margin-left: 4px;
}


/* =====================================================
   KPI CARDS
===================================================== */

.kpis {
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
}


.kpi,
.card {
  border:
    1px solid var(--border);

  background:
    linear-gradient(
      145deg,
      rgba(16, 21, 39, .95),
      rgba(10, 13, 27, .94)
    );

  border-radius: 17px;

  box-shadow:
    var(--shadow);
}


.kpi {
  padding: 18px;

  position: relative;

  overflow: hidden;

  transition: .25s;
}


.kpi:hover {
  transform:
    translateY(-3px);

  border-color:
    rgba(124, 92, 255, .48);
}


.kpi:after {
  content: '';

  position: absolute;

  width: 80px;
  height: 80px;

  right: -25px;
  top: -25px;

  border-radius: 50%;

  background:
    var(--primary);

  filter:
    blur(35px);

  opacity: .12;
}


.kpi .label {
  color: var(--muted);

  font-size: 10px;

  font-weight: 800;

  text-transform: uppercase;

  letter-spacing: .8px;
}


.kpi .value {
  font-family: Orbitron;

  font-size: 24px;

  font-weight: 800;

  margin-top: 8px;
}


.kpi .hint {
  font-size: 10px;

  color: var(--cyan);

  margin-top: 7px;
}


/* =====================================================
   CARDS
===================================================== */

.card {
  padding: 18px;
}


.card h3 {
  font-family: Orbitron;

  font-size: 13px;

  margin:
    0 0 14px;
}


.split {
  grid-template-columns:
    1.45fr .9fr;
}


/* =====================================================
   TOOLBAR
===================================================== */

.toolbar {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 12px;

  margin-bottom: 14px;
}


/* =====================================================
   BUTTONS
===================================================== */

.btn {
  border: 0;

  border-radius: 10px;

  padding: 10px 14px;

  font-weight: 800;

  cursor: pointer;

  text-decoration: none;

  display: inline-flex;

  align-items: center;

  gap: 8px;

  transition: .2s;

  font-size: 12px;
}


.btn-primary {
  background:
    linear-gradient(
      135deg,
      var(--primary),
      #5c7cff
    );

  color: #fff;

  box-shadow:
    0 8px 24px
    rgba(124, 92, 255, .24);
}


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

  filter:
    brightness(1.08);
}


.btn-ghost {
  background: #151b31;

  color: #dfe5ff;

  border:
    1px solid var(--border);
}


.btn-danger {
  background:
    rgba(255, 102, 125, .12);

  color: #ff8da0;

  border:
    1px solid rgba(255, 102, 125, .2);
}


/* =====================================================
   TABLES
===================================================== */

.table-wrap {
  overflow: auto;

  border-radius: 13px;

  border:
    1px solid var(--border);
}


table {
  width: 100%;

  border-collapse: collapse;

  min-width: 760px;
}


th {
  padding: 11px 12px;

  text-align: left;

  background: #0d1222;

  color: #8e99b7;

  font-size: 9px;

  text-transform: uppercase;

  letter-spacing: .8px;
}


td {
  padding: 12px;

  border-top:
    1px solid var(--border);

  font-size: 12px;
}


tr:hover td {
  background:
    rgba(124, 92, 255, .025);
}


/* =====================================================
   BADGES
===================================================== */

.badge {
  display: inline-flex;

  padding: 5px 8px;

  border-radius: 999px;

  font-size: 9px;

  font-weight: 800;

  text-transform: uppercase;

  letter-spacing: .4px;

  background:
    rgba(124, 92, 255, .12);

  color: #b8aaff;
}


.badge.available,
.badge.active,
.badge.completed,
.badge.confirmed {
  background:
    rgba(53, 224, 161, .12);

  color:
    var(--success);
}


.badge.in_use,
.badge.live {
  background:
    rgba(34, 211, 238, .12);

  color:
    var(--cyan);
}


.badge.maintenance,
.badge.cancelled,
.badge.offline {
  background:
    rgba(255, 102, 125, .12);

  color:
    var(--danger);
}


.badge.trial {
  background:
    rgba(255, 190, 85, .12);

  color:
    var(--warning);
}


.badge.past_due,
.badge.suspended,
.badge.failed,
.badge.urgent {
  background:
    rgba(255, 102, 125, .12);

  color:
    var(--danger);
}


.badge.paused,
.badge.pending,
.badge.draft {
  background:
    rgba(255, 190, 85, .12);

  color:
    var(--warning);
}


.badge.cancelled,
.badge.archived,
.badge.closed {
  background:
    rgba(137, 147, 173, .12);

  color:
    var(--muted);
}


.badge.paid,
.badge.published,
.badge.resolved {
  background:
    rgba(53, 224, 161, .12);

  color:
    var(--success);
}


/* =====================================================
   GAMING FLOOR
===================================================== */

.floor-grid {
  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 14px;
}


.station {
  padding: 16px;

  border:
    1px solid var(--border);

  border-radius: 16px;

  background:
    linear-gradient(
      150deg,
      #12182c,
      #0a0e1d
    );

  position: relative;

  overflow: hidden;

  transition: .25s;
}


.station:hover {
  transform:
    translateY(-3px);

  border-color:
    rgba(34, 211, 238, .35);
}


.station .icon {
  font-size: 24px;

  color:
    var(--cyan);
}


.station h3 {
  font-family: Orbitron;

  font-size: 13px;

  margin:
    10px 0 4px;
}


.station .rate {
  color:
    var(--muted);

  font-size: 11px;
}


.station .glow {
  position: absolute;

  width: 70px;
  height: 70px;

  right: -25px;
  bottom: -25px;

  background:
    var(--primary);

  filter:
    blur(30px);

  opacity: .14;
}


/* =====================================================
   FORMS
===================================================== */

.form-grid {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 12px;
}


.field {
  display: grid;

  gap: 6px;
}


.field label {
  font-size: 9px;

  color:
    var(--muted);

  font-weight: 800;

  text-transform: uppercase;

  letter-spacing: .7px;
}


.input,
select,
textarea {
  width: 100%;

  padding: 11px 12px;

  border-radius: 10px;

  border:
    1px solid var(--border);

  background:
    #0c1121;

  color: #fff;

  outline: none;

  font:
    500 12px Inter;
}


.input:focus,
select:focus,
textarea:focus {
  border-color:
    var(--primary);

  box-shadow:
    0 0 0 3px
    rgba(124, 92, 255, .10);
}


/* =====================================================
   MODALS
===================================================== */

.modal {
  display: none;

  position: fixed;

  inset: 0;

  background:
    rgba(3, 5, 12, .74);

  z-index: 9999;

  align-items: center;

  justify-content: center;

  padding: 20px;
}


.modal.open {
  display: flex;
}


.modal-box {
  width:
    min(760px, 100%);

  max-height: 90vh;

  overflow: auto;

  background:
    #0f1426;

  border:
    1px solid var(--border);

  border-radius: 18px;

  padding: 20px;

  box-shadow:
    0 30px 90px
    rgba(0, 0, 0, .5);

  animation:
    pop .18s ease;
}


@keyframes pop {

  from {
    opacity: 0;

    transform:
      scale(.97)
      translateY(8px);
  }

  to {
    opacity: 1;

    transform: none;
  }

}


/* =====================================================
   EMPTY STATE
===================================================== */

.empty {
  padding: 35px;

  text-align: center;

  color:
    var(--muted);
}


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

.login {
  min-height: 100vh;

  display: grid;

  grid-template-columns:
    1.05fr .95fr;
}


.login-art {
  position: relative;

  padding: 48px;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  background:
    linear-gradient(
      180deg,
      rgba(5, 7, 18, .25),
      rgba(5, 7, 18, .92)
    ),
    radial-gradient(
      circle at 35% 25%,
      rgba(124, 92, 255, .35),
      transparent 33%
    ),
    #080b18;

  overflow: hidden;
}


.login-art:before {
  content: '◢';

  position: absolute;

  font-size: 520px;

  right: -90px;

  bottom: -180px;

  color:
    rgba(34, 211, 238, .025);

  font-family:
    Orbitron;

  transform:
    rotate(-15deg);
}


.hero h1 {
  font:
    800 44px/1.1 Orbitron;

  margin: 0;

  max-width: 680px;
}


.hero h1 span {
  background:
    linear-gradient(
      90deg,
      var(--primary),
      var(--cyan)
    );

  -webkit-background-clip:
    text;

  background-clip:
    text;

  color:
    transparent;
}


.hero p {
  color:
    var(--muted);

  max-width: 570px;

  line-height: 1.8;
}


.login-panel {
  display: grid;

  place-items: center;

  padding: 38px;
}


.login-box {
  width:
    min(430px, 100%);
}


.login-box h2 {
  font:
    800 24px Orbitron;
}


.login-box .input {
  padding: 14px;

  margin-top: 6px;
}


.login-box .btn {
  width: 100%;

  justify-content: center;

  padding: 14px;

  margin-top: 10px;
}


.notice {
  padding: 11px 13px;

  border-radius: 10px;

  background:
    rgba(255, 102, 125, .1);

  color:
    #ff93a4;

  margin-bottom: 12px;

  font-size: 12px;
}


/* =====================================================
   CHART / SPARK
===================================================== */

.spark {
  height: 120px;

  display: flex;

  align-items: end;

  gap: 7px;
}


.spark span {
  flex: 1;

  background:
    linear-gradient(
      var(--cyan),
      var(--primary)
    );

  border-radius:
    7px 7px 2px 2px;

  opacity: .72;

  animation:
    rise .5s ease both;
}


@keyframes rise {

  from {
    height: 0 !important;
  }

}


/* =====================================================
   RECOMMENDATIONS
===================================================== */

.recommendation {
  padding: 13px;

  border-radius: 12px;

  border:
    1px solid
    rgba(34, 211, 238, .18);

  background:
    rgba(34, 211, 238, .05);

  margin:
    8px 0;

  color:
    #dcecff;
}


/* =====================================================
   METRICS
===================================================== */

.metric-row {
  display: grid;

  grid-template-columns:
    repeat(5, 1fr);

  gap: 12px;
}


.metric {
  padding: 14px;

  border:
    1px solid var(--border);

  border-radius: 13px;

  background:
    #0d1222;
}


.metric b {
  display: block;

  font:
    700 18px Orbitron;

  margin-top: 5px;
}


.muted {
  color:
    var(--muted);
}


/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 1180px) {

  .kpis {
    grid-template-columns:
      repeat(2, 1fr);
  }


  .floor-grid {
    grid-template-columns:
      repeat(3, 1fr);
  }


  .form-grid {
    grid-template-columns:
      repeat(2, 1fr);
  }


  .metric-row {
    grid-template-columns:
      repeat(2, 1fr);
  }

}


@media (max-width: 820px) {

  .app {
    grid-template-columns: 1fr;
  }


  .sidebar {
    position: relative;

    height: auto;
  }


  .nav {
    grid-template-columns:
      repeat(2, 1fr);
  }


  .nav-label {
    grid-column:
      1 / -1;
  }


  .content {
    padding: 18px;
  }


  .split {
    grid-template-columns: 1fr;
  }


  .floor-grid {
    grid-template-columns:
      repeat(2, 1fr);
  }


  .login {
    grid-template-columns: 1fr;
  }


  .login-art {
    display: none;
  }


  .date-range-summary {
    width: 100%;

    margin-left: 0;

    padding-bottom: 0;
  }

}


@media (max-width: 700px) {

  .user-info {
    display: none;
  }


  .user-menu-arrow {
    display: none;
  }


  .user-dropdown {
    width: 240px;
  }

}


@media (max-width: 520px) {

  .kpis,
  .floor-grid,
  .form-grid,
  .metric-row {
    grid-template-columns: 1fr;
  }


  .topbar {
    padding:
      0 18px;
  }


  .date-range-selector {
    width: 100%;

    min-width: 100%;
  }


  .date-range-apply {
    width: auto;
  }

}

.account-success-notification {
  margin-bottom: 16px;

  animation: notificationSlideIn .3s ease;

  transition:
    opacity .3s ease,
    transform .3s ease;
}

.account-success-notification strong {
  color: var(--success);
  font-size: 12px;
}

.account-success-text {
  margin-top: 3px;
  font-size: 10px;
}

.account-success-notification.notification-hide {
  opacity: 0;
  transform: translateY(-8px);
}

@keyframes notificationSlideIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =========================================================
   ELITE APPS - TOPBAR SOFTWARE CREDIT
========================================================= */

.elite-apps-topbar {
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 7px 12px;

  border: 1px solid rgba(124, 92, 255, .24);
  border-radius: 13px;

  background:
    linear-gradient(
      135deg,
      rgba(124, 92, 255, .11),
      rgba(34, 211, 238, .055)
    );

  box-shadow:
    0 8px 30px rgba(0, 0, 0, .12),
    inset 0 1px 0 rgba(255, 255, 255, .025);

  transition:
    transform .2s ease,
    border-color .2s ease,
    box-shadow .2s ease;
}


.elite-apps-topbar:hover {
  transform: translateY(-1px);

  border-color:
    rgba(124, 92, 255, .45);

  box-shadow:
    0 10px 32px rgba(0, 0, 0, .16),
    0 0 22px rgba(124, 92, 255, .07);
}


/* Code icon */

.elite-apps-code {
  width: 30px;
  height: 30px;

  flex: 0 0 30px;

  display: grid;
  place-items: center;

  border-radius: 9px;

  background:
    linear-gradient(
      135deg,
      rgba(124, 92, 255, .22),
      rgba(34, 211, 238, .10)
    );

  color: var(--cyan);

  font-family: monospace;
  font-size: 11px;
  font-weight: 900;

  box-shadow:
    inset 0 0 0 1px rgba(124, 92, 255, .15);
}


/* Elite Apps */

.elite-apps-info {
  display: flex;
  flex-direction: column;

  min-width: max-content;

  line-height: 1.1;
}


.elite-apps-label {
  margin-bottom: 2px;

  color: var(--muted);

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

  letter-spacing: .7px;

  text-transform: uppercase;
}


.elite-apps-info strong {
  font-family: Orbitron, sans-serif;

  font-size: 10px;
  font-weight: 800;

  letter-spacing: .3px;

  background:
    linear-gradient(
      90deg,
      #ffffff,
      var(--cyan)
    );

  -webkit-background-clip: text;
  background-clip: text;

  color: transparent;
}


/* Divider */

.elite-apps-divider {
  width: 1px;
  height: 28px;

  margin: 0 2px;

  background:
    linear-gradient(
      to bottom,
      transparent,
      rgba(124, 92, 255, .35),
      transparent
    );
}


/* Phone */

.elite-apps-phone {
  display: flex;
  align-items: center;
  gap: 7px;

  min-width: max-content;

  color: #f4f6ff;

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

  line-height: 1.25;

  text-decoration: none;

  transition:
    color .2s ease,
    transform .2s ease;
}


.elite-apps-phone:hover {
  color: var(--cyan);
}


.elite-apps-phone-icon {
  width: 25px;
  height: 25px;

  display: grid;
  place-items: center;

  border-radius: 8px;

  background:
    rgba(53, 224, 161, .10);

  color: var(--success);

  font-size: 11px;

  box-shadow:
    inset 0 0 0 1px
    rgba(53, 224, 161, .14);
}


.elite-apps-phone small {
  display: block;

  margin-bottom: 1px;

  color: var(--muted);

  font-size: 6px;
  font-weight: 800;

  letter-spacing: .8px;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 900px) {

  .elite-apps-info,
  .elite-apps-divider {
    display: none;
  }

}


@media (max-width: 680px) {

  .elite-apps-phone span:last-child {
    display: none;
  }

  .elite-apps-topbar {
    padding: 6px;
    gap: 5px;
  }

  .elite-apps-code {
    width: 27px;
    height: 27px;
    flex-basis: 27px;
  }

  .elite-apps-phone-icon {
    width: 27px;
    height: 27px;
  }

}
/* ELITE APPS WEBSITE LINK */

.elite-apps-brand-link {
  position: relative;
  z-index: 2;

  display: flex;
  align-items: center;
  gap: 10px;

  color: inherit;
  text-decoration: none;

  cursor: pointer;

  transition:
    transform .2s ease,
    opacity .2s ease;
}

.elite-apps-brand-link:hover {
  transform: translateY(-1px);
}

.elite-apps-brand-link:hover .elite-apps-info strong {
  filter: brightness(1.2);
}

.elite-apps-brand-link:hover .elite-apps-code {
  border-color: rgba(34, 211, 238, .35);

  box-shadow:
    0 0 18px rgba(34, 211, 238, .12);
}