/* default login css */

/*intro css */
#login_logo { height:76px; filter:drop-shadow(0 8px 22px rgba(0,0,0,.6)); }
/* Flex column (not display:table): with min-height it GROWS to fit tall content so the page
   scrolls on short/mobile viewports, instead of the old table-cell + overflow:hidden combo that
   clipped the logo/title and the bottom buttons out of reach on phones. overflow:hidden is kept
   so it still contains the blurred decorative orbs (no horizontal scrollbar). */
#intro_top { display:flex; flex-direction:column; justify-content:center; align-items:center; width:100%; height:auto; min-height:100vh; min-height:100dvh; z-index:1; position:relative; overflow:hidden; background:#181a26 url('images/background.jpg'); background-repeat:no-repeat; background-size:cover; background-position:center center; background-attachment:fixed; }
#intro_top > .bcell_mid { display:block; width:100%; }
#intro_top:before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 0%, rgba(79,124,255,.16) 0%, transparent 55%), linear-gradient(180deg, rgba(9,11,20,.62) 0%, rgba(9,11,20,.82) 100%); z-index:0; }
#login_wrap { width:100%; height:100%; }
#login_all { width:520px; max-width:94%; border-radius:20px; display:block; margin:0 auto; padding-top:46px; padding-bottom:46px; color:#fff; position:relative; z-index:2; }
.login_not_member { text-align:center; padding-top:5px; }
#intro_lang { position:absolute; top:12px; right:16px; width:44px; height:44px; z-index:3; border-radius:50%; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); transition:background .2s, transform .2s; }
#intro_lang:hover { background:rgba(255,255,255,.18); transform:scale(1.06); }
.intro_lang { border-radius:3px; }

/* hero text */
.login_text p.text_xlarge { font-size:32px; font-weight:800; letter-spacing:.5px; background:linear-gradient(120deg, #ffffff 20%, #a9c0ff 55%, #d7a9ff 85%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.login_text p.text_med { font-size:16px; color:rgba(255,255,255,.78); max-width:380px; margin:0 auto; line-height:1.6; }

/* floating glow orbs */
.intro_orb { position:absolute; border-radius:50%; filter:blur(80px); opacity:.45; z-index:0; pointer-events:none; animation:orbFloat 14s ease-in-out infinite; }
.intro_orb1 { width:380px; height:380px; top:-100px; left:-80px; background:radial-gradient(circle, #4f7cff 0%, transparent 70%); }
.intro_orb2 { width:330px; height:330px; bottom:-90px; right:-60px; background:radial-gradient(circle, #9b4fff 0%, transparent 70%); animation-delay:-5s; }
.intro_orb3 { width:260px; height:260px; top:38%; left:62%; background:radial-gradient(circle, #00c2a8 0%, transparent 70%); animation-delay:-9s; }
@keyframes orbFloat {
	0%, 100% { transform:translateY(0) translateX(0) scale(1); }
	50% { transform:translateY(-34px) translateX(22px) scale(1.1); }
}

/* entrance animations */
.intro_anim { opacity:0; animation:introUp .7s cubic-bezier(.22,.8,.36,1) forwards; }
.intro_anim1 { animation-delay:.05s; }
.intro_anim2 { animation-delay:.15s; }
.intro_anim3 { animation-delay:.28s; }
.intro_anim4 { animation-delay:.45s; }
@keyframes introUp {
	from { opacity:0; transform:translateY(24px); }
	to { opacity:1; transform:translateY(0); }
}

/* guest login glass card */
.intro_guest_card { position:relative; margin:0 auto; padding:26px 28px 28px 28px; max-width:410px; text-align:center; border-radius:24px; background:linear-gradient(160deg, rgba(26,30,48,.72), rgba(15,17,28,.66)); border:1px solid rgba(255,255,255,.13); box-shadow:0 24px 60px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.1); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); }
.intro_guest_card:before { content:''; position:absolute; inset:-1px; border-radius:24px; padding:1px; background:linear-gradient(140deg, rgba(111,140,255,.6), transparent 35%, transparent 65%, rgba(155,79,255,.5)); -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; }
.guest_card_title { font-size:19px; font-weight:800; padding-bottom:20px; letter-spacing:.3px; }
.guest_card_title .fa { color:#ffcf5c; margin:0 6px; text-shadow:0 0 16px rgba(255,207,92,.65); }

/* username field */
.guest_field { position:relative; }
.guest_field_icon { position:absolute; top:50%; transform:translateY(-50%); inset-inline-start:15px; color:rgba(255,255,255,.55); pointer-events:none; z-index:1; }
.intro_guest_card #guest_username { height:50px; font-size:16px; background:rgba(255,255,255,.09); color:#fff; border:1px solid rgba(255,255,255,.16); border-radius:14px; padding-inline-start:42px; transition:border-color .25s, box-shadow .25s, background .25s; }
.intro_guest_card #guest_username::placeholder { color:rgba(255,255,255,.5); }
.intro_guest_card #guest_username:focus { outline:none; background:rgba(255,255,255,.13); border-color:rgba(111,140,255,.85); box-shadow:0 0 0 3px rgba(111,140,255,.25); }
.intro_guest_card #guest_username.onfield { border-color:#ff5c74; box-shadow:0 0 0 3px rgba(255,92,116,.25); }

.intro_guest_card .label { text-align:start; font-size:13px; color:rgba(255,255,255,.72); padding-bottom:7px; }
.intro_guest_card .register_date { padding-top:6px; }
.intro_guest_card .date_form { gap:10px; }

/* selectboxit inside the card */
.intro_guest_card .selectboxit-container { width:100%; }
.intro_guest_card .selectboxit-container .selectboxit { width:100% !important; background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.16); border-radius:14px; transition:border-color .25s, background .25s; }
.intro_guest_card .selectboxit-container span { height:48px; line-height:48px; }
.intro_guest_card .selectboxit-container .selectboxit-options a { height:44px; line-height:44px; }
.intro_guest_card .selectboxit-container .selectboxit:hover,
.intro_guest_card .selectboxit-container .selectboxit:focus { background:rgba(255,255,255,.14); border-color:rgba(111,140,255,.7); }
.intro_guest_card .selectboxit-container .selectboxit-text { font-size:15px; }
.intro_guest_card .selectboxit-container .selectboxit-text,
.intro_guest_card .selectboxit-container .selectboxit-default-arrow,
.intro_guest_card .selectboxit-container .selectboxit .selectboxit-arrow-container .selectboxit-arrow { color:#fff; }
.intro_guest_card .selectboxit-container .selectboxit-default-arrow { border-top-color:#fff; }
.intro_guest_card .selectboxit-container .selectboxit-options { background:#1b1f30; border:1px solid rgba(255,255,255,.14); border-radius:14px; max-height:230px; box-shadow:0 16px 40px rgba(0,0,0,.5); }
.intro_guest_card .selectboxit-container .selectboxit-options .selectboxit-option .selectboxit-option-anchor { color:#fff; padding:0 12px; }
.intro_guest_card .selectboxit-container .selectboxit-options .selectboxit-option:hover .selectboxit-option-anchor,
.intro_guest_card .selectboxit-container .selectboxit-options .selectboxit-focus .selectboxit-option-anchor { background:rgba(111,140,255,.28); color:#fff; }

/* big guest submit button */
.guest_submit_btn { position:relative; overflow:hidden; width:100%; margin-top:22px; padding:15px 18px; min-height:52px; font-size:17px; font-weight:800; letter-spacing:.3px; color:#fff; border:none; border-radius:15px; cursor:pointer; background:linear-gradient(120deg, #4f7cff, #9b4fff, #4f7cff); background-size:220% 220%; animation:guestGradient 6s ease infinite; box-shadow:0 12px 28px rgba(79,124,255,.42); transition:transform .18s, box-shadow .18s; }
.guest_submit_btn:hover { transform:translateY(-2px); box-shadow:0 16px 36px rgba(79,124,255,.58); }
.guest_submit_btn:active { transform:translateY(1px); }
.guest_submit_btn .fa { margin:0 6px; }
.guest_submit_btn:after { content:''; position:absolute; top:0; height:100%; width:60px; inset-inline-start:-80px; background:linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent); transform:skewX(-20deg); animation:guestShine 3.4s ease-in-out infinite; }
@keyframes guestGradient {
	0%, 100% { background-position:0% 50%; }
	50% { background-position:100% 50%; }
}
@keyframes guestShine {
	0% { inset-inline-start:-80px; }
	55%, 100% { inset-inline-start:120%; }
}

/* divider */
.intro_divider { max-width:410px; margin:24px auto 0 auto; }
.intro_divider span { display:block; height:1px; background:linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); }

/* secondary actions: member login + registration */
.intro_secondary { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; max-width:410px; margin:20px auto 0 auto; }
.intro_member_btn, .intro_register_btn { flex:1; min-width:150px; min-height:48px; padding:12px 16px; font-size:15px; font-weight:bold; color:#fff; border-radius:14px; cursor:pointer; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.22); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); transition:background .2s, border-color .2s, transform .18s; }
.intro_member_btn .fa, .intro_register_btn .fa { margin:0 6px; }
.intro_member_btn:hover, .intro_register_btn:hover { background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.4); transform:translateY(-2px); }
.intro_register_btn { border-color:rgba(0,194,168,.5); }
.intro_register_btn:hover { background:rgba(0,194,168,.18); border-color:rgba(0,194,168,.8); }
.intro_new_here { color:rgba(255,255,255,.62); font-size:13px; }

/* reduced motion */
@media (prefers-reduced-motion: reduce){
	.intro_orb, .guest_submit_btn, .guest_submit_btn:after { animation:none; }
	.intro_anim { animation-duration:.01s; }
}

/* 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%; }
}

/* ===== responsive / mobile ===== */
@media screen and (max-width:768px){
	#intro_top { background-attachment:scroll; }
	.intro_orb { filter:blur(60px); opacity:.4; }
	#login_all { padding-top:34px; padding-bottom:34px; }
	.login_text p.text_xlarge { font-size:27px; }
	.login_text p.text_med { font-size:15px; max-width:320px; }
}

@media screen and (max-width:520px){
	#login_logo { height:58px; }
	#login_all { max-width:100%; padding:24px 14px 30px 14px; }
	.intro_guest_card { padding:20px 16px 22px 16px; border-radius:20px; }
	.intro_guest_card:before { border-radius:20px; }
	.guest_card_title { font-size:17px; padding-bottom:16px; }
	.login_text p.text_xlarge { font-size:24px; }
	.login_text p.text_med { font-size:14px; }
	.intro_guest_card .date_form { gap:7px; }
	.guest_submit_btn { font-size:16px; }
	.intro_secondary { gap:10px; }
	.intro_member_btn, .intro_register_btn { min-width:130px; font-size:14px; }
	.intro_divider, .intro_secondary { max-width:100%; }
	#intro_lang { top:8px; right:10px; width:40px; height:40px; }
}

@media screen and (max-width:380px){
	#login_logo { height:50px; }
	.login_text p.text_xlarge { font-size:21px; }
	.intro_member_btn, .intro_register_btn { min-width:100%; }
	.intro_guest_card .selectboxit-container span { height:44px; line-height:44px; }
	.intro_guest_card #guest_username { height:46px; }
}

/* short screens (landscape phones) */
@media screen and (max-height:640px){
	#login_all { padding-top:20px; padding-bottom:20px; }
	#login_logo { height:48px; }
	.login_text.vpad20 { padding-top:8px; padding-bottom:8px; }
}