/* Merchlist Native Seller Onboarding — matches the seller-dashboard card system */

.mml-onboarding-grid{
	--mml-bg:#f5f6f5;
	--mml-ink:#111827;
	--mml-muted:#6b7280;
	--mml-muted-soft:#9ca3af;
	--mml-card:#ffffff;
	--mml-border:#e5e7eb;
	--mml-border-soft:#eef0ef;
	--mml-shadow-1:0 1px 2px rgba(17,24,39,.05);
	--mml-shadow-2:0 12px 28px -8px rgba(17,24,39,.12), 0 2px 6px rgba(17,24,39,.05);
	--mml-accent:#1f7a3d;
	--mml-accent-light:#39b65e;
	--mml-accent-soft:#e8f8ee;
	--mml-accent-ink:#ffffff;
	--mml-error-bg:#fdeceb;
	--mml-error-line:#e0685c;
	--mml-error-ink:#a13a2d;

	display:grid;
	grid-template-columns:1fr 1fr;
	gap:88px;
	margin:0 auto;
	padding-block:20px 40px;
	font-family:"Outfit","Helvetica Neue",Helvetica,Arial,sans-serif;
	color:var(--mml-ink);
}
@media (max-width:820px){
	.mml-onboarding-grid{grid-template-columns:1fr; gap:20px;}
}

.mml-onboarding-grid *{box-sizing:border-box;}
.mml-onboarding-grid svg{display:block;}

.mml-card{
	position:relative;
	overflow:hidden;
	background:var(--mml-card);
	border:1px solid var(--mml-border);
	border-radius:16px;
	box-shadow:var(--mml-shadow-2);
	padding:30px;
}
.mml-card::before{
	content:"";
	position:absolute;
	top:0; left:0; right:0;
	height:4px;
}
.mml-login-box::before{background:#000000;}
.mml-register-box::before{background:linear-gradient(90deg, var(--mml-accent), var(--mml-accent-light));}

.mml-login-box{
	background:linear-gradient(155deg, color-mix(in srgb, var(--mml-accent) 6%, var(--mml-card)) 0%, var(--mml-card) 65%);
}
.mml-login-box .mml-card-icon{background:#000000; color:#ffffff;}
.mml-login-box .mml-btn{background:#000000 !important; color:#ffffff !important; border-color:#000000 !important;}
.mml-login-box .mml-btn:hover{background:#262626 !important; border-color:#262626 !important; color:#ffffff !important;}

.mml-register-box{
	background:radial-gradient(520px 260px at 100% 0%, var(--mml-accent-soft), transparent 60%), var(--mml-card);
}
.mml-register-box h2{color:var(--mml-accent);}

.mml-link{color:var(--mml-accent); font-weight:600; text-decoration:none;}
.mml-link:hover{text-decoration:underline;}

.mml-hero{
	margin:40px 0 28px;
	font-family:"Outfit","Helvetica Neue",Helvetica,Arial,sans-serif;
}
.mml-eyebrow{
	display:inline-flex;
	align-items:center;
	gap:7px;
	font-size:12.5px;
	font-weight:700;
	letter-spacing:.04em;
	text-transform:uppercase;
	color:#1f7a3d;
	background:#e8f8ee;
	border-radius:999px;
	padding:7px 14px 7px 11px;
	margin:0 0 14px;
}
.mml-eyebrow svg{width:14px; height:14px;}
.mml-hero h1{
	font-family:"Outfit",sans-serif;
	font-size:32px;
	font-weight:700;
	line-height:1.15;
	margin:0 0 10px;
	color:#111827;
}
.mml-hero-sub{
	color:#6b7280;
	font-size:15px;
	line-height:1.6;
	margin:0;
	max-width:560px;
}

.mml-card-head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:4px; flex-wrap:wrap;}
.mml-card-title{display:flex; align-items:center; gap:10px;}
.mml-card-icon{
	width:34px; height:34px; border-radius:9px; background:var(--mml-accent-soft); color:var(--mml-accent);
	display:flex; align-items:center; justify-content:center; flex:none;
}
.mml-card-icon svg{width:17px; height:17px;}
.mml-card h2{font-family:"Outfit",sans-serif; font-size:19px; font-weight:600; margin:0;}
.mml-sub{color:var(--mml-muted); font-size:13.5px; margin:10px 0 24px; line-height:1.55;}

.mml-badge{
	display:inline-flex; align-items:center; gap:6px; flex:none;
	font-size:11px; font-weight:600;
	color:var(--mml-accent); background:var(--mml-accent-soft); border-radius:999px;
	padding:5px 11px 5px 9px;
}
.mml-badge svg{width:12px; height:12px;}

.mml-field{margin:0 0 16px;}
.mml-field label{
	display:block; font-size:12.5px; font-weight:600;
	margin-bottom:6px; color:var(--mml-ink);
}

.mml-input-wrap{position:relative; display:flex; align-items:center;}
.mml-input-wrap .mml-input-icon{
	position:absolute; left:12px; top:50%; transform:translateY(-50%);
	width:16px; height:16px; color:var(--mml-muted-soft); pointer-events:none;
	transition:color .15s ease;
}
.mml-input-wrap:focus-within .mml-input-icon{color:var(--mml-accent);}

.mml-onboarding-grid input[type="text"],
.mml-onboarding-grid input[type="email"],
.mml-onboarding-grid input[type="tel"],
.mml-onboarding-grid input[type="password"]{
	width:100%; padding:10px 13px; font-size:14px;
	border:1px solid var(--mml-border); border-radius:9px;
	background:var(--mml-card); color:var(--mml-ink);
	font-family:inherit;
	transition:border-color .15s ease, box-shadow .15s ease;
}
.mml-onboarding-grid input.mml-has-icon{padding-left:38px;}
.mml-onboarding-grid input.mml-has-toggle{padding-right:38px;}
.mml-onboarding-grid input::placeholder{color:var(--mml-muted-soft);}
.mml-onboarding-grid input:focus{
	outline:none; border-color:var(--mml-accent);
	box-shadow:0 0 0 3px rgba(31,122,61,.16);
}

.mml-pass-toggle{
	position:absolute; right:4px; top:50%; transform:translateY(-50%);
	background:none; border:none; cursor:pointer; color:var(--mml-muted);
	padding:7px; border-radius:6px; display:flex;
}
.mml-pass-toggle svg{width:16px; height:16px;}
.mml-pass-toggle:hover{background:var(--mml-border-soft); color:var(--mml-ink);}

.mml-row-between{
	display:flex; align-items:center; justify-content:space-between; gap:12px;
	margin:0 0 22px; font-size:13.5px; flex-wrap:wrap;
}
.mml-remember{display:flex; align-items:center; gap:7px; color:var(--mml-muted); font-weight:500;}
.mml-remember input{accent-color:var(--mml-accent); width:15px; height:15px;}
.mml-forgot{display:inline-flex; align-items:center; gap:5px; color:var(--mml-ink); text-decoration:none; font-weight:500;}
.mml-forgot svg{width:13px; height:13px; color:var(--mml-muted-soft);}
.mml-forgot:hover{color:var(--mml-accent);}
.mml-forgot:hover svg{color:var(--mml-accent);}

.mml-error{
	display:flex; align-items:flex-start; gap:8px;
	background:var(--mml-error-bg); border:1px solid var(--mml-error-line); color:var(--mml-error-ink);
	border-radius:9px; font-size:13px; padding:10px 13px; margin-bottom:16px;
}
.mml-error svg{width:15px; height:15px; flex:none; margin-top:1px;}

.mml-btn{
	width:100%; padding:11px 16px !important; font-family:inherit; font-weight:600;
	font-size:14px; display:flex; align-items:center; justify-content:center; gap:8px;
	background:var(--mml-accent) !important; color:var(--mml-accent-ink) !important; border:1px solid var(--mml-accent) !important; border-radius:9px !important;
	cursor:pointer;
	box-shadow:var(--mml-shadow-1) !important;
	transition:background .15s ease, border-color .15s ease, transform .1s ease;
}
.mml-btn svg{width:16px; height:16px; transition:transform .15s ease;}
.mml-btn:hover{background:var(--mml-accent-light) !important; border-color:var(--mml-accent-light) !important; color:#fff !important;}
.mml-btn:hover svg{transform:translateX(2px);}
.mml-btn:active{transform:translateY(1px);}

.mml-role-pill{
	display:inline-flex; align-items:center; gap:7px;
	background:var(--mml-accent-soft); color:var(--mml-accent); border-radius:999px; padding:7px 13px 7px 10px;
	font-size:12.5px; font-weight:600;
	margin-bottom:18px;
}
.mml-role-pill svg{width:14px; height:14px;}

/* ---------- Dokan's native registration form, restyled to match ---------- */
.mml-register-box .dokan-vendor-register{font-family:"Outfit",sans-serif;}
.mml-register-box .dokan-vendor-register label{
	font-size:12.5px; font-weight:600; color:var(--mml-ink); margin-bottom:6px; display:block;
}
.mml-register-box .dokan-vendor-register .required{color:var(--mml-error-line);}
.mml-register-box .dokan-vendor-register input.input-text,
.mml-register-box .dokan-vendor-register input[type="text"],
.mml-register-box .dokan-vendor-register input[type="email"],
.mml-register-box .dokan-vendor-register input[type="password"]{
	width:100%; padding:10px 13px; font-size:14px;
	border:1px solid var(--mml-border) !important; border-radius:9px !important;
	background:var(--mml-card); color:var(--mml-ink);
	font-family:inherit; box-shadow:none;
}
.mml-register-box .dokan-vendor-register input:focus{
	outline:none; border-color:var(--mml-accent) !important;
	box-shadow:0 0 0 3px rgba(31,122,61,.16);
}
.mml-register-box .dokan-vendor-register .form-row{margin:0 0 16px;}
.mml-register-box .dokan-vendor-register small{color:var(--mml-muted-soft); font-size:12px;}
.mml-register-box .dokan-vendor-register .user-role{display:none;} /* role is forced to "seller" via hidden field already */
.mml-register-box .dokan-vendor-register button[type="submit"],
.mml-register-box .dokan-vendor-register input[type="submit"]{
	width:100%; padding:11px 16px; font-family:"Outfit",sans-serif; font-weight:600;
	font-size:14px;
	background:var(--mml-accent) !important; color:#fff !important;
	border:1px solid var(--mml-accent) !important; border-radius:9px !important;
	box-shadow:var(--mml-shadow-1); cursor:pointer;
	transition:background .15s ease;
}
.mml-register-box .dokan-vendor-register button[type="submit"]:hover,
.mml-register-box .dokan-vendor-register input[type="submit"]:hover{
	background:var(--mml-accent-light) !important; border-color:var(--mml-accent-light) !important;
}

/* icon wrappers injected by onboarding.js onto the known Dokan field ids */
.mml-register-box .mml-dokan-input-wrap{position:relative; display:flex; align-items:center;}
.mml-register-box .mml-dokan-input-wrap .mml-input-icon{
	position:absolute; left:12px; top:50%; transform:translateY(-50%);
	width:16px; height:16px; color:var(--mml-muted-soft); pointer-events:none;
}
.mml-register-box .mml-dokan-input-wrap input{padding-left:38px !important;}