/* =========================================================
   CS Grăsuții România
   Premium Theme

   File: header_premium.css
   Version: v2 CLEAN

   Description:
   Header premium complet pentru tema RoundoDarko.
   Structură nouă: brand + nav + user area + mobile menu.
========================================================= */


/* =========================================================
   1. Header Background Line
========================================================= */

.cs-header-bgline{
	position:relative;
	width:100%;
	height:3px;
	overflow:hidden;
	background:
		linear-gradient(90deg,
			transparent 0%,
			rgba(57,255,20,.25) 18%,
			rgba(57,255,20,.95) 50%,
			rgba(57,255,20,.25) 82%,
			transparent 100%
		);
	box-shadow:
		0 0 18px rgba(57,255,20,.55),
		0 0 34px rgba(57,255,20,.18);
}

.cs-header-bgline::before{
	content:"";
	position:absolute;
	top:0;
	bottom:0;
	left:-35%;
	width:35%;
	background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);
	animation:csHeaderLineScan 3.8s ease-in-out infinite;
}


/* =========================================================
   2. Header Base
========================================================= */

#header.cs-premium-header,
.cs-premium-header{
	position:relative;
	z-index:50;
	padding:16px 18px 0;
	background:
		radial-gradient(circle at 10% 0%,rgba(57,255,20,.12),transparent 32%),
		radial-gradient(circle at 90% 0%,rgba(27,179,86,.08),transparent 30%),
		linear-gradient(180deg,rgba(9,17,24,.98),rgba(5,12,17,.96));
	border-bottom:1px solid rgba(57,255,20,.16);
	box-shadow:
		0 16px 45px rgba(0,0,0,.42),
		0 0 34px rgba(57,255,20,.06);
}

.cs-premium-header::before{
	content:"";
	position:absolute;
	inset:0;
	pointer-events:none;
	background:
		linear-gradient(120deg,transparent 0%,rgba(57,255,20,.045) 46%,transparent 72%);
	transform:translateX(-120%);
	animation:csHeaderShine 6s ease-in-out infinite;
}

.cs-header-panel{
	position:relative;
	max-width:1760px;
	margin:0 auto;
	background:
		linear-gradient(180deg,rgba(17,27,36,.94),rgba(8,16,22,.92));
	border:1px solid rgba(255,255,255,.075);
	border-radius:22px;
	box-shadow:
		0 18px 45px rgba(0,0,0,.34),
		inset 0 1px 0 rgba(255,255,255,.055),
		0 0 28px rgba(57,255,20,.055);
	backdrop-filter:blur(12px);
	overflow:visible;
}

.cs-header-panel::after{
	content:"";
	position:absolute;
	left:18px;
	right:18px;
	bottom:-1px;
	height:1px;
	background:linear-gradient(90deg,transparent,rgba(57,255,20,.48),transparent);
	pointer-events:none;
}

.cs-header-inner{
	position:relative;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:18px;
	min-height:78px;
	padding:13px 16px;
}


/* =========================================================
   3. Brand / Logo
========================================================= */

.cs-header-brand{
	flex:0 0 auto;
	min-width:0;
}

.cs-header-logo{
	position:relative;
	display:flex;
	align-items:center;
	gap:12px;
	text-decoration:none !important;
	color:#f4fff5 !important;
	white-space:nowrap;
}

.cs-header-logo-icon{
	position:relative;
	display:flex;
	align-items:center;
	justify-content:center;
	width:52px;
	height:52px;
	border-radius:17px;
	background:
		radial-gradient(circle at 35% 25%,rgba(255,255,255,.22),transparent 28%),
		linear-gradient(145deg,rgba(57,255,20,.28),rgba(13,90,43,.18));
	border:1px solid rgba(57,255,20,.42);
	box-shadow:
		0 0 18px rgba(57,255,20,.18),
		inset 0 1px 0 rgba(255,255,255,.10);
	overflow:hidden;
}

.cs-header-logo-icon::before{
	content:"";
	position:absolute;
	inset:-35%;
	background:conic-gradient(from 0deg,transparent,rgba(57,255,20,.34),transparent,rgba(255,255,255,.16),transparent);
	animation:csHeaderLogoSpin 8s linear infinite;
	opacity:.65;
}

.cs-header-logo-icon i{
	position:relative;
	z-index:1;
	font-size:21px;
	color:#39ff14;
	text-shadow:0 0 16px rgba(57,255,20,.55);
}

.cs-header-logo-text{
	display:flex;
	flex-direction:column;
	line-height:1.02;
}

.cs-header-logo-text strong{
	display:block;
	font-size:20px;
	letter-spacing:.2px;
	color:#fff;
	text-shadow:0 0 18px rgba(57,255,20,.16);
}

.cs-header-logo-text small{
	display:block;
	margin-top:5px;
	font-size:12px;
	font-weight:800;
	letter-spacing:2.2px;
	text-transform:uppercase;
	color:#39ff14;
	text-shadow:0 0 14px rgba(57,255,20,.35);
}

.cs-header-logo:hover .cs-header-logo-icon{
	border-color:rgba(57,255,20,.72);
	box-shadow:
		0 0 24px rgba(57,255,20,.30),
		inset 0 1px 0 rgba(255,255,255,.13);
	transform:translateY(-1px);
}

.cs-header-logo:hover .cs-header-logo-text strong{
	color:#f7fff5;
}


/* =========================================================
   4. Desktop Navigation
========================================================= */

.cs-header-nav{
	flex:1 1 auto;
	display:flex;
	justify-content:center;
	min-width:0;
}

.cs-header-nav ul{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:7px;
	margin:0;
	padding:0;
	list-style:none;
}

.cs-header-nav li{
	margin:0;
	padding:0;
}

.cs-header-nav a{
	position:relative;
	display:flex;
	align-items:center;
	justify-content:center;
	gap:8px;
	min-height:42px;
	padding:0 13px;
	border-radius:999px;
	color:rgba(232,242,236,.82) !important;
	font-size:13px;
	font-weight:800;
	text-decoration:none !important;
	border:1px solid transparent;
	background:rgba(255,255,255,.025);
	overflow:hidden;
	transition:
		color .18s ease,
		background .18s ease,
		border-color .18s ease,
		box-shadow .18s ease,
		transform .18s ease;
}

.cs-header-nav a::before{
	content:"";
	position:absolute;
	inset:0;
	background:linear-gradient(120deg,transparent,rgba(57,255,20,.13),transparent);
	transform:translateX(-130%);
	transition:transform .42s ease;
	pointer-events:none;
}

.cs-header-nav a i{
	position:relative;
	z-index:1;
	font-size:13px;
	color:rgba(57,255,20,.78);
	text-shadow:0 0 12px rgba(57,255,20,.24);
}

.cs-header-nav a span{
	position:relative;
	z-index:1;
}

.cs-header-nav a:hover{
	color:#fff !important;
	background:rgba(57,255,20,.075);
	border-color:rgba(57,255,20,.28);
	box-shadow:0 0 18px rgba(57,255,20,.09);
	transform:translateY(-1px);
}

.cs-header-nav a:hover::before{
	transform:translateX(130%);
}

.cs-header-nav-highlight a{
	background:
		linear-gradient(180deg,rgba(57,255,20,.18),rgba(23,118,57,.11)) !important;
	border-color:rgba(57,255,20,.34) !important;
	color:#f7fff5 !important;
	box-shadow:
		0 0 18px rgba(57,255,20,.10),
		inset 0 1px 0 rgba(255,255,255,.08);
}


/* =========================================================
   5. User Area Base
========================================================= */

.cs-header-user{
	flex:0 0 auto;
	display:flex;
	align-items:center;
	justify-content:flex-end;
	min-width:0;
}

.cs-header-member-actions,
.cs-header-guest-actions{
	display:flex;
	align-items:center;
	justify-content:flex-end;
	gap:9px;
	min-width:0;
}


/* =========================================================
   6. Guest Buttons
========================================================= */

.cs-header-auth-btn{
	position:relative;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:8px;
	min-height:42px;
	padding:0 14px;
	border-radius:999px;
	font-size:13px;
	font-weight:900;
	text-decoration:none !important;
	white-space:nowrap;
	overflow:hidden;
	transition:
		transform .18s ease,
		box-shadow .18s ease,
		border-color .18s ease,
		background .18s ease,
		color .18s ease;
}

.cs-header-auth-btn::before{
	content:"";
	position:absolute;
	inset:0;
	background:linear-gradient(120deg,transparent,rgba(255,255,255,.16),transparent);
	transform:translateX(-130%);
	transition:transform .42s ease;
	pointer-events:none;
}

.cs-header-auth-btn:hover::before{
	transform:translateX(130%);
}

.cs-header-auth-btn i,
.cs-header-auth-btn span{
	position:relative;
	z-index:1;
}

.cs-header-login-btn{
	color:#eaffea !important;
	background:rgba(255,255,255,.045);
	border:1px solid rgba(255,255,255,.10);
}

.cs-header-login-btn i{
	color:#39ff14;
	text-shadow:0 0 12px rgba(57,255,20,.30);
}

.cs-header-register-btn{
	color:#041007 !important;
	background:linear-gradient(180deg,#54ff35,#25c949);
	border:1px solid rgba(124,255,101,.74);
	box-shadow:
		0 0 18px rgba(57,255,20,.22),
		inset 0 1px 0 rgba(255,255,255,.35);
}

.cs-header-auth-btn:hover{
	transform:translateY(-1px);
}

.cs-header-login-btn:hover{
	color:#fff !important;
	background:rgba(57,255,20,.09);
	border-color:rgba(57,255,20,.32);
	box-shadow:0 0 18px rgba(57,255,20,.12);
}

.cs-header-register-btn:hover{
	box-shadow:
		0 0 26px rgba(57,255,20,.34),
		inset 0 1px 0 rgba(255,255,255,.42);
}


/* =========================================================
   7. Member Buttons
========================================================= */

.cs-header-pm-btn{
	position:relative;
	display:flex;
	align-items:center;
	justify-content:center;
	width:42px;
	height:42px;
	border-radius:15px;
	color:#eaffea !important;
	text-decoration:none !important;
	background:rgba(255,255,255,.045);
	border:1px solid rgba(255,255,255,.10);
	box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
	transition:
		transform .18s ease,
		background .18s ease,
		border-color .18s ease,
		box-shadow .18s ease;
}

.cs-header-pm-btn i{
	font-size:15px;
	color:#39ff14;
	text-shadow:0 0 14px rgba(57,255,20,.32);
}

.cs-header-pm-count{
	position:absolute;
	top:-7px;
	right:-7px;
	display:flex;
	align-items:center;
	justify-content:center;
	min-width:20px;
	height:20px;
	padding:0 6px;
	border-radius:999px;
	font-size:11px;
	font-weight:900;
	color:#061108;
	background:linear-gradient(180deg,#54ff35,#25c949);
	border:1px solid rgba(255,255,255,.30);
	box-shadow:0 0 16px rgba(57,255,20,.35);
}

.cs-header-pm-btn:hover{
	transform:translateY(-1px);
	background:rgba(57,255,20,.09);
	border-color:rgba(57,255,20,.34);
	box-shadow:0 0 20px rgba(57,255,20,.13);
}

.cs-header-user-btn{
	position:relative;
	display:flex;
	align-items:center;
	gap:10px;
	min-height:46px;
	padding:5px 10px 5px 6px;
	border-radius:999px;
	color:#fff !important;
	text-decoration:none !important;
	background:
		linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.032));
	border:1px solid rgba(255,255,255,.10);
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,.06),
		0 0 18px rgba(57,255,20,.04);
	transition:
		transform .18s ease,
		background .18s ease,
		border-color .18s ease,
		box-shadow .18s ease;
}

.cs-header-avatar-wrap{
	position:relative;
	display:flex;
	align-items:center;
	justify-content:center;
	width:36px;
	height:36px;
	border-radius:50%;
	padding:2px;
	background:linear-gradient(145deg,rgba(57,255,20,.85),rgba(10,80,39,.35));
	box-shadow:0 0 16px rgba(57,255,20,.18);
}

.cs-header-avatar{
	display:block;
	width:32px;
	height:32px;
	border-radius:50%;
	object-fit:cover;
	background:#071016;
	border:1px solid rgba(0,0,0,.55);
}

.cs-header-user-meta{
	display:flex;
	flex-direction:column;
	line-height:1.05;
	min-width:0;
	max-width:135px;
}

.cs-header-user-meta strong{
	display:block;
	max-width:135px;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
	font-size:13px;
	font-weight:900;
	color:#fff;
}

.cs-header-user-meta small{
	display:block;
	margin-top:4px;
	font-size:10px;
	font-weight:800;
	text-transform:uppercase;
	letter-spacing:.9px;
	color:#39ff14;
	opacity:.88;
}

.cs-header-user-btn > i{
	font-size:11px;
	color:rgba(57,255,20,.82);
	transition:transform .18s ease;
}

.cs-header-user-btn:hover{
	transform:translateY(-1px);
	background:rgba(57,255,20,.075);
	border-color:rgba(57,255,20,.30);
	box-shadow:0 0 22px rgba(57,255,20,.13);
}

.cs-header-user-btn:hover > i{
	transform:translateY(1px);
}


/* =========================================================
   8. Header Popup Menu
========================================================= */

.cs-header-popup-menu,
#dropmenu_popup.cs-header-popup-menu{
	min-width:230px;
	padding:8px;
	border-radius:18px;
	background:
		linear-gradient(180deg,rgba(17,27,36,.98),rgba(7,14,20,.98)) !important;
	border:1px solid rgba(57,255,20,.20) !important;
	box-shadow:
		0 20px 45px rgba(0,0,0,.45),
		0 0 26px rgba(57,255,20,.10),
		inset 0 1px 0 rgba(255,255,255,.055) !important;
	backdrop-filter:blur(12px);
	overflow:hidden;
}

.cs-header-popup-menu .popup_item_container{
	margin:0;
	padding:0;
	border:0 !important;
	background:transparent !important;
}

.cs-header-popup-menu .popup_item{
	display:flex !important;
	align-items:center;
	gap:10px;
	min-height:39px;
	padding:0 11px !important;
	border-radius:12px;
	color:rgba(236,247,240,.86) !important;
	font-size:13px;
	font-weight:800;
	text-decoration:none !important;
	background:transparent !important;
	border:1px solid transparent;
	transition:
		color .18s ease,
		background .18s ease,
		border-color .18s ease,
		transform .18s ease;
}

.cs-header-popup-menu .popup_item i{
	width:17px;
	text-align:center;
	color:#39ff14;
	text-shadow:0 0 12px rgba(57,255,20,.28);
}

.cs-header-popup-menu .popup_item span{
	display:inline-flex;
	align-items:center;
	gap:6px;
}

.cs-header-popup-menu .popup_item small{
	margin-left:auto;
	font-size:11px;
	font-weight:800;
	color:rgba(190,202,196,.76);
}

.cs-header-popup-menu .popup_item:hover{
	color:#fff !important;
	background:rgba(57,255,20,.08) !important;
	border-color:rgba(57,255,20,.24);
	transform:translateX(2px);
}

.cs-header-popup-menu .admincp i,
.cs-header-popup-menu .modcp i{
	color:#77ff5d;
}

.cs-header-popup-danger{
	color:#ffdcdc !important;
}

.cs-header-popup-danger i{
	color:#ff6b6b !important;
	text-shadow:0 0 12px rgba(255,107,107,.25) !important;
}

.cs-header-popup-danger:hover{
	background:rgba(255,107,107,.10) !important;
	border-color:rgba(255,107,107,.24) !important;
}


/* =========================================================
   9. Quick Search
========================================================= */

.cs-header-quicksearch{
	margin:0;
	padding:0;
}

.cs-header-search-box,
#search.cs-header-search-box{
	display:flex;
	align-items:center;
	gap:8px;
	margin:0;
	padding:0;
	border:0;
	background:transparent;
}

.cs-header-search-input-wrap{
	position:relative;
	display:flex;
	align-items:center;
	min-width:240px;
	height:40px;
	border-radius:999px;
	background:rgba(255,255,255,.045);
	border:1px solid rgba(255,255,255,.09);
	overflow:hidden;
}

.cs-header-search-input-wrap i{
	position:absolute;
	left:13px;
	top:50%;
	transform:translateY(-50%);
	font-size:13px;
	color:#39ff14;
	text-shadow:0 0 12px rgba(57,255,20,.30);
	pointer-events:none;
}

.cs-header-search-input{
	width:100%;
	height:40px;
	padding:0 13px 0 36px !important;
	border:0 !important;
	outline:0 !important;
	background:transparent !important;
	color:#fff !important;
	font-size:13px;
	font-weight:700;
	box-shadow:none !important;
}

.cs-header-search-input::placeholder{
	color:rgba(220,230,224,.50);
}

.cs-header-search-submit{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	height:40px;
	padding:0 14px !important;
	border-radius:999px !important;
	color:#061108 !important;
	font-size:13px;
	font-weight:900;
	cursor:pointer;
	border:1px solid rgba(124,255,101,.65) !important;
	background:linear-gradient(180deg,#54ff35,#25c949) !important;
	box-shadow:
		0 0 16px rgba(57,255,20,.20),
		inset 0 1px 0 rgba(255,255,255,.32) !important;
}

.cs-header-search-submit:hover{
	box-shadow:
		0 0 24px rgba(57,255,20,.32),
		inset 0 1px 0 rgba(255,255,255,.38) !important;
}


/* =========================================================
   10. Login Modal Fields
========================================================= */

.cs-header-login-modal-row{
	padding:7px 10px !important;
	border:0 !important;
	background:transparent !important;
	text-align:center;
}

.cs-header-login-field{
	position:relative;
	display:flex;
	align-items:center;
	width:100%;
	min-height:43px;
	border-radius:14px;
	background:rgba(255,255,255,.045);
	border:1px solid rgba(255,255,255,.09);
	overflow:hidden;
}

.cs-header-login-icon{
	position:absolute;
	left:13px;
	top:50%;
	transform:translateY(-50%);
	display:flex;
	align-items:center;
	justify-content:center;
	width:18px;
	color:#39ff14;
	text-shadow:0 0 12px rgba(57,255,20,.30);
	pointer-events:none;
}

.cs-header-login-input{
	width:100%;
	height:43px;
	padding:0 14px 0 42px !important;
	border:0 !important;
	outline:0 !important;
	background:transparent !important;
	color:#fff !important;
	font-weight:700;
	box-shadow:none !important;
}

.cs-header-login-input::placeholder{
	color:rgba(220,230,224,.52);
}

.cs-header-login-remember{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:8px;
	color:rgba(230,240,234,.78);
	font-size:12px;
	font-weight:700;
	cursor:pointer;
}

.cs-header-login-remember input{
	margin:0;
}

.cs-header-login-submit{
	width:100%;
	min-height:42px;
	border-radius:999px !important;
	border:1px solid rgba(124,255,101,.65) !important;
	background:linear-gradient(180deg,#54ff35,#25c949) !important;
	color:#061108 !important;
	font-weight:900 !important;
	cursor:pointer;
	box-shadow:
		0 0 18px rgba(57,255,20,.22),
		inset 0 1px 0 rgba(255,255,255,.34) !important;
}

.cs-header-login-submit:hover{
	box-shadow:
		0 0 26px rgba(57,255,20,.34),
		inset 0 1px 0 rgba(255,255,255,.42) !important;
}

.cs-header-lost-pass{
	text-align:center;
}

.cs-header-lost-pass a{
	color:rgba(230,240,234,.72) !important;
	font-size:12px;
	font-weight:800;
	text-decoration:none !important;
}

.cs-header-lost-pass a:hover{
	color:#39ff14 !important;
}

.cs-header-login-lockout{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:9px;
	padding:12px 14px;
	border-radius:14px;
	color:#ffdcdc;
	font-size:13px;
	font-weight:800;
	background:rgba(255,107,107,.08);
	border:1px solid rgba(255,107,107,.22);
}

.cs-header-login-lockout i{
	color:#ff6b6b;
	text-shadow:0 0 12px rgba(255,107,107,.28);
}


/* =========================================================
   11. Mobile Menu
========================================================= */

.cs-mobile-menu-toggle{
	display:none;
	align-items:center;
	justify-content:center;
	gap:8px;
	min-height:42px;
	padding:0 13px;
	border-radius:999px;
	color:#f7fff5;
	font-size:13px;
	font-weight:900;
	cursor:pointer;
	background:rgba(255,255,255,.045);
	border:1px solid rgba(255,255,255,.10);
	box-shadow:inset 0 1px 0 rgba(255,255,255,.055);
}

.cs-mobile-menu-toggle i{
	color:#39ff14;
	text-shadow:0 0 12px rgba(57,255,20,.30);
}

.cs-mobile-menu-toggle:hover{
	background:rgba(57,255,20,.09);
	border-color:rgba(57,255,20,.30);
}

.cs-mobile-menu{
	display:none;
	padding:0 12px 13px;
}

.cs-mobile-menu a{
	display:flex;
	align-items:center;
	gap:10px;
	min-height:42px;
	padding:0 12px;
	margin-top:7px;
	border-radius:14px;
	color:rgba(238,247,241,.88) !important;
	font-size:13px;
	font-weight:850;
	text-decoration:none !important;
	background:rgba(255,255,255,.04);
	border:1px solid rgba(255,255,255,.075);
}

.cs-mobile-menu a i{
	color:#39ff14;
	text-shadow:0 0 12px rgba(57,255,20,.26);
}

.cs-mobile-menu a:hover{
	color:#fff !important;
	background:rgba(57,255,20,.08);
	border-color:rgba(57,255,20,.24);
}


/* =========================================================
   12. Navigation / Breadcrumb Polish
========================================================= */

.navigation{
	position:relative;
	margin:14px 0;
	padding:11px 14px;
	border-radius:16px;
	background:
		linear-gradient(180deg,rgba(16,25,34,.84),rgba(8,16,22,.78));
	border:1px solid rgba(255,255,255,.075);
	box-shadow:
		0 8px 22px rgba(0,0,0,.20),
		inset 0 1px 0 rgba(255,255,255,.045);
	overflow:hidden;
}

.navigation::before{
	content:"";
	position:absolute;
	left:0;
	top:0;
	bottom:0;
	width:3px;
	background:linear-gradient(180deg,rgba(57,255,20,.15),rgba(57,255,20,.85),rgba(57,255,20,.15));
	box-shadow:0 0 16px rgba(57,255,20,.34);
}

.navigation,
.navigation a{
	color:rgba(213,224,218,.72);
}

.navigation a{
	font-weight:800;
	text-decoration:none;
}

.navigation a:hover{
	color:#39ff14;
}


/* =========================================================
   13. Old Header Compatibility Cleanup
========================================================= */

#header .float_left,
#header .float_right{
	float:none;
}

#header .title-img,
#header .top_links,
#header .menu.top_links,
#header .mobile_header,
#header #guest_info_header,
#header #member_info_header{
	display:none !important;
}

#panel{
	background:transparent;
	border:0;
	border-radius:0;
	box-shadow:none;
}

#panel .upper,
#panel .lower{
	background:transparent;
	border:0;
	padding:0;
}

#panel a{
	text-decoration:none;
}


/* =========================================================
   14. Responsive
========================================================= */

@media (max-width:1180px){

	.cs-header-inner{
		gap:12px;
	}

	.cs-header-nav a{
		padding:0 10px;
		font-size:12px;
	}

	.cs-header-logo-text strong{
		font-size:18px;
	}

	.cs-header-user-meta{
		display:none;
	}

	.cs-header-user-btn{
		padding-right:8px;
	}

}

@media (max-width:980px){

	.cs-header-nav{
		display:none;
	}

	.cs-mobile-menu-toggle{
		display:inline-flex;
	}

	.cs-header-inner{
		min-height:70px;
	}

	.cs-header-user{
		margin-left:auto;
	}

}

@media (max-width:768px){

	#header.cs-premium-header,
	.cs-premium-header{
		padding:12px 10px 0;
	}

	.cs-header-panel{
		border-radius:18px;
	}

	.cs-header-inner{
		min-height:auto;
		padding:11px;
		gap:10px;
	}

	.cs-header-logo-icon{
		width:46px;
		height:46px;
		border-radius:15px;
	}

	.cs-header-logo-icon i{
		font-size:18px;
	}

	.cs-header-logo-text strong{
		font-size:16px;
	}

	.cs-header-logo-text small{
		font-size:10px;
		letter-spacing:1.6px;
	}

	.cs-header-member-actions,
	.cs-header-guest-actions{
		gap:7px;
	}

	.cs-header-auth-btn{
		min-height:39px;
		padding:0 11px;
		font-size:12px;
	}

	.cs-header-pm-btn{
		width:39px;
		height:39px;
		border-radius:14px;
	}

	.cs-header-user-btn{
		min-height:40px;
		padding:4px 8px 4px 5px;
	}

	.cs-header-avatar-wrap{
		width:32px;
		height:32px;
	}

	.cs-header-avatar{
		width:28px;
		height:28px;
	}

	.cs-mobile-menu{
		padding:0 10px 11px;
	}

	.navigation{
		font-size:12px;
		line-height:1.5;
		margin:11px 0;
		padding:10px 12px;
	}

}

@media (max-width:560px){

	.cs-header-inner{
		flex-wrap:wrap;
	}

	.cs-header-brand{
		flex:1 1 auto;
	}

	.cs-header-logo-text small{
		display:none;
	}

	.cs-header-user{
		order:3;
		flex:1 1 100%;
		justify-content:space-between;
		width:100%;
	}

	.cs-header-guest-actions,
	.cs-header-member-actions{
		width:100%;
		justify-content:space-between;
	}

	.cs-header-auth-btn{
		flex:1 1 0;
	}

	.cs-header-user-btn{
		flex:1 1 auto;
		justify-content:center;
	}

	.cs-header-user-meta{
		display:flex;
		max-width:160px;
	}

	.cs-header-user-meta strong{
		max-width:160px;
	}

	.cs-mobile-menu-toggle{
		order:2;
	}

}

@media (max-width:390px){

	.cs-header-logo-text strong{
		font-size:14px;
	}

	.cs-header-logo-icon{
		width:42px;
		height:42px;
	}

	.cs-header-user-meta{
		display:none;
	}

	.cs-header-auth-btn span{
		font-size:11px;
	}

	.cs-mobile-menu-toggle span{
		display:none;
	}

}


/* =========================================================
   15. Animations
========================================================= */

@keyframes csHeaderLineScan{
	0%{
		left:-35%;
		opacity:0;
	}
	18%{
		opacity:1;
	}
	52%{
		left:100%;
		opacity:1;
	}
	100%{
		left:100%;
		opacity:0;
	}
}

@keyframes csHeaderShine{
	0%{
		transform:translateX(-120%);
		opacity:0;
	}
	18%{
		opacity:.7;
	}
	48%{
		transform:translateX(120%);
		opacity:.7;
	}
	100%{
		transform:translateX(120%);
		opacity:0;
	}
}

@keyframes csHeaderLogoSpin{
	from{
		transform:rotate(0deg);
	}
	to{
		transform:rotate(360deg);
	}
}

/* =========================================================
   16. Overflow Fix
   Elimină bara orizontală produsă de animațiile headerului
========================================================= */

html,
body{
	overflow-x:hidden;
}

#container,
#header,
.cs-premium-header,
.cs-header-panel{
	max-width:100%;
	box-sizing:border-box;
}

.cs-premium-header,
.cs-header-bgline{
	overflow-x:clip;
}

@supports not (overflow:clip){
	.cs-premium-header,
	.cs-header-bgline{
		overflow-x:hidden;
	}
}

.cs-premium-header::before,
.cs-header-bgline::before{
	pointer-events:none;
}