/* Password Form Styler - Front */
.pfs-wrap{
  min-height: 60vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px 20px;
  color: var(--pfs-text);
}

.pfs-form{
  width:100%;
  max-width: var(--pfs-width);
  background: var(--pfs-bg);
  border-radius: var(--pfs-radius);
  padding:32px 28px;
  text-align: var(--pfs-align);
}

.pfs-logo{ margin-bottom: 18px; }
.pfs-logo img{
  max-width: 220px;
  height:auto;
  display:block;
  margin: 0 auto;
}
.pfs-form[style*="--pfs-align:left"] .pfs-logo img{ margin-left:0; margin-right:auto; }
.pfs-form[style*="--pfs-align:right"] .pfs-logo img{ margin-left:auto; margin-right:0; }

.pfs-title{ margin:0 0 8px; color: var(--pfs-title-color, var(--pfs-text)); }
.pfs-text{ margin:0 0 18px; color: var(--pfs-intro-color, var(--pfs-text)); opacity:.85; }

.pfs-wrap .pfs-title {
    color: var(--pfs-title-color) !important;
}

.pfs-row{
  display:flex;
  gap:10px;
}

.pfs-pass{
  position:relative;
  flex:1;
}

.pfs-pass input{
  width:100%;
  padding:14px 44px 14px 16px;
  border:1px solid var(--pfs-input-border, rgba(0,0,0,.15));
  border-radius:10px;
  background: var(--pfs-input-bg, #ffffff);
  color: var(--pfs-input-text, var(--pfs-text));
}

.pfs-submit{
  padding:14px 18px;
  border: none !important;
  border-radius:10px;
  box-shadow: none !important;

  background-color: var(--pfs-btn-bg) !important;
  color: var(--pfs-btn-text) !important;

  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
}

.pfs-toggle{
  position:absolute;
  top:50%;
  right:10px;
  transform: translateY(-50%);
  width:34px;
  height:34px;

  border: none !important;
  border-radius:10px;
  box-shadow: none !important;
  outline: none;

  background: var(--pfs-toggle-bg, rgba(0,0,0,.06)) !important;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;

  padding: 0 !important;
  appearance:none;
  -webkit-appearance:none;
}

.pfs-toggle:focus{ outline: 2px solid rgba(0,0,0,.25); outline-offset: 2px; }

.pfs-toggle svg{ display:block; fill: var(--pfs-icon-color, rgba(0,0,0,.65)); }

/* Hide WordPress default message; we display our styled error box instead */
.pfs-form .post-password-message{ display:none; }

.pfs-error{
  margin:0 0 16px;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid rgba(220,38,38,.35);
  background: rgba(220,38,38,.08);
  color:#b91c1c;
  font-weight:600;
  text-align:left;
}

.pfs-form.pfs-shake{ animation: pfsShake .25s ease-in-out 0s 2; }

@keyframes pfsShake{
  0%{ transform: translateX(0); }
  25%{ transform: translateX(-6px); }
  50%{ transform: translateX(6px); }
  75%{ transform: translateX(-4px); }
  100%{ transform: translateX(0); }
}

@media (max-width: 480px){
  .pfs-row{ flex-direction: column; }
  .pfs-submit{ width:100%; }
}

/* v1.3.1 - Fix wpautop adding <p> around submit button */
.pfs-form .pfs-row > p{
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
}
.pfs-form .pfs-row > p > .pfs-submit{
  margin: 0 !important;
}