/**********************************************
************ N E W   H E A D E R **************
***********************************************/

/*=============== VARIABLES CSS ===============*/
:root {
  --header-height: 3rem;
  --app-bottom-nav-height: 76px;

  /*========== Colors ==========*/
  --hue: 174;
  --sat: 63%;
  --first-color: hsl(var(--hue), var(--sat), 40%);
  --first-color-alt: hsl(var(--hue), var(--sat), 36%);
  --title-color: hsl(var(--hue), 12%, 15%);
  --text-color: hsl(var(--hue), 8%, 35%);
  --body-color: hsl(var(--hue), 100%, 99%);
  --container-color: var(--surface-1);

  /*========== Font and typography ==========*/
  --h1-font-size: 1.5rem;
  --normal-font-size: .938rem;
  --tiny-font-size: .625rem;

}

@media screen and (min-width: 968px) {
  :root {
    --h1-font-size: 2.25rem;
    --normal-font-size: 1rem;
  }
}

/*=============== BASE ===============*/

body {
  margin: 4rem 0 0 0;
  font-size: 0.938rem;
  background-color: var(--app-bg);
  color: var(--text-primary);
}

img {
  max-width: 100%;
  height: auto;
}

/*=============== HEADER ===============*/
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: var(--header-bg);
  z-index: 100;
  transition: .4s;
}

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

.nav-container {
	padding: 0px 5% 0px 5%; 
}
.nav {
  height: 3.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav .navbar-brand {
  text-decoration: none;
  color: var(--text-primary);
}

.nav__img {
  width: 32px;
  border-radius: 50%;
}

.nav__logo {
  color: var(--text-primary);
  font-weight: 600;
  padding: 10px;
}

@media screen and (max-width: 767px) {
  .nav__menu {
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: var(--nav-bg);
    box-shadow: 0 -1px 12px hsla(var(--hue), var(--sat), 15%, 0.15);
    width: 100%;
    height: 3.5rem;
    padding: 0 1rem;
    display: grid;
    align-content: center;
    border-radius: 1.25rem 1.25rem 0 0;
    transition: .4s;
  }
  
  .nav-hidden {
  	display: none!important;
  	transition: 0.5s;
  }
}

.nav__list, 
.nav__link {
  display: flex;
}

.nav__link {
  flex-direction: column;
  align-items: center;
  row-gap: 4px;
  color: var(--text-secondary);
  font-weight: 600;
}

.nav__list {
	list-style: none;
  	margin-bottom: 0;
  	justify-content: space-around;
  	padding-left: 0;
}

.nav__name {
  	font-size: .625rem;
}

.nav__icon {
  font-size: 1.5rem;
}

.active-link {
  position: relative;
  color: var(--primary-hover);
  transition: .3s;
  text-transform: uppercase;
}

.nav__link:hover {
	color: var(--primary-hover);
}

/* Change background header */
/* .scroll-header {
  box-shadow: 0 1px 12px hsla(var(--hue), var(--sat), 15%, 0.15);
} */

/*=============== MEDIA QUERIES ===============*/
/* For small devices */
@media screen and (max-width: 320px) {
  .nav__name {
    display: none;
  }
}

/* For medium devices */
@media screen and (min-width: 576px) {
  .nav__list {
    justify-content: center;
    column-gap: 3rem;
  }
}

@media screen and (min-width: 767px) {
  .nav__img {
    display: none;
  }
  .nav__icon {
    display: none;
  }
  .nav__name {
    font-size: var(--normal-font-size);
  }
  
  .nav__link {
  	flex-direction: row;
  }
  
  .nav__link:hover {
    color: var(--first-color);
  }
  
  .nav__list {
  	padding-left: 2rem;
  }

}

/* For large devices */
@media screen and (min-width: 1024px) {
  .nav-container {
    margin-left: auto;
    margin-right: auto;
  }
}

.logout-icon, .login-icon {
	font-size: 1.5rem;
	line-height: 1.5;
}

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

.login-icon {
	color: var(--primary-hover);
}

#overlay{	
  position: fixed;
  top: 0;
  z-index: 100;
  width: 100%;
  height:100%;
  display: none;
  background: var(--overlay-bg);
}
.cv-spinner {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;  
}
.spinner {
  width: 40px;
  height: 40px;
  border: 4px var(--border-primary) solid;
  border-top: 4px var(--primary) solid;
  border-radius: 50%;
  animation: sp-anime 0.8s infinite linear;
}
@keyframes sp-anime {
  100% { 
    transform: rotate(360deg); 
  }
}
.is-hide{
  display:none;
}

.active-link i {
	color: var(--primary-hover);
}

/**********************************************
******** TEMP SMS AUTHENTICATED SHELL *********
***********************************************/

body {
	min-height: 100dvh;
	margin: 4.5rem 0 0;
	background: var(--page-background);
	color: var(--text-primary);
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

.header {
	height: 4.5rem;
	border-bottom: 1px solid var(--border-soft);
	background: var(--header-bg);
	box-shadow: var(--shadow-card);
	backdrop-filter: blur(18px);
}

.nav {
	height: 4.5rem;
}

.nav-container {
	width: 100%;
	padding: 0 18px;
}

.nav .navbar-brand {
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 0;
	font-size: 1.35rem;
	font-weight: 850;
	letter-spacing: -.035em;
	line-height: 1;
	white-space: nowrap;
}

.nav .navbar-brand span {
	letter-spacing: inherit;
}

.nav .navbar-brand .temp-brand-part {
	color: var(--text-primary);
}

.nav .navbar-brand .sms-brand-part {
	color: var(--primary);
}

.header-actions {
	position: static;
	top: auto;
	right: auto;
	display: flex !important;
	align-items: center;
	gap: 7px;
	margin: 0 0 0 auto;
	padding: 0;
	transform: none;
}

.header-actions li {
	display: flex;
	align-items: center;
}

.header-balance-chip {
	display: inline-flex;
	min-width: 112px;
	height: 42px;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 0 12px;
	border: 1px solid var(--border-primary);
	border-radius: 13px;
	background: var(--surface-glass);
	box-shadow: inset 0 1px 0 var(--border-soft);
	white-space: nowrap;
}

.header-balance-chip > i {
	color: var(--text-primary);
	font-size: 1.35rem;
}

.header-balance-chip .balance {
	position: static;
	padding: 0;
	color: var(--success);
	font-size: 1rem;
	font-weight: 600;
	text-shadow: none;
}

.header-balance-chip .balance::before {
	position: static;
	color: inherit;
	content: none;
	text-shadow: none;
}

.header-action-btn {
	display: inline-flex;
	width: 40px;
	height: 40px;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 1px solid var(--border-primary);
	border-radius: 13px;
	background: var(--surface-glass);
	box-shadow: none;
	text-decoration: none;
}

.header-action-btn:hover {
	border-color: var(--primary-border);
	background: var(--primary-soft);
	box-shadow: none;
	transform: none;
}

.header-action-btn img {
	width: 25px;
	height: 25px;
}

.header-channel-fallback {
	display: none;
	font-size: .68rem;
	font-weight: 800;
	letter-spacing: -.02em;
}

.header-action-btn.is-icon-fallback .header-channel-icon {
	display: none;
}

.header-action-btn.is-icon-fallback .header-channel-fallback {
	display: inline-flex;
}

.telegram-header-action .header-channel-fallback {
	color: #36aeea;
}

.whatsapp-header-action .header-channel-fallback {
	color: #39d167;
}

.header-action-btn > i {
	display: block;
	font-size: 1.55rem;
	line-height: 1;
}

.telegram-header-action > i {
	color: #36aeea;
}

.whatsapp-header-action > i {
	color: #39d167;
}

.telegram-header-action,
.whatsapp-header-action,
.logout-header-action {
	border-color: var(--border-primary);
	background: var(--surface-glass);
}

.logout-header-action .logout-icon,
.logout-icon {
	color: var(--primary-hover);
	font-size: 1.5rem;
}

.active-link,
.nav__link:hover,
.active-link i {
	color: var(--primary-hover);
}

.authenticated-shell + .main-app {
	min-height: calc(100dvh - 4.5rem);
	padding-bottom: calc(var(--app-bottom-nav-height) + env(safe-area-inset-bottom) + 20px);
}

.app-bottom-nav {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1000;
	height: calc(var(--app-bottom-nav-height) + env(safe-area-inset-bottom));
	padding: 0 10px env(safe-area-inset-bottom);
	border: 1px solid var(--border-soft);
	border-bottom: 0;
	border-radius: 24px 24px 0 0;
	background: var(--nav-bg);
	box-shadow: var(--shadow-nav);
	backdrop-filter: blur(20px);
	transform: translateY(0);
	opacity: 1;
	transition: transform .2s ease, opacity .2s ease;
}

.app-bottom-nav-list {
	display: grid;
	width: min(100%, 620px);
	height: var(--app-bottom-nav-height);
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: center;
	column-gap: 8px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.app-bottom-nav-list > li {
	display: flex;
	min-width: 0;
	justify-content: center;
}

.app-bottom-nav-link {
	display: flex;
	width: min(100%, 150px);
	min-height: 58px;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 4px;
	padding: 7px 8px;
	border: 1px solid transparent;
	border-radius: 13px;
	color: var(--text-secondary);
	font-size: .72rem;
	font-weight: 500;
	line-height: 1.1;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	transform: none;
}

.app-bottom-nav-icon {
	display: block;
	font-size: 1.55rem;
	line-height: 1;
	transform: none;
}

.app-bottom-nav-link:hover,
.app-bottom-nav-link:focus-visible,
.app-bottom-nav-link.active-link {
	border-color: var(--primary-border);
	background: var(--primary-soft);
	color: var(--primary-hover);
	outline: none;
	transform: none;
}

.app-bottom-nav-link.active-link .app-bottom-nav-icon,
.app-bottom-nav-link.active-link span {
	color: var(--primary-hover);
	font-size: inherit;
	transform: none;
}

.app-bottom-nav-link.active-link .app-bottom-nav-icon {
	font-size: 1.55rem;
}

body.keyboard-open .app-bottom-nav {
	transform: translateY(110%);
	opacity: 0;
	pointer-events: none;
}

body.keyboard-open .authenticated-shell + .main-app {
	padding-bottom: 20px;
}

@media screen and (max-width: 767px) {
	.nav__menu {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: calc(76px + env(safe-area-inset-bottom));
		padding: 0 10px env(safe-area-inset-bottom);
		border: 1px solid var(--border-soft);
		border-bottom: 0;
		border-radius: 24px 24px 0 0;
		background: var(--nav-bg);
		box-shadow: var(--shadow-nav);
		backdrop-filter: blur(20px);
		align-content: center;
		z-index: 120;
	}

	.nav__list {
		display: grid;
		height: 68px;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		align-items: center;
		column-gap: 6px;
	}

	.nav__item {
		display: flex;
		min-width: 0;
		justify-content: center;
	}

	.nav__link {
		display: flex;
		width: min(100%, 112px);
		min-height: 58px;
		align-items: center;
		justify-content: center;
		gap: 4px;
		padding: 7px 6px;
		border: 1px solid transparent;
		border-radius: 13px;
		color: var(--text-secondary);
		font-weight: 500;
		text-decoration: none;
		row-gap: 4px;
	}

	.nav__icon {
		font-size: 1.5rem;
	}

	.nav__name {
		display: block;
		max-width: 100%;
		overflow: hidden;
		font-size: .7rem;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.nav__link.active-link {
		border-color: var(--primary-border);
		background: var(--primary-soft);
		color: var(--primary-hover);
		text-transform: none;
	}

	.nav__item .active-link i,
	.nav__item .nav__link.active-link .nav__name {
		border-radius: 0;
		font-size: inherit;
		transform: none;
	}

	.nav__item .active-link i {
		font-size: 1.55rem;
	}

}

@media screen and (max-width: 576px) {
	.nav-container {
		padding: 0 12px;
	}

	.nav .navbar-brand {
		font-size: 1.08rem;
	}

	.header-actions {
		gap: 4px;
	}

	.header-balance-chip {
		min-width: 91px;
		height: 36px;
		gap: 5px;
		padding: 0 8px;
		border-radius: 11px;
	}

	.header-balance-chip > i {
		font-size: 1.1rem;
	}

	.header-balance-chip .balance {
		font-size: .88rem;
	}

	.header-action-btn {
		width: 34px;
		height: 34px;
		border-radius: 11px;
	}

	.header-action-btn img {
		width: 22px;
		height: 22px;
	}

	.logout-header-action .logout-icon {
		font-size: 1.3rem;
	}
}

@media screen and (max-width: 380px) {
	.nav-container {
		padding: 0 8px;
	}

	.nav .navbar-brand {
		font-size: .96rem;
	}

	.header-actions {
		gap: 3px;
	}

	.header-balance-chip {
		min-width: 79px;
		height: 33px;
		padding: 0 6px;
	}

	.header-balance-chip > i {
		display: none;
	}

	.header-balance-chip .balance {
		font-size: .81rem;
	}

	.header-action-btn {
		width: 31px;
		height: 31px;
	}

	.header-action-btn img {
		width: 20px;
		height: 20px;
	}
}