/*
 * NPA Forms — Unified stylesheet v3.4.0
 * All colour values are CSS custom properties set by npa_output_css_variables()
 * in neopeds-auth.php. Change colours via Settings > Form Styling.
 */

/* ── Alerts ──────────────────────────────────────────────────────────────── */
.npa-alert{padding:15px 20px;border-radius:8px;margin:20px 0;font-size:15px;font-weight:500;line-height:1.5}
.npa-alert--success{background:#f0fdf4;color:#166534;border:1px solid #bbf7d0}
.npa-alert--danger{background:#fef2f2;color:#991b1b;border:1px solid #fecaca}
.npa-alert--info{background:#eff6ff;color:#1e40af;border:1px solid #bfdbfe}
.npa-alert--warning{background:#fffbeb;color:#92400e;border:1px solid #fde68a}

/* ── Shared card container (login / forgot / reset / verify) ─────────────── */
.npa-login-container{background:#fff;border:1px solid #cbd5e1;border-radius:var(--npa-radius,12px);padding:35px;box-shadow:0 4px 6px -1px rgba(0,0,0,.05)}
.npa-login-container form p{display:flex;flex-direction:column;margin-bottom:20px}
.npa-login-container form label{font-size:14px;font-weight:600;color:#333;margin-bottom:8px}

/* ── All text/email/password inputs (card forms) ─────────────────────────── */
.npa-login-container form input[type=text],
.npa-login-container form input[type=email],
.npa-login-container form input[type=password],
.npa-form__input,
.npa-rp-input{
	font-size:15px!important;
	padding:12px 20px!important;
	border:1px solid #ddd!important;
	border-radius:var(--npa-radius,12px)!important;
	background:var(--npa-input-bg,#e6e6e6)!important;
	color:#000!important;
	width:100%!important;
	box-sizing:border-box!important;
	transition:border-color .2s,box-shadow .2s,background .2s!important}

.npa-login-container form input[type=text]:focus,
.npa-login-container form input[type=email]:focus,
.npa-login-container form input[type=password]:focus,
.npa-form__input:focus,
.npa-rp-input:focus{
	border-color:var(--npa-focus,#ffb606)!important;
	outline:none!important;
	background:#fff!important;
	box-shadow:0 0 0 3px color-mix(in srgb,var(--npa-focus,#ffb606) 20%,transparent)!important}

.npa-login-container ::placeholder,
.npa-form ::placeholder{color:#444!important;opacity:.5!important}

/* ── Submit buttons (all forms) ──────────────────────────────────────────── */
.npa-login-container form input[type=submit],
.npa-lostpass-btn,
.npa-rp-btn,
.npa-verify-btn,
.npa-form__submit-btn{
	display:inline-block;
	background:var(--npa-btn-bg,#ffcc53)!important;
	color:var(--npa-btn-text,#000)!important;
	font-weight:700!important;
	font-size:14px!important;
	letter-spacing:1px!important;
	border:none!important;
	border-radius:var(--npa-radius,12px)!important;
	padding:20px 32px!important;
	cursor:pointer!important;
	text-transform:uppercase!important;
	transition:background .2s,box-shadow .2s!important;
	text-decoration:none;
	line-height:1.2!important}

.npa-login-container form input[type=submit]{width:100%}
.npa-rp-btn{width:100%}
.npa-login-container form input[type=submit]:hover,
.npa-lostpass-btn:hover,
.npa-rp-btn:hover,
.npa-verify-btn:hover,
.npa-form__submit-btn:hover{
	background:var(--npa-btn-hover,#e09e00)!important;
	box-shadow:0 4px 12px rgba(0,0,0,.12)!important}

/* ── Disabled / loading state ─────────────────────────────────────────────── */
.npa-form--submitting input[type=submit],
.npa-form--submitting .npa-lostpass-btn,
.npa-form--submitting .npa-rp-btn,
.npa-form--submitting .npa-form__submit-btn{
	opacity:.6!important;pointer-events:none!important;cursor:wait!important}

/* ── Links ────────────────────────────────────────────────────────────────── */
.npa-login-meta{text-align:center;margin-top:15px}
.npa-login-meta a{color:var(--npa-link,#04294b);font-size:14px;font-weight:600;text-decoration:none}
.npa-login-meta a:hover{color:var(--npa-btn-bg,#ffcc53);text-decoration:underline}

/* ── Remember Me row ──────────────────────────────────────────────────────── */
.npa-login-container .forgetmenot{flex-direction:row!important;align-items:center;gap:8px}
.npa-login-container .forgetmenot input{margin:0}

/* ── Password eye toggle (login + reset + registration) ─────────────────── */
.npa-pw-wrap,.npa-form__password-wrapper{position:relative;display:flex;align-items:center;width:100%}
.npa-pw-wrap input,.npa-form__password-wrapper input{padding-right:50px!important}
.npa-rp-input.npa-pw-wrap-input{padding-right:50px!important}
.npa-eye-btn,.npa-form__toggle-pw-btn{
	position:absolute;right:16px;background:none!important;border:none!important;
	padding:0!important;margin:0!important;cursor:pointer;color:#666;
	display:flex;align-items:center;justify-content:center;
	height:100%;width:26px;z-index:2;box-shadow:none!important}
.npa-eye-btn svg,.npa-form__toggle-pw-btn svg{
	width:20px;height:20px;fill:none;stroke:currentColor;
	stroke-width:2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.npa-eye-btn:hover,.npa-form__toggle-pw-btn:hover{color:var(--npa-link,#04294b)!important}

/* ── Password strength meter ─────────────────────────────────────────────── */
.npa-pw-strength{margin-top:6px;font-size:13px;font-weight:600;display:none}
.npa-pw-strength.weak{color:#dc2626;display:block}
.npa-pw-strength.fair{color:#d97706;display:block}
.npa-pw-strength.good{color:#059669;display:block}

/* ── Captcha widget spacing ───────────────────────────────────────────────── */
.npa-captcha-widget{margin:12px 0 4px}

/* ── Unverified notice (login page) ──────────────────────────────────────── */
.npa-unverified-notice{background:#fffbeb;border:1px solid #fde68a;border-radius:var(--npa-radius,12px);padding:24px 28px;margin-bottom:16px}
.npa-unverified-notice h3{margin:0 0 10px;font-size:17px;color:#92400e;font-weight:700}
.npa-unverified-notice p{margin:0 0 16px;font-size:14px;color:#78350f;line-height:1.6}
.npa-resend-btn{
	display:inline-block;background:var(--npa-link,#04294b);color:#fff!important;
	font-weight:700;font-size:13px;border:none;border-radius:var(--npa-radius,10px);
	padding:12px 24px;cursor:pointer;text-decoration:none;letter-spacing:.3px;transition:background .2s}
.npa-resend-btn:hover{opacity:.85}

/* ── Secondary "Log In" link button (reset success) ──────────────────────── */
.npa-rp-login-btn{
	display:inline-block;background:var(--npa-link,#04294b);color:#fff!important;
	font-weight:700;font-size:14px;padding:14px 36px;border-radius:var(--npa-radius,12px);
	text-decoration:none;letter-spacing:.5px;transition:background .2s;margin-top:8px}
.npa-rp-login-btn:hover{opacity:.85!important}

/* ── Verify-email card ────────────────────────────────────────────────────── */
.npa-verify-wrap{max-width:540px;margin:40px auto;font-family:inherit;text-align:center;padding:0 20px}
.npa-verify-card{background:#fff;border:1px solid #e2e8f0;border-radius:var(--npa-radius,16px);padding:48px 40px;box-shadow:0 4px 20px rgba(0,0,0,.07)}
.npa-verify-icon{font-size:56px;margin:0 0 20px;display:block;line-height:1}
.npa-verify-title{font-size:26px;font-weight:700;color:var(--npa-link,#04294b);margin:0 0 16px}
.npa-verify-body{font-size:15px;color:#555;line-height:1.7;margin:0 0 28px}
.npa-verify-divider{margin:28px 0;border:none;border-top:1px solid #e8ecf0}
.npa-resend-form{display:inline}
.npa-resend-form input[type=email]{
	width:100%;box-sizing:border-box;padding:13px 18px;border:1px solid #ddd;
	border-radius:var(--npa-radius,12px);font-size:15px;
	background:var(--npa-input-bg,#f1f5f9);color:#000;margin-bottom:12px}
.npa-resend-form input[type=email]:focus{
	border-color:var(--npa-focus,#ffb606);outline:none;background:#fff;
	box-shadow:0 0 0 3px color-mix(in srgb,var(--npa-focus,#ffb606) 20%,transparent)}

/* ── Registration form (large grid layout) ───────────────────────────────── */
.npa-form-container{max-width:1200px;margin:30px auto;font-family:inherit;background:#fff}
.npa-form{padding:10px 0}
.npa-form__section-title{font-size:24px;color:var(--npa-link,#04294b);padding-bottom:8px;margin:40px 0 25px;font-weight:700;width:100%;display:block;border:none}
.npa-form__section-title:first-of-type{margin-top:0}
.npa-form__grid{display:grid;grid-template-columns:repeat(12,1fr);gap:24px 20px}
.npa-form__group{display:flex;flex-direction:column;position:relative}
.npa-form__group--col-3{grid-column:span 3}
.npa-form__group--col-4{grid-column:span 4}
.npa-form__group--col-5{grid-column:span 5}
.npa-form__group--col-6{grid-column:span 6}
.npa-form__group--col-12{grid-column:span 12}
.npa-form__label{font-size:15px;font-weight:600;color:#333;margin-bottom:8px;display:inline-block}
.npa-form__required{color:#d9534f;margin-left:4px}
.npa-form__input,
.npa-form .npa-form__select,
.npa-form__textarea,
.npa-form input[type=text],
.npa-form input[type=password],
.npa-form input[type=email],
.npa-form input[type=tel]{
	font-size:15px!important;padding:14px 20px!important;border:1px solid #d7dee6!important;
	border-radius:var(--npa-radius,12px)!important;
	background:var(--npa-input-bg,#e6e6e6)!important;
	color:#000!important;width:100%!important;height:auto!important;
	min-height:50px!important;box-sizing:border-box!important;
	transition:all .2s ease-in-out!important;box-shadow:none!important}
.npa-form .npa-form__select{
	appearance:none!important;-webkit-appearance:none!important;
	background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E")!important;
	background-repeat:no-repeat!important;background-position:right 20px center!important;
	background-size:16px!important;padding-right:45px!important}
.npa-form__textarea{border-radius:18px!important;resize:vertical;min-height:120px!important}
.npa-form__input:focus,
.npa-form__textarea:focus,
.npa-form input[type=text]:focus,
.npa-form input[type=password]:focus,
.npa-form input[type=email]:focus,
.npa-form input[type=tel]:focus{
	border-color:var(--npa-focus,#ffb606)!important;
	background:#fff!important;outline:none!important;
	box-shadow:0 0 0 3px color-mix(in srgb,var(--npa-focus,#ffb606) 20%,transparent)!important}
.npa-form__desc{font-size:13px;color:#666;margin-top:6px;line-height:1.4;padding-left:5px}
.npa-form__checkbox-label{font-size:14px;color:#444;line-height:1.6;cursor:pointer;display:flex;align-items:flex-start;gap:12px;margin-top:10px}
.npa-form__checkbox{margin-top:4px;transform:scale(1.2)}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media(max-width:768px){
	.npa-form__group--col-3,
	.npa-form__group--col-4,
	.npa-form__group--col-5,
	.npa-form__group--col-6{grid-column:span 12}
	.npa-form__grid-inner-address{grid-template-columns:1fr!important}
	.npa-login-container{padding:24px 18px}
	.npa-verify-card{padding:32px 20px}
}