/* default login css */

/*intro css */
#intro_top { width:100%; z-index:1; position:relative; height:auto; padding:80px 0; background:#121212 url('images/haneen1.jpg'); background-repeat:no-repeat; background-size:auto auto; background-position:center 50px; background-attachment:fixed; animation:intro_space_drift 42s ease-in-out infinite alternate; overflow:hidden; }
#intro_top::after { content:""; position:absolute; left:0; right:0; bottom:0; height:120px; background:linear-gradient(180deg, rgba(18,18,18,0), #212121 82%, #212121); pointer-events:none; z-index:1; }
#intro_top > * { position:relative; z-index:2; }
#login_wrap { width:100%; height:100%; }
#login_all { width:800px; max-width:94%; border-radius:20px; display:block; margin:0 auto; color:#fff; text-align:center; }
.intro_social_container { width:100%; height:auto; text-align:center; padding-top:20px; }
.intro_social_title { color:rgba(255,255,255,.82); font-size:14px; font-weight:700; line-height:1.4; margin:0 0 8px; }
.intro_social_btn { display:inline-block; width:40px; height:40px; margin:0 3px; border-radius:50%; }
.login_not_member { text-align:center; padding-top:5px; }
#login_wrap .intro_login_btn.ok_btn { position:relative; overflow:hidden; background:#c85f84 !important; color:#fff !important; }
#login_wrap .intro_login_btn.ok_btn::after { content:""; position:absolute; top:-35%; bottom:-35%; width:42px; right:-70px; background:linear-gradient(90deg, transparent, rgba(255,255,255,.42), transparent); transform:skewX(-18deg); animation:intro_btn_sheen 4.8s ease-in-out infinite; pointer-events:none; }
#login_wrap .login_register_link { position:relative; display:inline; overflow:hidden; border-radius:999px; color:#c85f84 !important; font-weight:700; line-height:inherit; vertical-align:baseline; text-shadow:0 0 14px rgba(200,95,132,.34); }
#login_wrap .login_register_link::after { content:""; position:absolute; top:-35%; bottom:-35%; width:34px; right:-58px; background:linear-gradient(90deg, transparent, rgba(255,255,255,.38), transparent); transform:skewX(-18deg); animation:intro_btn_sheen 5.4s ease-in-out infinite; pointer-events:none; }
#login_wrap .login_text { animation:intro_text_reveal .85s ease-out both; }
#login_wrap .mobile_title_break { display:none; }

@keyframes intro_space_drift {
	0% { background-position:center 50px; }
	100% { background-position:center 20px; }
}
@keyframes intro_btn_sheen {
	0%, 42% { right:-70px; opacity:0; }
	52% { opacity:1; }
	72%, 100% { right:calc(100% + 70px); opacity:0; }
}
@keyframes intro_text_reveal {
	0% { opacity:0; transform:translateY(12px); }
	100% { opacity:1; transform:translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
	#intro_top,
	#login_wrap .intro_login_btn.ok_btn::after,
	#login_wrap .login_register_link::after,
	#login_wrap .login_text { animation:none; }
}

/* active_user intro  */
#intro_section_user { padding:72px 0; }
.active_user { height:110px; text-align:center; float:left; overflow:hidden; }
#last_active { width: 100%; height:110px; margin:0 auto; }
.active_avatar { width:110px; height:110px; border-radius:50%; }
#last_active .left-arrow,
#last_active .right-arrow { width: 0; height: 0; border-top: 10px solid transparent;  border-bottom: 10px solid transparent;  margin-top: 5px; cursor: pointer; margin-top:40px; }
#last_active .left-arrow {  float: left; border-right: 10px solid #ccc; display:none;}
#last_active .left-arrow:hover { border-right: 10px solid #000; }
#last_active .right-arrow { float: right;  border-left: 10px solid #ccc; display:none; }
#last_active .right-arrow:hover { border-left: 10px solid #000; }
#last_active .last-clip {  margin: 0 20px; overflow: hidden; position: relative; }
#last_active .last_10 { height: 110px; width: 10000%;  overflow: hidden;  position: relative; }

/* section css */
.section { width:100%; height:auto; margin:0 auto; }
.section_content { width:100%; max-width:1100px; margin:0 auto; }
.section_inside { margin:0 auto; }

@media screen and (max-width:1120px){
	.section_inside { width:96%; }
}
@media screen and (min-width:1121px){
	#intro_top { background-attachment: fixed; }
}
@media screen and (min-width:769px){
	#intro_top { min-height:78vh; }
}
@media screen and (max-width:1100px){
	#intro_top { background-size:auto 100%; background-position:center 0px; padding:80px 0; }
}
@media screen and (max-width:768px){
	#intro_top { display:flex !important; align-items:center; justify-content:center; background-image:url('images/haneen3.jpg'); background-size:cover; background-position:center center; animation-name:intro_space_drift_mobile;  }
	#intro_top > .bcell_mid { display:block; width:100%; }
	#login_all { width:calc(100% - 24px); margin-left:auto !important; margin-right:auto !important; }
}
@keyframes intro_space_drift_mobile {
	0% { background-position:center center; }
	100% { background-position:center 46%; }
}

/* haneen seo content css */
#login_wrap {
	--bg: #212121;
	--bg-soft: #252525;
	--panel: #2b2b2b;
	--panel-strong: #303030;
	--line: #3a3a3a;
	--text: #f4f1eb;
	--muted: #c7c0b6;
	--soft: #9f968b;
	--accent: #cf567c;
	--accent-soft: #ffcadc;
	--accent-glow: rgba(207, 86, 124, .22);
	--accent-strong: #ff8db3;
	overflow-x: hidden;
}

#login_wrap {
	background:
		radial-gradient(circle at top, rgba(207, 86, 124, .075), transparent 32rem),
		linear-gradient(180deg, #121212 0%, var(--bg) 38%, #1d1d1d 100%);
	color: var(--text);
	line-height: 1.75;
}

#login_wrap main,
#login_wrap .haneen-text {
	direction: rtl;
}

#login_wrap main {
	background: transparent;
	color: var(--text);
}

#login_wrap .container {
	width: min(92%, 980px);
	margin: 0 auto;
	max-width: 100%;
}

#login_wrap .toc {
	width: min(92%, 760px);
	margin: 34px auto 0;
	padding: 12px;
	border: 1px solid rgba(207, 86, 124, .14);
	border-radius: 8px;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, .035), rgb(255 255 255 / 0%)),
		#121212;
	box-shadow: 0 16px 38px rgba(0, 0, 0, .16);
	overflow: hidden;
}

#login_wrap .toc ul {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
	gap: 7px;
	list-style: none;
	margin: 0;
	padding: 0;
}

#login_wrap .toc a {
	display: block;
	padding: 6px 8px;
	border: 1px solid rgba(255, 255, 255, .075);
	border-radius: 7px;
	background: rgba(36, 36, 36, .72);
	color: var(--muted);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.35;
	text-align: center;
	text-decoration: none;
	transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease;
}

#login_wrap .toc a:hover {
	color: var(--text);
	border-color: rgba(207, 86, 124, .42);
	background: rgba(207, 86, 124, .08);
	box-shadow: 0 8px 20px rgba(207, 86, 124, .08);
	transform: translateY(-1px);
}

#login_wrap main section {
	position: relative;
	padding: 52px 0;
}

#login_wrap .section-title {
	position: relative;
	width: fit-content;
	max-width: 100%;
	margin: 0 auto 10px;
	color: var(--text);
	text-align: center;
	font-size: clamp(24px, 4vw, 33px);
	font-weight: 800;
	line-height: 1.4;
	text-wrap: balance;
}

#login_wrap .section-title::after {
	content: "";
	display: block;
	width: 54px;
	height: 2px;
	margin: 8px auto 0;
	border-radius: 999px;
	background: linear-gradient(90deg, transparent, rgba(207, 86, 124, .72), transparent);
}

#login_wrap .section-desc {
	max-width: 760px;
	margin: 0 auto 28px;
	text-align: center;
	color: var(--muted);
	font-size: 16px;
	line-height: 1.75;
}

#login_wrap .grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 12px;
}

#login_wrap .card,
#login_wrap .faq-item {
	position: relative;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, .075);
	border-radius: 8px;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .012)),
		linear-gradient(180deg, #1e1c1c, var(--panel));
	box-shadow: 0 16px 34px rgba(0, 0, 0, .18);
	transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease, background .2s ease;
}

#login_wrap .card::before,
#login_wrap .faq-item::before {
	content: "";
	position: absolute;
	top: 0;
	right: 16px;
	width: 46px;
	height: 2px;
	border-radius: 999px;
	background: rgba(207, 86, 124, .58);
}

#login_wrap .card:hover,
#login_wrap .faq-item:hover {
	border-color: rgba(207, 86, 124, .34);
	box-shadow: 0 18px 40px rgba(0, 0, 0, .22), 0 0 0 1px rgba(207, 86, 124, .055);
	transform: translateY(-2px);
}

#login_wrap .card {
	padding: 20px 18px 18px;
}

#login_wrap .card h3,
#login_wrap .faq-item h3 {
	margin-bottom: 6px;
	color: var(--text);
	font-size: 18px;
	line-height: 1.45;
	text-shadow: 0 1px 0 rgba(0, 0, 0, .18);
}

#login_wrap .card p,
#login_wrap .faq-item p {
	margin: 0;
	color: var(--muted);
	font-size: 14.5px;
	line-height: 1.75;
}

#login_wrap .faq {
	max-width: 760px;
	margin: 0 auto;
}

#login_wrap .faq-item {
	padding: 16px 18px;
	margin-bottom: 10px;
}

#login_wrap .home-csseo-sections {
	width: min(100% - 32px, 920px);
	margin: 0 auto 34px;
	padding: 0;
}

#login_wrap .home-csseo-sections .page_element {
	position: relative;
	display: block !important;
	width: 100%;
	margin: 0 0 12px !important;
	padding: 14px !important;
	overflow: hidden;
	border: 1px solid var(--line) !important;
	border-radius: 8px !important;
	background: rgba(15, 18, 22, 0.82) !important;
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18) !important;
	color: var(--text) !important;
	direction: rtl;
}

#login_wrap .home-csseo-sections .page_element::before {
	content: "";
	position: absolute;
	top: 0;
	right: 18px;
	width: 76px;
	height: 3px;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--accent), var(--accent-soft));
}

#login_wrap .home-csseo-sections .csseo-links-head {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 10px;
	margin-bottom: 10px;
}

#login_wrap .home-csseo-sections .csseo-links-title {
	color: var(--text);
	font-size: 15px;
	font-weight: 900;
	line-height: 1.5;
}

#login_wrap .home-csseo-sections .csseo-links-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 7px;
	background: rgba(207, 86, 124, 0.12);
	color: var(--accent-soft);
	font-size: 14px;
}

#login_wrap .home-csseo-sections .csseo-links-divider {
	display: block !important;
	width: 100%;
	height: 1px;
	margin: 0 0 11px !important;
	background: var(--line);
}

#login_wrap .home-csseo-sections .csseo-links-grid {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px !important;
	width: 100%;
}

#login_wrap .home-csseo-sections .csseo-link-card {
	display: flex !important;
	align-items: center;
	justify-content: center;
	min-width: 0;
	min-height: 36px;
	padding: 8px 9px !important;
	border: 1px solid var(--line) !important;
	border-radius: 7px !important;
	background: rgba(255, 255, 255, 0.045) !important;
	color: var(--muted) !important;
	font-size: 12px !important;
	font-weight: 800 !important;
	line-height: 1.35 !important;
	text-align: center !important;
	text-decoration: none !important;
	white-space: normal;
	transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}

#login_wrap .home-csseo-sections .csseo-link-card:hover {
	border-color: rgba(207, 86, 124, 0.50) !important;
	background: rgba(207, 86, 124, 0.10) !important;
	color: var(--text) !important;
}

#login_wrap .haneen-text {
	position: relative;
	overflow: hidden;
	padding: 64px 0 58px;
	border-top: 1px solid rgba(255, 255, 255, .055);
	border-bottom: 1px solid rgba(255, 255, 255, .055);
	background:
		radial-gradient(circle at 50% 0%, rgba(207, 86, 124, .055), transparent 26rem),
		rgba(18, 18, 18, 0.34);
	text-align: center;
}

#login_wrap .haneen-text .container {
	position: relative;
	z-index: 1;
	max-width: 1160px;
}

#login_wrap .haneen-text h2 {
	position: relative;
	width: fit-content;
	max-width: 100%;
	margin: 0 auto 16px;
	color: var(--text);
	font-size: clamp(24px, 3vw, 34px);
	font-weight: 900;
	line-height: 1.45;
	letter-spacing: 0;
	text-shadow: 0 2px 8px rgba(0, 0, 0, .22);
}

#login_wrap .haneen-text h2::after {
	content: "";
	display: block;
	width: 64px;
	height: 2px;
	margin: 10px auto 0;
	border-radius: 999px;
	background: linear-gradient(90deg, transparent, rgba(207, 86, 124, .72), transparent);
}

#login_wrap .haneen-text p {
	width: min(100%, 1180px);
	margin: 0 auto 12px;
	color: var(--text);
	font-size: 18px;
	font-weight: 700;
	line-height: 2;
	overflow-wrap: anywhere;
	text-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}

#login_wrap .haneen-text p:last-child {
	margin-bottom: 0;
}

#login_wrap #main_footer {
	background: #dedede;
	color: #222;
}

#login_wrap #menu_main_footer,
#login_wrap #menu_main_footer li,
#login_wrap #menu_main_footer li a {
	color: #222;
}

#login_wrap #menu_main_footer .theme_color {
	color: #e56b92 !important;
}

@media (min-width: 681px) {
	#login_wrap .toc {
		width: min(100%, 760px);
		margin: 56px auto 0;
		padding: 8px;
		border-radius: 7px;
	}

	#login_wrap .toc ul {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		gap: 6px;
	}

	#login_wrap .toc li {
		flex: 0 0 auto;
	}

	#login_wrap .toc a {
		min-width: 112px;
		padding: 6px 10px;
		border-radius: 7px;
		font-size: 14px;
		font-weight: 700;
		line-height: 1.3;
		text-align: center;
	}
}

@media (max-width: 760px) {
	#login_wrap .home-csseo-sections {
		width: calc(100% - 24px);
		margin-bottom: 28px;
	}

	#login_wrap .home-csseo-sections .csseo-links-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 680px) {
	#intro_top {
		min-height: 100vh;
		padding: 58px 0 72px;
	}

	#login_all {
		position: static;
		left: auto;
		transform: none;
		margin-left: auto;
		margin-right: auto;
		max-width: calc(100% - 24px);
		padding-left: 0 !important;
		padding-right: 0 !important;
		text-align: center;
	}

	#intro_top .bcell_mid {
		text-align: center;
	}

	#login_wrap .login_text,
	#login_wrap .login_box,
	#login_wrap .login_not_member {
		width: 100%;
		text-align: center;
	}

	#login_wrap .login_text h1 {
		margin: 0 auto 8px;
		font-size: 18px;
		line-height: 1.5;
		white-space: normal;
		overflow-wrap: normal;
		word-break: normal;
	}

	#login_wrap .mobile_title_break {
		display:block;
	}

	#login_wrap .login_text p {
		max-width: 92%;
		margin: 0 auto;
		font-size: 13px;
		line-height: 1.8;
	}

	#login_wrap .container {
		width: calc(100% - 24px);
	}

	#login_wrap .toc ul,
	#login_wrap .grid {
		grid-template-columns: 1fr;
	}

	#login_wrap .toc {
		padding: 10px;
	}

	#login_wrap .toc a {
		padding: 8px 10px;
		font-size: 13px;
	}

	#login_wrap main section {
		padding: 30px 0;
	}

	#login_wrap .section-title {
		font-size: 22px;
	}

	#login_wrap .section-desc {
		margin-bottom: 18px;
		font-size: 14px;
		line-height: 1.85;
	}

	#login_wrap .card,
	#login_wrap .faq-item {
		padding: 14px;
	}

	#login_wrap .card h3,
	#login_wrap .faq-item h3 {
		font-size: 16px;
	}

	#login_wrap .card p,
	#login_wrap .faq-item p {
		font-size: 13.5px;
		line-height: 1.8;
	}

	#login_wrap .haneen-text {
		padding: 36px 0 34px;
	}

	#login_wrap .haneen-text h2 {
		font-size: 22px;
	}

	#login_wrap .haneen-text p {
		font-size: 14px;
		font-weight: 600;
		line-height: 1.95;
	}
}

@media (max-width: 380px) {
	#login_wrap .container {
		width: calc(100% - 18px);
	}

	#login_wrap .home-csseo-sections {
		width: calc(100% - 18px);
	}

	#login_wrap .home-csseo-sections .page_element {
		padding: 12px !important;
	}

	#login_wrap .home-csseo-sections .csseo-link-card {
		min-height: 34px;
		padding: 7px !important;
		font-size: 11px !important;
	}
}