/*
 * Creator basic-information form manner.
 *
 * Shared by Community and Shop basic-information screens.
 * Field names, storage and validation remain owned by each feature.
 */

body.fanika-creator-basic-info {
  background: #eef6fc;
}

body.fanika-creator-basic-info .site-content,
body.fanika-creator-basic-info .entry-content {
  background: transparent;
}

body.fanika-creator-basic-info .pm-form-page {
  width: min(calc(100% - 32px), 860px);
  max-width: 860px !important;
  margin-inline: auto;
  padding: 16px 0 96px;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

body.fanika-creator-basic-info .pm-form-title {
  margin: 0;
  color: var(--fanika-ui-text, #1f2937);
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  line-height: 1.3;
}

body.fanika-creator-basic-info .pm-form-section {
  padding: 4px 20px;
  border: 1px solid #e5ebf2;
  border-radius: var(--fanika-ui-card-radius, 16px);
  background: #fff;
  box-shadow: 0 7px 22px rgba(50, 78, 108, 0.045);
}

body.fanika-creator-basic-info .pm-form-section .pm-form-field {
  padding-block: 18px;
  border-bottom-color: #edf0f4;
}

body.fanika-creator-basic-info .pm-form-field > label:first-child {
  color: #263449;
  font-size: 0.9rem;
  font-weight: 800;
}

body.fanika-creator-basic-info .pm-form-field input[type="text"],
body.fanika-creator-basic-info .pm-form-field input[type="url"],
body.fanika-creator-basic-info .pm-form-field textarea,
body.fanika-creator-basic-info .pm-form-field select {
  width: 100%;
  min-height: 44px;
  box-sizing: border-box;
  border: 1px solid #d8e1ea;
  border-radius: 10px;
  background: #fff;
  color: var(--fanika-ui-text, #1f2937);
  font: inherit;
}

body.fanika-creator-basic-info .pm-form-field input[type="text"],
body.fanika-creator-basic-info .pm-form-field input[type="url"],
body.fanika-creator-basic-info .pm-form-field select {
  padding: 9px 11px;
}

body.fanika-creator-basic-info .pm-form-field textarea {
  padding: 11px;
  resize: vertical;
}

body.fanika-creator-basic-info .pm-form-field input:focus,
body.fanika-creator-basic-info .pm-form-field textarea:focus,
body.fanika-creator-basic-info .pm-form-field select:focus {
  border-color: var(--fanika-ui-accent, #ec4899);
  outline: 3px solid rgba(236, 72, 153, 0.12);
  outline-offset: 1px;
}

body.fanika-creator-basic-info .pm-upload-zone {
  padding: 28px 18px;
  border-color: #cddbea;
  border-radius: 12px;
  background: #f8fbff;
}

body.fanika-creator-basic-info .pm-upload-zone:hover,
body.fanika-creator-basic-info .pm-upload-zone:focus-within {
  border-color: var(--fanika-ui-accent, #ec4899);
  background: #fff8fb;
}

body.fanika-creator-basic-info .pm-upload-zone i {
  color: var(--fanika-ui-accent, #ec4899);
}

body.fanika-creator-basic-info .pm-form-checkbox-group {
  gap: 8px;
}

body.fanika-creator-basic-info .pm-form-checkbox {
  min-height: 38px;
  padding: 7px 10px;
  border: 1px solid #e1e8ef;
  border-radius: 10px;
  background: #f8fbff;
}

body.fanika-creator-basic-info .pm-form-checkbox:has(input:checked) {
  border-color: rgba(236, 72, 153, 0.36);
  background: #fff5fa;
}

body.fanika-creator-basic-info .pm-form-actions {
  justify-content: flex-end;
  margin-top: 12px;
  padding: 14px 16px;
  border: 1px solid #e5ebf2;
  border-radius: var(--fanika-ui-card-radius, 16px);
  background: #fff;
  box-shadow: 0 7px 22px rgba(50, 78, 108, 0.04);
}

body.fanika-creator-basic-info .pm-form-submit-btn,
body.fanika-creator-basic-info .pm-form-preview-btn {
  min-height: 42px;
  padding: 10px 20px;
  border-radius: 999px;
  font-size: 0.9rem;
}

body.fanika-creator-basic-info .pm-form-submit-btn {
  border: 1px solid var(--fanika-ui-accent, #ec4899);
  background: var(--fanika-ui-accent, #ec4899);
  color: #fff;
}

body.fanika-creator-basic-info .pm-form-submit-btn:hover,
body.fanika-creator-basic-info .pm-form-submit-btn:focus-visible {
  background: #db2777;
}

body.fanika-creator-basic-info .pm-form-preview-btn {
  border: 1px solid #d8e1ea;
  background: #fff;
  color: #344054;
}

body.fanika-creator-basic-info .pm-form-preview-btn:hover,
body.fanika-creator-basic-info .pm-form-preview-btn:focus-visible {
  border-color: #b8c5d3;
  background: #f8fbff;
  color: #263449;
}

body.fanika-creator-basic-info .purimall-edit-message,
body.fanika-creator-basic-info .purimall-edit-error {
  margin-bottom: 12px;
  border-radius: 12px;
}

body.fanika-creator-basic-info .pm-form-back-link {
  margin: 0 0 12px;
  text-align: left;
}

body.fanika-creator-basic-info .pm-form-back-button {
  border: 1px solid #d8e1ea;
  border-radius: 999px;
  background: #fff;
  color: #344054;
}

body.fanika-creator-basic-info .pm-form-back-button i {
  color: var(--fanika-ui-accent, #ec4899);
}

body.fanika-creator-basic-info .pm-form-back-button:hover,
body.fanika-creator-basic-info .pm-form-back-button:focus-visible {
  background: #fff8fb;
  color: var(--fanika-ui-accent, #ec4899);
}

@media (max-width: 767px) {
  body.fanika-creator-basic-info .pm-form-page {
    width: min(calc(100% - 16px), 860px);
    max-width: none !important;
    padding-block: 10px 80px;
  }

  body.fanika-creator-basic-info .pm-form-section {
    padding: 2px 12px;
    border-radius: 14px;
  }

  body.fanika-creator-basic-info .pm-form-section .pm-form-field {
    padding-block: 14px;
  }

  body.fanika-creator-basic-info .pm-upload-zone {
    padding: 22px 12px;
  }

  body.fanika-creator-basic-info .pm-upload-zone p {
    font-size: 0.88rem;
  }

  body.fanika-creator-basic-info .pm-form-checkbox-group {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.fanika-creator-basic-info .pm-form-checkbox {
    min-width: 0;
  }

  body.fanika-creator-basic-info .pm-form-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 10px;
    padding: 10px;
    border-radius: 14px;
  }

  body.fanika-creator-basic-info .pm-form-submit-btn,
  body.fanika-creator-basic-info .pm-form-preview-btn {
    width: 100%;
    min-width: 0;
    padding-inline: 12px;
  }
}

@media (max-width: 359px) {
  body.fanika-creator-basic-info .pm-form-checkbox-group,
  body.fanika-creator-basic-info .pm-form-actions {
    grid-template-columns: 1fr;
  }
}


/* Accepted Profile-style media controls shared by Community / Shop basic information. */
body.fanika-creator-basic-info .fanika-profile-media-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}
body.fanika-creator-basic-info .fanika-profile-media-heading label {
  color: #263449;
  font-size: .9rem;
  font-weight: 800;
}
body.fanika-creator-basic-info .fanika-profile-media-heading small {
  color: #6b7280;
  font-size: .72rem;
  line-height: 1.5;
  text-align: right;
}
body.fanika-creator-basic-info .fanika-profile-media-control {
  display: flex;
  align-items: flex-end;
  gap: 14px;
}
body.fanika-creator-basic-info .fanika-profile-media-preview {
  overflow: hidden;
  display: grid;
  place-items: center;
  border: 1px solid #d9e5ef;
  background: #eef6fc;
  color: #53657a;
  cursor: pointer;
}
body.fanika-creator-basic-info .fanika-profile-media-preview--cover {
  width: min(100%, 860px);
  aspect-ratio: 3 / 1;
  border-radius: 10px;
}
body.fanika-creator-basic-info .fanika-profile-media-preview--icon {
  width: 112px;
  height: 112px;
  border-radius: 50%;
}
body.fanika-creator-basic-info .fanika-profile-media-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
body.fanika-creator-basic-info .fanika-profile-media-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 0 0 auto;
}
body.fanika-creator-basic-info .fanika-profile-media-change,
body.fanika-creator-basic-info .fanika-profile-media-remove {
  min-height: 36px;
  padding: 8px 13px;
  border-radius: 8px;
  font: inherit;
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
}
body.fanika-creator-basic-info .fanika-profile-media-change {
  border: 1px solid #9ca8ff;
  background: #fff;
  color: #6268d8;
}
body.fanika-creator-basic-info .fanika-profile-media-remove {
  border: 1px solid #e3e8ee;
  background: #fff;
  color: #7b8794;
}
@media (max-width: 640px) {
  body.fanika-creator-basic-info .fanika-profile-media-heading {
    display: block;
  }
  body.fanika-creator-basic-info .fanika-profile-media-heading small {
    display: block;
    margin-top: 4px;
    text-align: left;
  }
  body.fanika-creator-basic-info .fanika-profile-media-control {
    align-items: center;
  }
  body.fanika-creator-basic-info .fanika-profile-media-preview--cover {
    width: 100%;
  }
  body.fanika-creator-basic-info .fanika-profile-media-field--cover .fanika-profile-media-control {
    display: grid;
  }
  body.fanika-creator-basic-info .fanika-profile-media-actions {
    flex-direction: row;
    justify-content: flex-end;
  }
}


/* QA-085 — Match the upper MyPage profile composition on Community and Shop.
   Visual layout only: preserve the native inputs, upload events, draft and publish flows. */
body.fanika-creator-basic-info .fc-basic-info-form > .pm-form-section,
body.fanika-creator-basic-info .shop-basic-info-form > .pm-form-section {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  column-gap: 22px;
  row-gap: 0;
  padding: 0 20px 20px;
  overflow: visible;
}

/* Cover spans the entire card, preceding the identity fields. */
body.fanika-creator-basic-info .fc-basic-info-form > .pm-form-section > .fanika-profile-media-field--cover,
body.fanika-creator-basic-info .shop-basic-info-form > .pm-form-section > .fanika-profile-media-field--cover {
  order: -4;
  grid-column: 1 / -1;
  min-width: 0;
  padding: 0 0 10px;
  border: 0;
}
body.fanika-creator-basic-info .fc-basic-info-form .fanika-profile-media-field--cover .fanika-profile-media-heading,
body.fanika-creator-basic-info .shop-basic-info-form .fanika-profile-media-field--cover .fanika-profile-media-heading {
  display: none;
}
body.fanika-creator-basic-info .fc-basic-info-form .fanika-profile-media-field--cover .fanika-profile-media-control,
body.fanika-creator-basic-info .shop-basic-info-form .fanika-profile-media-field--cover .fanika-profile-media-control {
  position: relative;
  display: block;
}
body.fanika-creator-basic-info .fc-basic-info-form .fanika-profile-media-preview--cover,
body.fanika-creator-basic-info .shop-basic-info-form .fanika-profile-media-preview--cover {
  width: 100%;
  aspect-ratio: 3 / 1;
  border: 0;
  border-radius: 14px;
}
body.fanika-creator-basic-info .fc-basic-info-form .fanika-profile-media-field--cover .fanika-profile-media-actions,
body.fanika-creator-basic-info .shop-basic-info-form .fanika-profile-media-field--cover .fanika-profile-media-actions {
  position: absolute;
  right: 14px;
  bottom: 24px;
  flex-direction: row;
}
body.fanika-creator-basic-info .fc-basic-info-form .fanika-profile-media-field--cover .fanika-profile-media-change,
body.fanika-creator-basic-info .shop-basic-info-form .fanika-profile-media-field--cover .fanika-profile-media-change {
  color: #df2875;
  border-color: #f7b3d1;
}

/* Avatar overlaps the lower-left cover edge, like the reference profile screen. */
body.fanika-creator-basic-info .fc-basic-info-form > .pm-form-section > .fanika-profile-media-field--icon,
body.fanika-creator-basic-info .shop-basic-info-form > .pm-form-section > .fanika-profile-media-field--icon {
  order: -3;
  grid-column: 1;
  grid-row: 2;
  z-index: 1;
  margin: -68px 0 0;
  padding: 0;
  border: 0;
}
body.fanika-creator-basic-info .fc-basic-info-form .fanika-profile-media-field--icon .fanika-profile-media-heading,
body.fanika-creator-basic-info .shop-basic-info-form .fanika-profile-media-field--icon .fanika-profile-media-heading {
  display: none;
}
body.fanika-creator-basic-info .fc-basic-info-form .fanika-profile-media-control--icon,
body.fanika-creator-basic-info .shop-basic-info-form .fanika-profile-media-control--icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
body.fanika-creator-basic-info .fc-basic-info-form .fanika-profile-media-preview--icon,
body.fanika-creator-basic-info .shop-basic-info-form .fanika-profile-media-preview--icon {
  width: 112px;
  height: 112px;
  border: 5px solid #fff;
  box-shadow: 0 5px 18px rgba(24, 45, 79, .14);
}
body.fanika-creator-basic-info .fc-basic-info-form .fanika-profile-media-field--icon .fanika-profile-media-actions,
body.fanika-creator-basic-info .shop-basic-info-form .fanika-profile-media-field--icon .fanika-profile-media-actions {
  align-items: center;
}

/* The existing editable Community/Shop name takes the reference nickname position. */
body.fanika-creator-basic-info .fc-basic-info-form > .pm-form-section > .pm-form-field:first-child,
body.fanika-creator-basic-info .shop-basic-info-form > .pm-form-section > .pm-form-field:first-child {
  order: -2;
  grid-column: 2;
  grid-row: 2;
  align-self: center;
  min-width: 0;
  border: 0;
  padding: 12px 0;
}
body.fanika-creator-basic-info .fc-basic-info-form > .pm-form-section > .pm-form-field:has(> textarea),
body.fanika-creator-basic-info .shop-basic-info-form > .pm-form-section > .pm-form-field:has(> textarea) {
  order: -1;
  grid-column: 1 / -1;
  border: 0;
  padding-top: 14px;
}
body.fanika-creator-basic-info .fc-basic-info-form > .pm-form-section > .pm-form-field:has(> textarea) textarea,
body.fanika-creator-basic-info .shop-basic-info-form > .pm-form-section > .pm-form-field:has(> textarea) textarea {
  min-height: 126px;
}
body.fanika-creator-basic-info .fc-basic-info-form > .pm-form-section > .fc-basic-info-creator-note,
body.fanika-creator-basic-info .shop-basic-info-form > .pm-form-section > .pm-form-actions {
  grid-column: 1 / -1;
}
@media (max-width: 640px) {
  body.fanika-creator-basic-info .fc-basic-info-form > .pm-form-section,
  body.fanika-creator-basic-info .shop-basic-info-form > .pm-form-section {
    grid-template-columns: 94px minmax(0, 1fr);
    column-gap: 12px;
    padding: 0 12px 16px;
  }
  body.fanika-creator-basic-info .fc-basic-info-form > .pm-form-section > .fanika-profile-media-field--icon,
  body.fanika-creator-basic-info .shop-basic-info-form > .pm-form-section > .fanika-profile-media-field--icon {
    margin-top: -43px;
  }
  body.fanika-creator-basic-info .fc-basic-info-form .fanika-profile-media-preview--icon,
  body.fanika-creator-basic-info .shop-basic-info-form .fanika-profile-media-preview--icon {
    width: 82px;
    height: 82px;
  }
  body.fanika-creator-basic-info .fc-basic-info-form .fanika-profile-media-field--cover .fanika-profile-media-actions,
  body.fanika-creator-basic-info .shop-basic-info-form .fanika-profile-media-field--cover .fanika-profile-media-actions {
    right: 8px;
    bottom: 16px;
  }
  body.fanika-creator-basic-info .fc-basic-info-form .fanika-profile-media-field--cover .fanika-profile-media-change,
  body.fanika-creator-basic-info .shop-basic-info-form .fanika-profile-media-field--cover .fanika-profile-media-change {
    padding: 6px 9px;
    font-size: .7rem;
  }
}

/* Organizer selection above the original Community / Shop basic forms. */
.fanika-organizer-basic-picker{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:14px 0;padding:14px 16px;border:1px solid #e4eaf2;border-radius:12px;background:#fff}
.fanika-organizer-basic-picker label{font-weight:700}
.fanika-organizer-basic-picker select{min-height:44px;min-width:220px;max-width:100%;padding:8px 12px;border:1px solid #cad5e2;border-radius:8px;background:#fff}
.fanika-organizer-basic-picker button{min-height:40px;padding:8px 14px;border:1px solid #b9d4ed;border-radius:8px;background:#f2f9ff;color:#22577f;font-weight:700;cursor:pointer}
.fanika-organizer-basic-picker a{color:#22577f}