/* Admin layout helpers */
.pfs-color-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 16px;
  max-width: 760px;
}
.pfs-color-field{ display:block; }
.pfs-field-label{
  display:block !important;
  font-weight:600;
  margin: 0 0 6px 0;
  color: #1d2327;
}

.pfs-align{
  display:flex;
  gap:16px;
  align-items:center;
}

/* Ensure colorpicker doesn't hide our labels */
.pfs-color-field .wp-picker-container{ display:block; }

/* Live preview */
.pfs-preview-wrap{
  --pfs-bg:#ffffff;
  --pfs-text:#111111;
  --pfs-title-color:#111111;
  --pfs-intro-color:#111111;
  --pfs-input-bg:#ffffff;
  --pfs-input-text:#111111;
  --pfs-input-border:#d0d0d0;
  --pfs-toggle-bg:#f0f0f0;
  --pfs-icon-color:#111111;
  --pfs-btn-bg:#111111;
  --pfs-btn-text:#ffffff;
  --pfs-radius:18px;
  --pfs-width:520px;
  --pfs-align:center;

  padding: 24px;
  background:#f6f7f7;
  border:1px solid #dcdcde;
  border-radius:10px;
  max-width: 980px;

  display:flex;
  justify-content:center; /* centered preview */
}

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

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

.pfs-preview-title{ margin:0 0 8px; color: var(--pfs-title-color); }
.pfs-preview-text{ margin:0 0 16px; color: var(--pfs-intro-color); opacity:.85; white-space: pre-line; }

.pfs-preview-row{ display:flex; gap:10px; }
.pfs-preview-pass{ position:relative; flex:1; }
.pfs-preview-pass input{
  width:100%;
  padding: 10px 40px 10px 12px;
  border:1px solid var(--pfs-input-border);
  border-radius:10px;
  background: var(--pfs-input-bg);
  color: var(--pfs-input-text);
}
.pfs-preview-eye{
  position:absolute;
  right:8px;
  top:50%;
  transform: translateY(-50%);
  width:32px;height:32px;
  border:0;border-radius:10px;
  background: var(--pfs-toggle-bg);
}

.pfs-preview-eye{ color: var(--pfs-icon-color); }
.pfs-preview-btn{
  padding: 10px 14px;
  border:0;border-radius:10px;
  background: var(--pfs-btn-bg);
  color: var(--pfs-btn-text);
}


/* Preview width accuracy: include padding in width */
#pfs-preview,
.pfs-preview-wrap,
.pfs-preview-wrap *{
  box-sizing: border-box;
}