/* ===== Finnish Taxi Hub — TaxiHub login theme (Concept B) ===== */
.taxi_login{
	position:fixed;inset:0;display:flex;flex-direction:column;overflow:auto;
	font-family:'IBM Plex Sans Arabic','Segoe UI',Roboto,'DejaVu Sans',sans-serif;
	color:#15202b;background:#f6f8fc;z-index:1;
}
.taxi_login *{box-sizing:border-box}
.taxi_login .tx_split{flex:1 0 auto;display:flex;min-height:0}
.taxi_login .tx_footbar{flex:none}

/* ---- LEFT brand panel ---- */
.taxi_login .tx_left{
	width:46%;max-width:620px;position:relative;overflow:hidden;color:#1a1300;
	background:
		radial-gradient(600px 400px at 30% 18%,#ffe066 0%,rgba(255,224,102,0) 60%),
		linear-gradient(160deg,#ffcf33 0%,#f5b301 70%,#eaa500 100%);
}
.taxi_login .tx_left_in{padding:9% 8% 0;}
.taxi_login .tx_sign{
	display:inline-block;position:relative;background:#121212;color:#ffd43b;
	font-weight:800;font-size:26px;letter-spacing:4px;padding:11px 20px;border-radius:11px;
	box-shadow:0 10px 24px rgba(0,0,0,.25);
}
.taxi_login .tx_sign:before{content:"";position:absolute;top:-8px;left:50%;transform:translateX(-50%);
	width:30px;height:8px;background:#121212;border-radius:4px 4px 0 0}
.taxi_login .tx_title{margin:28px 0 0;font-size:clamp(34px,4vw,54px);font-weight:800;line-height:1.08;color:#1a1300}
.taxi_login .tx_title span{display:block}
.taxi_login .tx_sub{margin:16px 0 0;font-size:clamp(16px,1.5vw,21px);font-weight:600;color:#3d3000;max-width:430px;line-height:1.5}
.taxi_login .tx_feat{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-direction:column;gap:13px}
.taxi_login .tx_feat li{display:flex;align-items:center;gap:12px;font-size:17px;font-weight:600;color:#241c00}
.taxi_login .tx_feat li i{width:34px;height:34px;border-radius:9px;background:rgba(18,18,18,.12);
	display:flex;align-items:center;justify-content:center;font-style:normal;font-size:18px;flex:none}
.taxi_login .tx_car{position:absolute;right:-20px;bottom:40px;font-size:118px;line-height:1;
	filter:drop-shadow(0 8px 10px rgba(0,0,0,.15));pointer-events:none}
.taxi_login .tx_checker{position:absolute;bottom:0;left:0;right:0;height:24px;
	background-image:
		linear-gradient(45deg,#121212 25%,transparent 25%),linear-gradient(-45deg,#121212 25%,transparent 25%),
		linear-gradient(45deg,transparent 75%,#121212 75%),linear-gradient(-45deg,transparent 75%,#121212 75%);
	background-size:24px 24px;background-position:0 0,0 12px,12px -12px,-12px 0}

/* ---- RIGHT entry card ---- */
.taxi_login .tx_right{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
	padding:40px 24px;background:linear-gradient(180deg,#ffffff,#f6f8fc)}
.taxi_login .tx_card{width:100%;max-width:380px}
.taxi_login .tx_brandr{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.taxi_login .tx_badge{width:26px;height:26px;border-radius:7px;background:linear-gradient(180deg,#ffd43b,#f5b301);flex:none}
.taxi_login .tx_brandr b{font-size:20px;color:#15202b}
.taxi_login .tx_welcome{font-size:30px;font-weight:800;margin-bottom:6px}
.taxi_login .tx_hello{font-size:15px;color:#64748b;margin-bottom:24px}
.taxi_login .tx_actions{display:flex;flex-direction:column;gap:12px}
.taxi_login .tx_btn{width:100%;height:54px;border:0;border-radius:13px;font-size:17px;font-weight:800;
	cursor:pointer;display:flex;align-items:center;justify-content:center;gap:9px;transition:transform .08s,box-shadow .2s;font-family:inherit}
.taxi_login .tx_btn:active{transform:translateY(1px)}
.taxi_login .tx_primary{background:linear-gradient(180deg,#ffd43b,#f5b301);color:#1a1300;
	box-shadow:0 14px 30px rgba(245,179,1,.4)}
.taxi_login .tx_primary:hover{box-shadow:0 18px 36px rgba(245,179,1,.5)}
.taxi_login .tx_arrow{font-weight:800}
.taxi_login .tx_sec{background:#121212;color:#fff;box-shadow:0 10px 22px rgba(0,0,0,.18)}
.taxi_login .tx_sec:hover{background:#000}
.taxi_login .tx_ghost{background:#fff;color:#55657a;border:1.6px solid #e4e9f1;font-weight:700;height:50px}
.taxi_login .tx_ghost:hover{border-color:#f5b301;color:#8a6400;background:#fff8e6}
.taxi_login .tx_online{margin-top:18px;text-align:center;font-size:14px;color:#2b3a4d;font-weight:600}
.taxi_login .tx_dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#20c060;
	box-shadow:0 0 0 4px rgba(32,192,96,.18);margin-inline-end:5px;vertical-align:middle}
.taxi_login .tx_lang{margin-top:18px;text-align:center;font-size:14px;color:#64748b;font-weight:600;cursor:pointer}
.taxi_login .tx_lang:hover{color:#f5b301}
.taxi_login .tx_foot{margin-top:26px;font-size:12px;color:#9aa7b8;text-align:center;max-width:320px}

/* ---- restyle the native modals (login / guest / register) to match ---- */
.taxi_login ~ .modal_overlay .theme_btn,
body .theme_btn.full_button,
.ok_btn.large_button_rounded{background:linear-gradient(180deg,#ffd43b,#f5b301)!important;color:#1a1300!important;border:0!important}

/* ---- RESPONSIVE: stack on mobile ---- */
@media (max-width:860px){
	.taxi_login .tx_split{flex-direction:column}
	.taxi_login .tx_left{width:100%;max-width:none;padding-bottom:30px}
	.taxi_login .tx_left_in{padding:34px 26px 0}
	.taxi_login .tx_title{font-size:34px}
	.taxi_login .tx_feat{gap:10px}
	.taxi_login .tx_car{font-size:84px;bottom:22px;right:-6px}
	.taxi_login .tx_checker{height:16px;background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0}
	.taxi_login .tx_right{padding:30px 22px 44px}
}