/* Simple Frontend Profile v2 styles */

/* Container */
.sfp-wrap {
  max-width: 720px;
  margin: 0 auto 30px;
  padding: 18px;
  box-sizing: border-box;
  background: transparent; /* transparent as requested */
  color: #222;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Success / Error boxes */
.sfp-success {
  background: #e6ffef;
  border: 1px solid #a6e6b6;
  color: #065e2b;
  padding: 10px 14px;
  margin-bottom: 12px;
  border-radius: 4px;
}

.sfp-error-box {
  background: #ffecef;
  border: 1px solid #f2a3ad;
  color: #8b1b23;
  padding: 10px 14px;
  margin-bottom: 12px;
  border-radius: 4px;
}

/* avatar row */
.sfp-avatar-row {
  display:flex;
  align-items:center;
  gap: 20px;
  margin-bottom: 14px;
}

.sfp-avatar {
  width: 96px;
  height: 96px;
  border-radius: 6px;
  overflow: hidden;
  background: #f3f3f3;
  display:flex;
  align-items:center;
  justify-content:center;
}

.sfp-avatar img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* placeholder avatar square */
.sfp-avatar--placeholder {
  background: linear-gradient(180deg,#f6f6f6,#e9e9e9);
}

/* avatar upload area (to the right of image) */
.sfp-avatar-upload {
  flex:1;
}

/* Field rows */
.sfp-field {
  margin-bottom: 12px;
}

.sfp-label {
  display:block;
  margin-bottom:6px;
  font-weight:600;
  color:#555
}

/* Required asterisk */
.sfp-req {
  color: #d33;
  margin-left:6px;
  font-weight:700;
}

/* Inputs: white background, square corners */
.sfp-field input[type="text"],
.sfp-field input[type="url"],
.sfp-field input[type="email"],
.sfp-field textarea {
  width:100%;
  padding:5px 5px 5px 5px
  border:1px solid #ddd;
  background: #ffffff;
  border-radius: 0; /* square corners */
  box-sizing:border-box;
  font-size:15px;
}

/* Keep file input visually compact */
.sfp-avatar-upload input[type="file"] {
  display:block;
  margin-top:6px;
}

/* Errors */
.sfp-field .sfp-field-error {
  color: #b21d2a;
  font-size:13px;
  margin-top:6px;
}
.sfp-invalid {
  border-color: #b21d2a !important;
  box-shadow: none;
}

/* Button */
.sfp-btn {
  background: #3ba1da;
  color:#fff;
  padding:10px 18px;
  border: none;
  border-radius: 6px;
  cursor:pointer;
  font-weight:600;
}

/* Make button square-ish corners? You asked for square corners for fields only; keeping soft corners for button */
.sfp-btn:focus { outline: none; }

/* Help text */
.sfp-help {
  font-size:13px;
  color:#666;
  margin-top:6px;
}

/* Responsive */
@media (max-width:600px) {
  .sfp-avatar-row { flex-direction:column; align-items:flex-start; gap:8px; }
  .sfp-avatar { width:84px; height:84px; }
}