/* =============================================
   Log in pop-up (#myModal in layouts/index.blade.php)
   Self-contained: the site tokens are repeated here because not every page loads home.css.
============================================= */
#myModal{
	--lm-navy:#0f3a5c; --lm-navy-dark:#0a2a45; --lm-blue:#4a86c9; --lm-tint:#f3f7fc;
	--lm-line:#e2e9f2; --lm-ink:#1a2a3a; --lm-muted:#5f6f80;
	--lm-sans:'Inter', 'Raleway', Arial, Helvetica, sans-serif;
	--lm-serif:'Playfair Display', Georgia, 'Times New Roman', serif;
	font-family:var(--lm-sans);
}
#myModal .modal-dialog{ width:440px; max-width:calc(100% - 24px); margin:60px auto 24px;}
#myModal .modal-content{ position:relative; border:0; border-radius:18px; background:#fff; box-shadow:0 24px 60px rgba(15,58,92,.3);}
#myModal .modal-body{ padding:38px 36px 30px;}
#myModal [hidden]{ display:none !important;}
/* main.css floats paragraphs, headings and labels */
#myModal p, #myModal h3, #myModal label{ float:none; text-transform:none;}

/* the close button: the site default is white and absolute outside the pop-up */
#myModal .close{
	position:absolute; top:12px; right:12px; z-index:2; width:34px; height:34px; margin:0; padding:0;
	border:0; border-radius:50%; background:var(--lm-tint); color:var(--lm-navy); opacity:1;
	font-size:22px; line-height:34px; text-align:center; text-shadow:none;
}
#myModal .close:hover, #myModal .close:focus{ background:var(--lm-line); color:var(--lm-navy-dark); opacity:1;}

#myModal .lm-title{ margin:0 0 6px; font:600 28px/1.2 var(--lm-serif); color:var(--lm-navy);}
#myModal .lm-sub{ margin:0 0 22px; font:400 14.5px/1.6 var(--lm-sans); color:var(--lm-muted);}

#myModal .lm-field{ margin:0 0 16px;}
#myModal .lm-field label{ display:block; margin:0 0 6px; font:600 13px/1.3 var(--lm-sans); color:var(--lm-ink);}
#myModal .lm-field input{
	display:block; width:100%; height:48px; margin:0; padding:0 14px;
	border:1px solid #cfd9e6; border-radius:10px; background:#fff; color:var(--lm-ink);
	font:500 15px/1.4 var(--lm-sans); box-shadow:none;
}
#myModal .lm-field input:focus{ outline:0; border-color:var(--lm-blue); box-shadow:0 0 0 3px rgba(74,134,201,.2);}
#myModal .lm-field input.error{ border-color:#d64545; background:#fff8f8;}
#myModal .lm-field label.error{ margin:6px 0 0; font:500 12.5px/1.4 var(--lm-sans); color:#c03535;}
#myModal .lm-pass{ position:relative;}
#myModal .lm-pass input{ padding-right:48px;}
#myModal .lm-eye{
	position:absolute; top:7px; right:6px; width:34px; height:34px; padding:0;
	border:0; border-radius:8px; background:none; color:var(--lm-muted); cursor:pointer;
}
#myModal .lm-eye:hover{ background:var(--lm-tint); color:var(--lm-navy);}
#myModal .lm-row{ display:flex; justify-content:flex-end; margin:-4px 0 18px;}
#myModal .lm-forgot, #myModal .lm-alt a{ color:var(--lm-blue); font:600 13px/1.4 var(--lm-sans); text-decoration:none;}
#myModal .lm-forgot:hover, #myModal .lm-alt a:hover{ text-decoration:underline;}

#myModal .lm-btn{
	display:flex; align-items:center; justify-content:center; width:100%; min-height:50px; margin:0; padding:0 22px;
	border:0; border-radius:999px; background:var(--lm-navy); color:#fff;
	font:600 15px/1 var(--lm-sans); letter-spacing:.02em; text-transform:none; cursor:pointer;
	box-shadow:0 8px 18px rgba(15,58,92,.22); transition:background .2s;
}
#myModal .lm-btn:hover{ background:var(--lm-navy-dark);}
#myModal .lm-btn:disabled{ opacity:.65; cursor:wait;}
#myModal .lm-btn:focus-visible, #myModal .lm-eye:focus-visible, #myModal .close:focus-visible, #myModal a:focus-visible{ outline:3px solid rgba(74,134,201,.5); outline-offset:2px;}

#myModal .lm-result{ margin:14px 0 0; font:500 14px/1.5 var(--lm-sans); color:var(--lm-muted);}
#myModal .lm-result:empty{ display:none;}
#myModal .lm-result.is-ok{ padding:12px 14px; border-radius:10px; background:#eaf7ef; color:#1f7a45;}
#myModal .lm-result.is-bad{ padding:12px 14px; border-radius:10px; background:#fdecec; color:#b03030;}
#myModal .lm-alt{ margin:22px 0 0; text-align:center; font:400 14px/1.5 var(--lm-sans); color:var(--lm-muted);}

@media (max-width:575px){
	#myModal .modal-dialog{ margin-top:24px;}
	#myModal .modal-body{ padding:34px 22px 24px;}
	#myModal .lm-title{ font-size:24px;}
	#myModal .lm-field input{ font-size:16px;}   /* stops iOS zooming into the field */
}