/* =============================================
   Forgot password pop-up (#forgot_password_modal in layouts/index.blade.php)
   One pop-up for the whole site: the /login page and the sign in pop-up both open it.
   Self-contained: tokens are repeated because not every page loads home.css.
============================================= */
#forgot_password_modal{
	--fpw-navy:#0f3a5c; --fpw-navy-dark:#0a2a45; --fpw-blue:#4a86c9; --fpw-tint:#f3f7fc;
	--fpw-line:#e2e9f2; --fpw-ink:#1a2a3a; --fpw-muted:#5f6f80; --fpw-gold:#c9a45c;
	--fpw-sans:'Inter', 'Raleway', Arial, Helvetica, sans-serif;
	--fpw-serif:'Playfair Display', Georgia, 'Times New Roman', serif;
	font-family:var(--fpw-sans);
}
#forgot_password_modal .modal-dialog{ width:440px; max-width:calc(100% - 24px); margin:8vh auto 24px;}
#forgot_password_modal .modal-content{
	position:relative; overflow:hidden; border:0; border-radius:20px; background:#fff; padding:0;
	box-shadow:0 24px 60px rgba(15,58,92,.3);
}
#forgot_password_modal .modal-content:before{ content:''; display:block; height:6px; background:linear-gradient(90deg,#0f3a5c,#4a86c9 60%,#c9a45c);}
#forgot_password_modal [hidden]{ display:none !important;}
/* main.css floats paragraphs, headings and labels */
#forgot_password_modal p, #forgot_password_modal h3, #forgot_password_modal label{ float:none; text-transform:none;}

/* close button: main.css moves every button.close up on hover/focus, so every state is set here */
#forgot_password_modal button.close.fpw-close,
#forgot_password_modal button.close.fpw-close:hover,
#forgot_password_modal button.close.fpw-close:focus{
	position:absolute !important; top:18px; right:16px; z-index:3; float:none; width:34px; height:34px; margin:0 !important; padding:0;
	border:0; border-radius:50%; background:var(--fpw-tint); color:var(--fpw-navy); opacity:1; text-shadow:none; cursor:pointer;
}
#forgot_password_modal button.close.fpw-close:hover,
#forgot_password_modal button.close.fpw-close:focus{ background:var(--fpw-line);}
#forgot_password_modal button.close.fpw-close span{ display:block; font:400 22px/32px Arial, sans-serif; text-align:center;}

#forgot_password_modal .fpw-body{ padding:30px 34px 28px; text-align:center;}
#forgot_password_modal .fpw-icon{
	width:68px; height:68px; margin:0 auto 16px; border-radius:50%; display:flex; align-items:center; justify-content:center;
	font-size:28px; color:var(--fpw-navy); background:linear-gradient(160deg,#f4f8fd,#e1ecf8); box-shadow:0 0 0 8px rgba(74,134,201,.1);
}
#forgot_password_modal .fpw-icon.is-ok{ color:#1f7a45; background:linear-gradient(160deg,#f1fbf5,#d9f1e3); box-shadow:0 0 0 8px rgba(31,122,69,.1);}
#forgot_password_modal .fpw-title{ margin:0 0 8px; font:600 25px/1.25 var(--fpw-serif); color:var(--fpw-navy);}
#forgot_password_modal .fpw-sub{ margin:0 0 22px; font:400 14.5px/1.6 var(--fpw-sans); color:var(--fpw-muted);}
#forgot_password_modal .fpw-sub strong{ color:var(--fpw-ink); overflow-wrap:anywhere;}

#forgot_password_modal .fpw-field{ margin:0 0 16px; text-align:left;}
#forgot_password_modal .fpw-field label{ display:block; margin:0 0 6px; font:600 13px/1.3 var(--fpw-sans); color:var(--fpw-ink);}
#forgot_password_modal .fpw-input{ position:relative;}
#forgot_password_modal .fpw-input i{ position:absolute; left:15px; top:50%; transform:translateY(-50%); color:#8392a2; font-size:16px; pointer-events:none;}
#forgot_password_modal .fpw-input:focus-within i{ color:var(--fpw-navy);}
#forgot_password_modal .fpw-input input{
	display:block; width:100%; height:48px; margin:0; padding:0 14px 0 44px;
	border:1px solid #cfd9e6; border-radius:10px; background:#fff; color:var(--fpw-ink);
	font:500 15px/1.4 var(--fpw-sans); box-shadow:none; transition:border-color .2s, box-shadow .2s;
}
#forgot_password_modal .fpw-input input:focus{ outline:0; border-color:var(--fpw-blue); box-shadow:0 0 0 3px rgba(74,134,201,.2);}
#forgot_password_modal .fpw-input input.error{ border-color:#d64545; background:#fff8f8;}
#forgot_password_modal label.error{ display:block; margin:6px 0 0; font:500 12.5px/1.4 var(--fpw-sans); color:#c03535;}

#forgot_password_modal .fpw-btn{
	display:flex; align-items:center; justify-content:center; width:100%; min-height:52px; margin:0; padding:0 22px;
	border:0; border-radius:999px; background:var(--fpw-navy); color:#fff;
	font:600 15px/1 var(--fpw-sans); letter-spacing:.02em; text-transform:none; cursor:pointer;
	box-shadow:0 8px 18px rgba(15,58,92,.22); transition:background .2s;
}
#forgot_password_modal .fpw-btn i{ margin-right:8px;}
#forgot_password_modal .fpw-btn:hover{ background:var(--fpw-navy-dark);}
#forgot_password_modal .fpw-btn:disabled{ opacity:.7; cursor:wait;}
#forgot_password_modal .fpw-btn-light{ background:var(--fpw-tint); color:var(--fpw-navy); box-shadow:none;}
#forgot_password_modal .fpw-btn-light:hover{ background:var(--fpw-line);}
#forgot_password_modal .fpw-spin{
	display:inline-block; width:15px; height:15px; margin-right:8px; box-sizing:border-box;
	border:2px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; animation:fpwSpin .7s linear infinite;
}
@keyframes fpwSpin{ to{ transform:rotate(360deg);} }
#forgot_password_modal form.is-busy input{ opacity:.7; pointer-events:none;}

#forgot_password_modal .fpw-result{ margin:14px 0 0; font:500 14px/1.5 var(--fpw-sans); color:var(--fpw-muted); text-align:left;}
#forgot_password_modal .fpw-result:empty{ display:none;}
#forgot_password_modal .fpw-result.is-bad{ padding:12px 14px; border-radius:10px; background:#fdecec; color:#b03030;}
#forgot_password_modal .fpw-closing{ margin:12px 0 0; font:400 12.5px/1.5 var(--fpw-sans); color:var(--fpw-muted);}
#forgot_password_modal .fpw-back{ margin:18px 0 0; font:600 13.5px/1.4 var(--fpw-sans);}
#forgot_password_modal .fpw-back a{ color:var(--fpw-blue); text-decoration:none;}
#forgot_password_modal .fpw-back a:hover{ text-decoration:underline;}
#forgot_password_modal .fpw-back i{ margin-right:6px;}
#forgot_password_modal .fpw-note{ margin:16px 0 0; padding-top:14px; border-top:1px solid var(--fpw-line); font:400 12.5px/1.6 var(--fpw-sans); color:var(--fpw-muted);}
#forgot_password_modal a:focus-visible, #forgot_password_modal .fpw-btn:focus-visible, #forgot_password_modal .fpw-close:focus-visible{ outline:3px solid rgba(74,134,201,.5); outline-offset:2px;}

@media (max-width:575px){
	#forgot_password_modal .modal-dialog{ margin:12px auto;}
	#forgot_password_modal .fpw-body{ padding:26px 20px 22px;}
	#forgot_password_modal .fpw-title{ font-size:22px;}
	#forgot_password_modal .fpw-input input{ font-size:16px;}   /* stops iOS zooming into the field */
}
@media (prefers-reduced-motion: reduce){ #forgot_password_modal .fpw-spin{ animation-duration:2s;} }