/**
 * Password form — base front-end styles.
 *
 * @package wpepp
 * @since   2.0.0
 */

/* --- Base outer wrapper --------------------------------------------------- */

.wpepp-password-form {
max-width: 600px;
margin: 2em auto;
padding: 2em;
border-radius: 8px;
text-align: center;
border: 1px solid #e0e0e0;
background: #fff;
box-sizing: border-box;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

/* --- Logo ------------------------------------------------------------------ */

.wpepp-form-logo {
text-align: center;
margin-bottom: 1.2em;
}

.wpepp-form-logo img {
display: inline-block;
max-width: 100%;
}

.wpepp-form-logo-text {
display: inline-block;
font-weight: 700;
line-height: 1.3;
}

/* --- Top / Bottom text ----------------------------------------------------- */

.wpepp-password-top-text,
.wpepp-password-bottom-text {
margin-bottom: 1.5em;
width: 100%;
}

.wpepp-password-top-text h3,
.wpepp-password-bottom-text h3 {
margin: 0 0 0.5em;
font-size: 1.3em;
font-weight: 700;
line-height: 1.3;
}

.wpepp-password-top-text p,
.wpepp-password-top-text .wpepp-top-content,
.wpepp-password-bottom-text p,
.wpepp-password-bottom-text .wpepp-bottom-content {
margin: 0;
font-size: 0.92em;
line-height: 1.65;
color: #555;
}

/* --- Form inner wrapper (shared) ------------------------------------------ */

.wpepp-password-form-inner {
display: flex;
flex-wrap: wrap;
gap: 12px;
justify-content: center;
align-items: flex-end;
margin: 1.25em 0 0;
padding: 0;
}

form.wpepp-password-form-inner p {
margin: 0;
}

.wpepp-password-form-inner label {
display: block;
font-weight: 600;
margin-bottom: 5px;
font-size: 14px;
text-align: left;
}

/* --- Password input (shared) ----------------------------------------------- */

.wpepp-password-form input[type="password"] {
padding: 0 14px;
border: 1.5px solid #b0b0b0;
border-radius: 6px;
font-size: 14px;
min-width: 200px;
box-sizing: border-box;
height: 46px;
line-height: 46px;
background: #fff;
color: #1e1e1e;
transition: border-color 0.2s, box-shadow 0.2s;
}

.wpepp-password-form input[type="password"]:focus {
border-color: #2271b1;
box-shadow: 0 0 0 2px rgba(34, 113, 177, 0.18);
outline: none;
}

.wpepp-password-form input[type="password"]::placeholder {
color: #aaa;
}

/* --- Submit button (shared) ------------------------------------------------ */

.wpepp-submit input[type="submit"] {
display: inline-flex;
align-items: center;
justify-content: center;
height: 46px;
padding: 0 24px;
background: #2271b1;
color: #fff;
border: none;
border-radius: 6px;
font-size: 14px;
font-weight: 700;
cursor: pointer;
transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
white-space: nowrap;
letter-spacing: 0.02em;
line-height: 1;
}

.wpepp-submit input[type="submit"]:hover {
background: #135e96;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(34, 113, 177, 0.3);
}

/* --- Error message --------------------------------------------------------- */

.wpepp-error-message {
color: #c62828;
font-size: 13px;
padding: 10px 14px;
background: #fce4ec;
border-left: 3px solid #d63638;
border-radius: 4px;
margin-bottom: 1em;
text-align: left;
}

.wpepp-error-message.wpepp-error-bottom {
margin-top: 1em;
margin-bottom: 0;
}

/* --- Social icons ---------------------------------------------------------- */

.wpepp-social-icons {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
margin: 1em 0;
}

.wpepp-social-icons.wpepp-social-left   { justify-content: flex-start; }
.wpepp-social-icons.wpepp-social-center { justify-content: center; }
.wpepp-social-icons.wpepp-social-right  { justify-content: flex-end; }

.wpepp-social-icons a.wpepp-social-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 0;
color: #fff;
text-decoration: none;
transition: background 0.3s, opacity 0.3s;
}

.wpepp-social-icons a.wpepp-social-icon:hover { opacity: 0.85; }

.wpepp-icon-shape-circle  a.wpepp-social-icon { border-radius: 50%; width: 40px; height: 40px; }
.wpepp-icon-shape-quarter a.wpepp-social-icon { border-radius: 30%; }

.wpepp-social-icons a.wpepp-social-facebook  { background: #4862A3; }
.wpepp-social-icons a.wpepp-social-facebook:hover  { background: #375192; }
.wpepp-social-icons a.wpepp-social-twitter   { background: #000; }
.wpepp-social-icons a.wpepp-social-twitter:hover   { background: #2a2a2a; }
.wpepp-social-icons a.wpepp-social-youtube   { background: #E02F2F; }
.wpepp-social-icons a.wpepp-social-youtube:hover   { background: #c52323; }
.wpepp-social-icons a.wpepp-social-instagram { background: #000; }
.wpepp-social-icons a.wpepp-social-instagram:hover { background: #312a2a; }
.wpepp-social-icons a.wpepp-social-linkedin  { background: #007BB5; }
.wpepp-social-icons a.wpepp-social-linkedin:hover  { background: #0671a4; }
.wpepp-social-icons a.wpepp-social-pinterest { background: #B31217; }
.wpepp-social-icons a.wpepp-social-pinterest:hover { background: #a91015; }
.wpepp-social-icons a.wpepp-social-tumblr    { background: #001935; }
.wpepp-social-icons a.wpepp-social-tumblr:hover    { background: #021428; }
.wpepp-social-icons a.wpepp-social-custom    { background: #25ACE3; }
.wpepp-social-icons a.wpepp-social-custom:hover    { background: #229bcc; }

.wpepp-social-icons svg   { width: 18px; height: 18px; fill: currentColor; }
.wpepp-social-icons a svg { padding: 0; }
.wpepp-social-icons.wpepp-social-middle { margin: 5px 0; }

/* --- Bottom text alignment ------------------------------------------------- */

.wpepp-password-bottom-text.wpepp-text-left,
.wpepp-password-bottom-text.wpepp-text-left p   { text-align: left; }
.wpepp-password-bottom-text.wpepp-text-center,
.wpepp-password-bottom-text.wpepp-text-center p { text-align: center; }
.wpepp-password-bottom-text.wpepp-text-right,
.wpepp-password-bottom-text.wpepp-text-right p  { text-align: right; }


/* =============================================================================
   Style 1 - Vertical Card (default)
   ============================================================================= */

.wpepp-style-one {
border: 1px solid #e0e0e0;
background: #fff;
box-shadow: 0 2px 16px rgba(0, 0, 0, 0.07);
}

.wpepp-style-one .wpepp-password-form-inner {
flex-direction: column;
background: #f4f4f5;
border-radius: 10px;
padding: 32px;
margin: 1.25em auto 0;
max-width: 480px;
gap: 14px;
align-items: stretch;
}

.wpepp-style-one .wpepp-password-form-inner p {
width: 100%;
margin: 0;
}

.wpepp-style-one .wpepp-password-form-inner input[type="password"] {
width: 100%;
height: 48px;
padding: 0 14px;
border-radius: 6px;
font-size: 15px;
border: 1.5px solid #d0d0d0;
background: #ffffff;
box-sizing: border-box;
line-height: 48px;
transition: border-color 0.2s, box-shadow 0.2s;
}

.wpepp-style-one .wpepp-password-form-inner input[type="password"]:focus {
border-color: #2271b1;
box-shadow: 0 0 0 2px rgba(34, 113, 177, 0.15);
outline: none;
}

.wpepp-style-one .wpepp-submit input[type="submit"] {
width: 100%;
height: 48px;
padding: 0 20px;
border-radius: 6px;
font-size: 15px;
font-weight: 700;
letter-spacing: 0.02em;
box-sizing: border-box;
line-height: 1;
transform: none;
}

.wpepp-style-one .wpepp-submit input[type="submit"]:hover {
transform: translateY(-1px);
}


/* =============================================================================
   Style 2 - Inline Row
   ============================================================================= */

.wpepp-style-two {
background: #f0f0f2;
border: none;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
border-radius: 12px;
max-width: 600px;
padding: 2em 2em 1.5em;
}

.wpepp-style-two .wpepp-password-form-inner {
flex-direction: row;
flex-wrap: nowrap;
align-items: stretch;
gap: 0;
padding: 0;
margin: 1em 0 0;
}

.wpepp-style-two .wpepp-password-form-inner > p:first-child {
flex: 1 1 auto;
margin: 0;
display: flex;
}

.wpepp-style-two .wpepp-password-form-inner > .wpepp-submit {
flex: 0 0 auto;
margin: 0;
display: flex;
}

.wpepp-style-two .wpepp-password-form-inner input[type="password"] {
width: 100%;
height: 48px;
padding: 0 16px;
box-sizing: border-box;
border-radius: 8px 0 0 8px;
border: 1.5px solid #c8c8cc;
border-right: none;
margin: 0;
font-size: 15px;
background: #ffffff;
line-height: 48px;
transition: border-color 0.2s;
}

.wpepp-style-two .wpepp-password-form-inner input[type="password"]:focus {
border-color: #2271b1;
outline: none;
box-shadow: none;
}

.wpepp-style-two .wpepp-submit input[type="submit"] {
height: 48px;
padding: 0 28px;
min-width: 110px;
white-space: nowrap;
border-radius: 0 8px 8px 0;
box-sizing: border-box;
margin: 0;
font-size: 15px;
transform: none;
box-shadow: none;
}

.wpepp-style-two .wpepp-submit input[type="submit"]:hover {
transform: none;
box-shadow: none;
}


/* =============================================================================
   Style 3 - Dark Glass Card
   ============================================================================= */

html body .wpepp-style-three.wpepp-password-form {
background: #42276A;
border: none;
box-shadow: rgba(17, 12, 46, 0.2) 0 24px 80px 0;
color: #fff;
}

html body .wpepp-style-three h1,
html body .wpepp-style-three h2,
html body .wpepp-style-three h3,
html body .wpepp-style-three h4,
html body .wpepp-style-three span,
html body .wpepp-style-three p,
html body .wpepp-style-three label {
color: #fff;
}

html body .wpepp-style-three .wpepp-password-top-text p,
html body .wpepp-style-three .wpepp-password-top-text .wpepp-top-content,
html body .wpepp-style-three .wpepp-password-bottom-text p,
html body .wpepp-style-three .wpepp-password-bottom-text .wpepp-bottom-content {
color: rgba(255, 255, 255, 0.72);
}

html body .wpepp-style-three form.wpepp-password-form-inner,
html body .wpepp-password-form.wpepp-style-three form.wpepp-password-form-inner {
flex-direction: column;
max-width: 480px;
margin: 16px auto 0;
padding: 32px;
background: rgba(255, 255, 255, 0.1) !important;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 14px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
gap: 14px;
align-items: stretch;
}

.wpepp-style-three .wpepp-password-form-inner p {
width: 100%;
margin: 0;
}

.wpepp-style-three .wpepp-password-form-inner input[type="password"] {
width: 100%;
height: 48px;
padding: 0 14px;
box-sizing: border-box;
border-radius: 8px;
font-size: 15px;
color: #1a1a1a;
background: rgba(255, 255, 255, 0.92);
border: none;
transition: box-shadow 0.2s;
}

.wpepp-style-three .wpepp-password-form-inner input[type="password"]:focus {
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.6);
outline: none;
}

.wpepp-style-three .wpepp-password-form-inner input[type="password"]::placeholder {
color: #888;
}

.wpepp-style-three .wpepp-submit input[type="submit"] {
width: 100%;
height: 48px;
padding: 0 20px;
box-sizing: border-box;
border-radius: 8px;
font-size: 15px;
line-height: 1;
font-weight: 700;
letter-spacing: 0.02em;
}

.wpepp-style-three .wpepp-submit input[type="submit"]:hover {
transform: translateY(-1px);
}


/* =============================================================================
   Style 4 - Full-Width Hero
   ============================================================================= */

.wpepp-style-four {
max-width: 100%;
min-height: 60vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-radius: 0;
padding: 60px 20px;
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
border: none;
position: relative;
overflow: hidden;
}

.wpepp-style-four::before,
.wpepp-style-four::after {
content: '';
position: absolute;
border-radius: 50%;
opacity: 0.07;
background: #fff;
pointer-events: none;
}

.wpepp-style-four::before {
width: 550px;
height: 550px;
top: -220px;
right: -120px;
}

.wpepp-style-four::after {
width: 380px;
height: 380px;
bottom: -160px;
left: -100px;
}

html body .wpepp-style-four.wpepp-password-form {
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
border: none;
}

html body .wpepp-style-four h1,
html body .wpepp-style-four h2,
html body .wpepp-style-four h3,
html body .wpepp-style-four h4,
html body .wpepp-style-four p,
html body .wpepp-style-four span,
html body .wpepp-style-four label {
color: #fff;
}

html body .wpepp-style-four .wpepp-password-top-text p,
html body .wpepp-style-four .wpepp-password-top-text .wpepp-top-content,
html body .wpepp-style-four .wpepp-password-bottom-text p,
html body .wpepp-style-four .wpepp-password-bottom-text .wpepp-bottom-content {
color: rgba(255, 255, 255, 0.75);
}

.wpepp-style-four .wpepp-password-top-text {
max-width: 640px;
margin-bottom: 2em;
position: relative;
z-index: 1;
text-align: center;
}

.wpepp-style-four .wpepp-password-top-text h3 {
font-size: 2em;
font-weight: 800;
margin: 0 0 0.5em;
line-height: 1.25;
letter-spacing: -0.01em;
}

.wpepp-style-four .wpepp-password-top-text p,
.wpepp-style-four .wpepp-password-top-text .wpepp-top-content {
font-size: 1.05em;
margin: 0;
}

.wpepp-style-four .wpepp-password-form-inner,
html body .wpepp-style-four form.wpepp-password-form-inner,
html body .wpepp-password-form.wpepp-style-four form.wpepp-password-form-inner {
flex-direction: column;
width: 100%;
max-width: 520px;
background: rgba(255, 255, 255, 0.08) !important;
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 18px;
padding: 40px;
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
position: relative;
z-index: 1;
gap: 14px;
align-items: stretch;
}

.wpepp-style-four .wpepp-password-form-inner p {
width: 100%;
margin: 0;
}

.wpepp-style-four .wpepp-password-form-inner input[type="password"] {
width: 100%;
height: 50px;
padding: 0 16px;
box-sizing: border-box;
border-radius: 10px;
font-size: 15px;
color: #1a1a2e;
background: rgba(255, 255, 255, 0.95);
border: none;
outline: none;
transition: box-shadow 0.2s;
}

.wpepp-style-four .wpepp-password-form-inner input[type="password"]:focus {
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.55);
}

.wpepp-style-four .wpepp-password-form-inner input[type="password"]::placeholder {
color: #999;
}

.wpepp-style-four .wpepp-submit input[type="submit"] {
width: 100%;
height: 50px;
padding: 0 20px;
box-sizing: border-box;
border-radius: 10px;
font-size: 15px;
font-weight: 700;
letter-spacing: 0.03em;
border: none;
cursor: pointer;
line-height: 1;
}

.wpepp-style-four .wpepp-submit input[type="submit"]:hover {
transform: translateY(-2px);
}