/* OurDr Client Login — front-end styles (scoped under .ourdr-cl-wrap) */

.ourdr-cl-wrap, .ourdr-cl-wrap *{ box-sizing:border-box; }

body.ourdr-cl-body{
	margin:0;
	background:#F5F8F8;
	overflow-x:hidden;
}

.ourdr-cl-wrap{
	--navy:#062B5A;
	--navy-deep:#041D3D;
	--teal:#01A6A3;
	--teal-light:#3FC9C3;
	--paper:#F5F8F8;
	--ink:#0A1E33;
	--muted:#5E7286;
	--line:#DDE6E8;
	--line-dark:rgba(63,201,195,0.18);
	--radius:14px;

	font-family:'Poppins', sans-serif;
	color:var(--ink);
	-webkit-font-smoothing:antialiased;
	min-height:100dvh;
	display:grid;
	grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
}

.ourdr-cl-wrap a{ color:inherit; text-decoration:none; }
.ourdr-cl-wrap button{ font-family:inherit; cursor:pointer; border:none; }
.ourdr-cl-wrap img{ max-width:100%; display:block; }

/* logo badge — white background so any logo (transparent or dark) reads cleanly */
.ourdr-cl-logo-badge{
	display:inline-flex;
	align-items:center;
	background:#fff;
	border-radius:10px;
	padding:9px 14px;
	box-shadow:0 2px 10px rgba(4,29,61,0.18);
}
.ourdr-cl-logo-badge img{ height:clamp(24px,3vw,32px); width:auto; }

/* ---------- LEFT PANEL ---------- */
.ourdr-cl-panel{
	position:relative;
	background:linear-gradient(160deg,var(--navy) 0%, var(--navy-deep) 100%);
	color:var(--teal-light);
	padding:clamp(28px,4vw,52px) clamp(24px,4.5vw,56px) clamp(24px,3vw,40px);
	display:flex;
	flex-direction:column;
	overflow:hidden;
	min-width:0;
}
.ourdr-cl-panel::before{
	content:"";
	position:absolute; inset:0;
	background-image:
		linear-gradient(var(--line-dark) 1px, transparent 1px),
		linear-gradient(90deg, var(--line-dark) 1px, transparent 1px);
	background-size:44px 44px;
	opacity:0.5;
	mask-image:radial-gradient(ellipse at 30% 20%, black 10%, transparent 70%);
}

.ourdr-cl-brandrow{
	display:flex; align-items:center; justify-content:space-between; gap:12px;
	position:relative; z-index:2;
}

.ourdr-cl-tag{
	font-size:11px; font-weight:500; text-transform:uppercase; letter-spacing:0.14em;
	color:rgba(63,201,195,0.9);
	border:1px solid var(--line-dark);
	padding:6px 12px; border-radius:100px;
	white-space:nowrap;
}

.ourdr-cl-hero{
	position:relative; z-index:2;
	margin-top:auto;
	padding-top:clamp(28px,5vw,60px);
	min-width:0;
}
.ourdr-cl-eyebrow{
	display:inline-flex; align-items:center; gap:8px;
	font-size:12px; font-weight:500; text-transform:uppercase; letter-spacing:0.16em;
	color:var(--teal-light); opacity:0.85; margin-bottom:18px;
}
.ourdr-cl-eyebrow::before{ content:""; width:16px; height:1px; background:var(--teal-light); }

.ourdr-cl-headline{
	font-size:clamp(26px,3.4vw,42px);
	line-height:1.12;
	font-weight:700;
	letter-spacing:-0.01em;
	color:#fff;
	max-width:16ch;
	margin:0;
}
.ourdr-cl-headline em{ font-style:normal; color:var(--teal-light); }

.ourdr-cl-sub{
	margin-top:16px;
	font-size:clamp(13.5px,1.4vw,15.5px);
	font-weight:400;
	line-height:1.6;
	color:rgba(214,240,238,0.72);
	max-width:44ch;
}

.ourdr-cl-pulse{
	margin:clamp(22px,3vw,34px) 0 4px;
	position:relative; z-index:2;
	height:40px;
}
.ourdr-cl-pulse svg{ width:100%; height:100%; display:block; }
.ourdr-cl-pulse-path{
	fill:none;
	stroke:var(--teal-light);
	stroke-width:2;
	stroke-linecap:round;
	stroke-linejoin:round;
	stroke-dasharray:600;
	stroke-dashoffset:600;
	animation:ourdrClDraw 3.2s ease-in-out infinite;
	filter:drop-shadow(0 0 6px rgba(63,201,195,0.55));
}
@keyframes ourdrClDraw{
	0%{stroke-dashoffset:600;}
	55%{stroke-dashoffset:0;}
	100%{stroke-dashoffset:-600;}
}

.ourdr-cl-services{
	position:relative; z-index:2;
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:1px;
	background:var(--line-dark);
	border:1px solid var(--line-dark);
	border-radius:var(--radius);
	overflow:hidden;
	margin-top:6px;
}
.ourdr-cl-service{
	background:rgba(4,29,61,0.55);
	padding:clamp(12px,1.6vw,16px) clamp(14px,1.8vw,18px);
	display:flex; flex-direction:column; gap:6px;
	transition:background .25s ease;
	min-width:0;
}
.ourdr-cl-service:hover{ background:rgba(1,166,163,0.14); }
.ourdr-cl-service .num{ font-size:11px; font-weight:500; color:var(--teal-light); opacity:0.9; }
.ourdr-cl-service .name{ font-size:13.5px; font-weight:600; color:#fff; letter-spacing:-0.01em; }
.ourdr-cl-service .desc{ font-size:12px; font-weight:400; color:rgba(214,240,238,0.62); line-height:1.45; }

.ourdr-cl-panel-footer{
	position:relative; z-index:2;
	margin-top:clamp(22px,3vw,32px);
	display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
	padding-top:18px;
	border-top:1px solid var(--line-dark);
}
.ourdr-cl-sitelink{
	display:inline-flex; align-items:center; gap:6px;
	font-size:13px; font-weight:500; color:var(--teal-light);
}
.ourdr-cl-sitelink svg{ width:13px; height:13px; }
.ourdr-cl-sitelink:hover{ color:#fff; }
.ourdr-cl-copy{ font-size:12px; font-weight:400; color:rgba(214,240,238,0.45); }

/* ---------- RIGHT PANEL (login) ---------- */
.ourdr-cl-loginside{
	display:flex; flex-direction:column;
	padding:clamp(28px,4vw,48px) clamp(24px,4.5vw,56px);
	min-width:0;
}
.ourdr-cl-clientrow{
	display:flex; align-items:center; justify-content:flex-end; gap:10px;
}
.ourdr-cl-clientname{
	font-weight:700; font-size:16px; color:var(--ink);
}

.ourdr-cl-form-area{
	margin:auto 0;
	max-width:380px;
	width:100%;
	margin-left:auto; margin-right:auto;
	padding:32px 0;
}
.ourdr-cl-form-area h2{
	font-size:clamp(22px,2.6vw,28px); font-weight:700; letter-spacing:-0.01em;
	margin:0 0 8px;
}
.ourdr-cl-lead{
	font-size:14px; font-weight:400; color:var(--muted); margin:0 0 30px; line-height:1.5;
}

.ourdr-cl-field{ margin-bottom:18px; }
.ourdr-cl-field label{
	display:block; font-size:12.5px; font-weight:600; margin-bottom:7px;
	color:var(--ink); letter-spacing:0.01em;
}
.ourdr-cl-field input{
	width:100%;
	padding:12px 14px;
	border:1.5px solid var(--line);
	border-radius:10px;
	font-size:14.5px;
	font-family:inherit;
	background:#fff;
	color:var(--ink);
	transition:border-color .2s ease, box-shadow .2s ease;
}
.ourdr-cl-field input:focus{
	outline:none;
	border-color:var(--teal);
	box-shadow:0 0 0 3px rgba(1,166,163,0.14);
}
.ourdr-cl-field input::placeholder{ color:#A6B4BC; }

/* password show/hide toggle */
.ourdr-cl-pass-wrap{ position:relative; }
.ourdr-cl-pass-wrap input{ padding-right:44px; }

/* Kill the browser's own native reveal/clear icon on password fields
   (most notably Edge/IE) - it renders on top of our custom button at
   the same right-edge spot and silently eats the click, which is why
   the toggle looked "broken" even though our JS/CSS was firing fine. */
.ourdr-cl-pass-wrap input[type="password"]::-ms-reveal,
.ourdr-cl-pass-wrap input[type="password"]::-ms-clear{
	display:none;
	width:0; height:0;
}

.ourdr-cl-pass-toggle{
	position:absolute;
	top:50%; right:6px;
	transform:translateY(-50%);
	width:32px; height:32px;
	display:flex; align-items:center; justify-content:center;
	background:transparent;
	border:0;
	padding:0;
	margin:0;
	border-radius:8px;
	color:var(--muted);
	cursor:pointer;
	z-index:3;
	transition:color .15s ease, background .15s ease;
}
.ourdr-cl-pass-toggle:hover{ color:var(--teal); background:rgba(1,166,163,0.08); }
.ourdr-cl-pass-toggle:focus-visible{ outline:2px solid var(--teal); outline-offset:1px; }
.ourdr-cl-pass-toggle svg{ display:block; pointer-events:none; }
.ourdr-cl-pass-toggle svg.ourdr-cl-icon-hidden{ display:none !important; }

.ourdr-cl-row-between{
	display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px;
	margin-bottom:26px; font-size:13px;
}
.ourdr-cl-remember{ display:flex; align-items:center; gap:8px; color:var(--muted); font-weight:400; }
.ourdr-cl-remember input{ accent-color:var(--teal); width:15px; height:15px; }
.ourdr-cl-forgot{ color:var(--teal); font-weight:600; }
.ourdr-cl-forgot:hover{ color:var(--navy); }

.ourdr-cl-btn-signin{
	width:100%;
	background:var(--teal);
	color:#fff;
	font-weight:600;
	font-size:15px;
	padding:13px 18px;
	border-radius:10px;
	display:flex; align-items:center; justify-content:center; gap:8px;
	transition:background .2s ease, transform .15s ease;
}
.ourdr-cl-btn-signin:hover{ background:var(--navy); transform:translateY(-1px); }
.ourdr-cl-btn-signin:active{ transform:translateY(0); }

.ourdr-cl-divider{
	display:flex; align-items:center; gap:12px;
	margin:26px 0 22px; color:var(--muted); font-size:12px; font-weight:400;
}
.ourdr-cl-divider::before, .ourdr-cl-divider::after{ content:""; flex:1; height:1px; background:var(--line); }

.ourdr-cl-support{ font-size:13px; font-weight:400; color:var(--muted); text-align:center; line-height:1.6; margin:0; }
.ourdr-cl-support a{ color:var(--teal); font-weight:600; }
.ourdr-cl-support a:hover{ color:var(--navy); }

.ourdr-cl-loginside-footer{
	display:flex; align-items:center; justify-content:center; gap:6px; flex-wrap:wrap;
	font-size:12px; font-weight:400; color:var(--muted); margin-top:24px;
}
.ourdr-cl-loginside-footer strong{ color:var(--ink); font-weight:700; }
.ourdr-cl-loginside-footer a{ color:var(--teal); font-weight:600; }
.ourdr-cl-loginside-footer a:hover{ color:var(--navy); }

.ourdr-cl-status{
	display:none;
	font-size:13px; font-weight:400;
	background:#FCEBEA;
	border:1px solid #F1B4AE;
	color:#B3261E;
	padding:10px 12px;
	border-radius:8px;
	margin-bottom:18px;
}
.ourdr-cl-status.show{ display:block; }
.ourdr-cl-status.is-success{
	background:#E7F6EF;
	border-color:#A9DFC4;
	color:#146C43;
}

/* ---------- multi-step panels ---------- */
.ourdr-cl-step[hidden]{ display:none; }

.ourdr-cl-btn-signin[disabled],
.ourdr-cl-btn-secondary[disabled],
button[disabled]{ opacity:0.65; cursor:not-allowed; }

.ourdr-cl-btn-secondary{
	width:100%;
	background:#fff;
	color:var(--ink);
	font-weight:600;
	font-size:14.5px;
	padding:12px 18px;
	border-radius:10px;
	border:1.5px solid var(--line);
	margin-top:10px;
	transition:border-color .2s ease, background .2s ease;
}
.ourdr-cl-btn-secondary:hover{ border-color:var(--teal); background:#F5FBFB; }

.ourdr-cl-btn-google{
	width:100%;
	display:flex; align-items:center; justify-content:center; gap:10px;
	background:#fff;
	color:var(--ink);
	font-weight:600;
	font-size:14.5px;
	padding:11px 18px;
	border-radius:10px;
	border:1.5px solid var(--line);
	transition:border-color .2s ease, box-shadow .2s ease;
}
.ourdr-cl-btn-google:hover{ border-color:#C7D0D3; box-shadow:0 1px 6px rgba(10,30,51,0.08); }

.ourdr-cl-otp-input{
	text-align:center;
	font-size:22px !important;
	font-weight:700;
	letter-spacing:0.5em;
	padding-left:18px !important;
}

.ourdr-cl-resend{
	font-size:13px; font-weight:400; color:var(--muted); text-align:center;
	margin:18px 0 0;
}
.ourdr-cl-linklike{
	background:none; padding:0; font-weight:600; color:var(--teal); font-size:13px; font-family:inherit;
}
.ourdr-cl-linklike:hover{ color:var(--navy); }
.ourdr-cl-linklike[disabled]{ color:var(--muted); cursor:not-allowed; }

.ourdr-cl-backlink{
	display:block;
	background:none; padding:0; margin:20px auto 0;
	font-size:13px; font-weight:600; color:var(--muted);
}
.ourdr-cl-backlink:hover{ color:var(--navy); }

/* ---------- responsive ---------- */
@media (max-width: 980px){
	.ourdr-cl-wrap{ grid-template-columns:1fr; }
	.ourdr-cl-panel{ padding:28px 22px 30px; }
	.ourdr-cl-loginside{ padding:32px 22px 44px; }
	.ourdr-cl-headline{ max-width:none; }
}
@media (max-width: 640px){
	.ourdr-cl-services{ grid-template-columns:1fr; }
	.ourdr-cl-hero{ padding-top:28px; }
	.ourdr-cl-form-area{ padding:24px 0; }
	.ourdr-cl-panel-footer{ justify-content:center; text-align:center; }
}
@media (max-width: 380px){
	.ourdr-cl-panel, .ourdr-cl-loginside{ padding-left:16px; padding-right:16px; }
	.ourdr-cl-tag{ font-size:10px; padding:5px 9px; }
}

@media (prefers-reduced-motion: reduce){
	.ourdr-cl-pulse-path{ animation:none; stroke-dashoffset:0; }
}

.ourdr-cl-wrap :focus-visible{ outline:2px solid var(--teal); outline-offset:2px; }