/**
 * MC Wear — Affiliate registration form (Affiliate For WooCommerce / StoreApps).
 *
 * Markup is plugin-rendered (.afwc_reg_form_wrapper > #afwc_registration_form),
 * so everything is scoped to that wrapper. Reuses the branded My Account system:
 * hairline borders, zero radius, uppercase utility labels, full-width black CTA.
 *
 * One deliberate departure: field labels here are full sentences (not "Email
 * Address"-style nouns), so they are set in sentence case at body size — an
 * uppercase + letter-spaced treatment is unreadable on a 2-line question.
 */

.afwc_reg_form_wrapper {
  --mcw-font-heading: "Ivy Mode", "Cormorant Garamond", Georgia, serif;
  --mcw-font-body: "Mona Sans Expanded", "Mona Sans", system-ui, sans-serif;
  --mcw-border: #d9d9d9;
  --mcw-label: #717680;
  --mcw-placeholder: #9a9aa1;
  --mcw-black: #000000;

  display: block;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: var(--mcw-font-body);
  color: var(--mcw-black);
}

#afwc_registration_form {
  display: flex;
  flex-wrap: wrap;
  column-gap: 16px;
  row-gap: 10px;
  margin: 0;
}

/* Plugin hides name/password fields on this configuration; keep them gone even
   if their (visible) <label> would otherwise render. */
.afwc_reg_form_wrapper .afwc_hide_form_field { display: none !important; }

/* --- Field rows --- */
.afwc_reg_field_wrapper {
  flex: 1 1 100%;
  min-width: 0;
  margin: 0;
}
.afwc_reg_field_wrapper.afwc_is_half { flex: 1 1 calc(50% - 8px); }

/* --- Labels --- */
.afwc_reg_form_wrapper label {
  display: block;
  margin: 0 0 20px !important;
  font-family: var(--mcw-font-body);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0.2px;
  color: var(--mcw-black);
}
.afwc_reg_form_wrapper label.afwc_required::after {
  content: " *";
  color: var(--mcw-label);
  font-weight: 400;
}

/* --- Inputs + textarea --- */
.afwc_reg_form_wrapper .afwc_reg_form_field:not([type="checkbox"]) {
  width: 100% !important;
  box-sizing: border-box;
  padding: 14px 16px;
  border: 1px solid var(--mcw-border);
  border-radius: 0;
  background: #fff;
  font-family: var(--mcw-font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--mcw-black);
  transition: border-color 0.15s ease;
}
.afwc_reg_form_wrapper textarea.afwc_reg_form_field {
  min-height: 150px;
  resize: vertical;
  line-height: 1.6;
}
.afwc_reg_form_wrapper .afwc_reg_form_field::placeholder {
  color: var(--mcw-placeholder);
  opacity: 1;
}
/* Single, clean focus indicator: border goes black (visible for mouse + keyboard). */
.afwc_reg_form_wrapper .afwc_reg_form_field:focus,
.afwc_reg_form_wrapper .afwc_reg_form_field:focus-visible {
  outline: none;
  border-color: var(--mcw-black);
}

/* Read-only email — pre-filled from the account; show it's locked, not editable. */
.afwc_reg_form_wrapper input[readonly].afwc_reg_form_field {
  background: #fafafa;
  color: var(--mcw-label);
  border-color: var(--mcw-border);
  cursor: default;
}
.afwc_reg_form_wrapper input[readonly].afwc_reg_form_field:focus {
  border-color: var(--mcw-border);
}

/* --- Terms checkbox --- */
.afwc_reg_terms label {
  display: flex !important;
  align-items: center !important;
  gap: 10px;
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0;
  cursor: pointer;
}
.afwc_reg_terms input[type="checkbox"].afwc_reg_form_field {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  flex: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--mcw-black);
  border-radius: 0;
  background: #fff;
  position: relative;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.afwc_reg_terms input[type="checkbox"].afwc_reg_form_field:checked {
  background: var(--mcw-black);
}
.afwc_reg_terms input[type="checkbox"].afwc_reg_form_field:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}
.afwc_reg_terms input[type="checkbox"].afwc_reg_form_field:focus-visible {
  outline: 2px solid var(--mcw-black);
  outline-offset: 2px;
}

/* --- Submit --- */
.afwc_reg_form_wrapper .afwc_registration_form_submit {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  padding: 17px 24px;
  text-align: center;
  border: 0;
  border-radius: 0;
  background: var(--mcw-black);
  color: #fff;
  font-family: var(--mcw-font-body);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.afwc_reg_form_wrapper .afwc_registration_form_submit:hover {
  opacity: 0.85;
  background: var(--mcw-black);
}
.afwc_reg_form_wrapper .afwc_registration_form_submit:focus-visible {
  outline: 2px solid var(--mcw-black);
  outline-offset: 3px;
}
.afwc_reg_form_wrapper .afwc_registration_form_submit:disabled {
  opacity: 0.5;
  cursor: default;
}

/* Submit row holds the button + spinner stacked. */
.afwc_reg_form_wrapper .afwc_reg_loader {
  margin-top: 14px;
  text-align: center;
}
.afwc_reg_form_wrapper .afwc_reg_loader img {
  width: 22px;
  height: 22px;
}

/* --- Status / validation message --- */
.afwc_reg_form_wrapper .afwc_reg_message:not(:empty) {
  flex: 1 1 100%;
  box-sizing: border-box;
  margin: 4px 0 0;
  padding: 14px 18px;
  border: 1px solid var(--mcw-border);
  border-left: 3px solid var(--mcw-black);
  background: #fafafa;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--mcw-black);
}
.afwc_reg_form_wrapper .afwc_reg_message.afwc_error,
.afwc_reg_form_wrapper .afwc_reg_message.error {
  border-left-color: #c81e1e;
}
.afwc_reg_form_wrapper .afwc_reg_message a {
  color: var(--mcw-black);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------------------------------------------------------------------------
 * Already-registered notice. The shortcode swaps the whole form for a bare
 * .afwc-reg-form-msg block (hyphen class, no form wrapper), so it gets its own
 * scope. Branded as a centered card: hairline frame, single top-rule accent.
 * ------------------------------------------------------------------------- */
.afwc-reg-form-msg {
  --mcw-font-body: "Mona Sans Expanded", "Mona Sans", system-ui, sans-serif;
  --mcw-border: #d9d9d9;
  --mcw-label: #717680;
  --mcw-black: #000000;

  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 18px 22px;
  border: 1px solid var(--mcw-border);
  border-left: 3px solid var(--mcw-black);
  background: #fff;
  text-align: left;
  font-family: var(--mcw-font-body);
  font-size: 13.5px;
  line-height: 1.6;
  letter-spacing: 0.1px;
  color: var(--mcw-black);
  font-size: 16px !important;
}
.afwc-reg-form-msg a {
  color: var(--mcw-black);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  transition: opacity 0.15s ease;
}
.afwc-reg-form-msg a:hover { opacity: 0.6; }
.afwc-reg-form-msg a:focus-visible {
  outline: 2px solid var(--mcw-black);
  outline-offset: 2px;
}

/* --- Responsive --- */
@media (max-width: 768px) {
  .afwc_reg_form_wrapper textarea.afwc_reg_form_field { min-height: 130px; }
  #afwc_registration_form { row-gap: 12px; }
}

@media (max-width: 560px) {
  /* Half fields stack. */
  .afwc_reg_field_wrapper.afwc_is_half { flex: 1 1 100% !important; }

  .afwc_reg_form_wrapper label { margin-bottom: 12px !important; }
  .afwc_reg_form_wrapper .afwc_reg_form_field:not([type="checkbox"]) { padding: 12px 14px; font-size: 16px; } /* 16px = no iOS zoom on focus */
  .afwc_reg_form_wrapper textarea.afwc_reg_form_field { min-height: 120px; }
  .afwc_reg_form_wrapper .afwc_registration_form_submit { padding: 15px 20px; }
  .afwc_reg_message:not(:empty) { padding: 12px 14px; }
  .afwc-reg-form-msg { padding: 16px 18px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .afwc_reg_form_wrapper .afwc_reg_form_field,
  .afwc_reg_form_wrapper .afwc_registration_form_submit,
  .afwc_reg_terms input[type="checkbox"].afwc_reg_form_field {
    transition: none;
  }
}