/* Unified Coxy Signup + Coxy Events onboarding add-on v1.4.3 UI polish */

/* Use the unused left/right space on desktop and mid-size phones/tablets. */
.signup-login-shell {
  padding: 8px !important;
}

.signup-login-dialog {
  width: min(760px, calc(100vw - 16px)) !important;
  max-width: 760px !important;
  max-height: calc(100dvh - 16px) !important;
  padding: 14px 18px 16px !important;
  overflow: auto !important;
}

.signup-login-title {
  margin-bottom: 9px !important;
  font-size: clamp(20px, 3.2vw, 25px) !important;
}

.signup-login-status:empty {
  display: none !important;
}

.signup-login-form.ceo-unified-form {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 7px 12px !important;
  align-items: start;
}

/* The profile container does not consume an extra row; its children join the
 * same grid as the existing Wallet fields. */
.ceo-profile-section {
  display: contents;
}

.ceo-profile-field,
.ceo-primary-field,
.ceo-pin-field,
.ceo-confirm-pin-field {
  min-width: 0;
}

.ceo-profile-field .signup-login-input,
.ceo-primary-field .signup-login-input,
.ceo-pin-field .signup-login-input,
.ceo-confirm-pin-field .signup-login-input {
  min-height: 38px !important;
  padding: 7px 9px !important;
  font-size: 13px !important;
}

.ceo-profile-field .signup-login-label,
.ceo-primary-field .signup-login-label,
.ceo-pin-field .signup-login-label,
.ceo-confirm-pin-field .signup-login-label {
  font-size: 11px !important;
}

/* Logical two-column order.
 * 1. Name
 * 2. Mobile + Country
 * 3. Primary Email + backup Secondary Email
 * 4. Short Bio / Designation across the full row
 * 5. Generated PIN + Confirm PIN
 * 6. Verify/Continue + Cancel
 */
.ceo-FirstName { order: 10; }
.ceo-LastName { order: 11; }
.ceo-MobileNumber { order: 20; }
.ceo-country { order: 21; }
.ceo-primary-field { order: 30; }
.ceo-SecondaryEmail { order: 31; }
.ceo-short_bio {
  order: 40;
  grid-column: 1 / -1;
}
.ceo-short_bio textarea {
  width: 100% !important;
  min-height: 58px !important;
  max-height: 96px;
  resize: vertical;
  line-height: 1.35;
}
.ceo-pin-field { order: 50; }
.ceo-confirm-pin-field { order: 51; }
.ceo-pin-note {
  order: 55;
  grid-column: 1 / -1;
  align-self: center;
  padding: 2px 8px;
  margin: 0 !important;
  font-size: 10px !important;
  line-height: 1.25 !important;
  text-align: center;
}

.ceo-inline-status {
  order: 60;
  grid-column: 1 / -1;
  margin: 1px 0 0;
  padding: 6px 9px;
  border-radius: 7px;
  background: #fff7d6;
  color: #6b5b12;
  font-size: 10px;
  line-height: 1.3;
  text-align: left;
}
.ceo-inline-status.ok { background: #e7f7ed; color: #146c43; }
.ceo-inline-status.error { background: #fdeaea; color: #9b1c1c; }

.ceo-actions {
  order: 70;
  grid-column: 1 / -1;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin-top: 3px !important;
}
.ceo-actions .signup-login-button {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 40px !important;
}
.ceo-help {
  order: 80;
  grid-column: 1 / -1;
  margin-top: 1px !important;
}

.ceo-existing-wallet {
  order: 65;
  grid-column: 1 / -1;
  display: inline-block;
  margin-top: 5px;
  color: #165d9b;
  font-weight: 700;
}

.ceo-verified-lock input:not([type="hidden"]) {
  background: #f4f4e8 !important;
}

/* v1.3.2: all editable/read-only form controls use the same clean white fill. */
.signup-login-form.ceo-unified-form .signup-login-input,
.signup-login-form.ceo-unified-form textarea.signup-login-input,
.signup-login-form.ceo-unified-form input.signup-login-input[readonly],
.signup-login-form.ceo-unified-form .ceo-verified-lock input:not([type="hidden"]),
.signup-login-form.ceo-unified-form .ceo-verified-lock textarea {
  background: #fff !important;
  background-color: #fff !important;
}

/* Keep the two final actions visually identical.  Cancel behaves like the
 * Verify/Continue button rather than a secondary grey control. */
.ceo-actions .signup-login-button,
.ceo-actions .signup-login-create,
.ceo-actions .signup-login-cancel {
  min-height: 40px !important;
  padding: 8px 14px !important;
  border: 0 !important;
  border-radius: 5px !important;
  background: #f28c00 !important;
  color: #fff !important;
  font: inherit !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  display: grid !important;
  place-items: center !important;
}
.ceo-actions .signup-login-button:hover,
.ceo-actions .signup-login-button:focus-visible {
  background: #dc7d00 !important;
  filter: none;
}

/* Verification page. */
.ceo-verify-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 20px;
  background: #eef7f2;
  font-family: Arial, sans-serif;
}
.ceo-verify-card {
  width: min(460px, 100%);
  padding: 24px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
}
.ceo-link-btn {
  display: inline-block;
  margin-top: 12px;
  padding: 10px 18px;
  border-radius: 999px;
  background: #f3f2d7;
  color: #444;
  text-decoration: none;
  font-weight: 700;
}

/* Keep two columns down to 401px so the form is materially shorter on devices
 * like the 497px-wide screenshot.  Very narrow phones stack safely. */
@media (max-width: 400px) {
  .signup-login-shell { padding: 6px !important; }
  .signup-login-dialog {
    width: calc(100vw - 12px) !important;
    max-width: none !important;
    padding: 12px 12px 14px !important;
  }
  .signup-login-form.ceo-unified-form {
    grid-template-columns: 1fr !important;
    gap: 7px !important;
  }
  .ceo-primary-field,
  .ceo-pin-field,
  .ceo-confirm-pin-field,
  .ceo-FirstName,
  .ceo-LastName,
  .ceo-MobileNumber,
  .ceo-country,
  .ceo-SecondaryEmail,
  .ceo-short_bio,
  .ceo-pin-note,
  .ceo-inline-status,
  .ceo-actions,
  .ceo-help {
    grid-column: 1 !important;
  }
  .ceo-pin-note { order: 55; }
}

@media (max-width: 330px) {
  .ceo-actions {
    grid-template-columns: 1fr !important;
  }
}

/* v1.3.7: two-stage signup. The first screen contains profile + email
 * verification only. PIN controls are rendered only after the email link has
 * reopened the verified signup page. */
.signup-login-form.ceo-unified-form[hidden],
.ceo-pin-field[hidden],
.ceo-confirm-pin-field[hidden],
.ceo-pin-note[hidden],
.ceo-stage-panel[hidden] {
  display: none !important;
}

.ceo-stage-panel {
  width: min(560px, 100%);
  margin: 6px auto 2px;
  padding: 24px 22px;
  border: 1px solid #dedcc1;
  border-radius: 12px;
  background: #fff;
  color: #555;
  text-align: center;
  box-shadow: 0 5px 18px rgba(0, 0, 0, .08);
}
.ceo-stage-panel.ok {
  border-color: #b9ddc8;
  background: #f7fff9;
}
.ceo-stage-panel.error {
  border-color: #efc2c2;
  background: #fff8f8;
}
.ceo-stage-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  margin: 0 auto 10px;
  border-radius: 50%;
  background: #f3f2d7;
  color: #7060e8;
  font-size: 22px;
  font-weight: 800;
}
.ceo-stage-panel.ok .ceo-stage-icon {
  background: #e7f7ed;
  color: #146c43;
}
.ceo-stage-panel.error .ceo-stage-icon {
  background: #fdeaea;
  color: #9b1c1c;
}
.ceo-stage-title {
  margin: 0 0 8px;
  color: #555;
  font-size: 19px;
  line-height: 1.2;
}
.ceo-stage-copy {
  margin: 0;
  color: #666;
  font-size: 12px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

/* On the verification-only screen the action row should feel like the end of
 * the account form, not the start of Wallet creation. */
html.ceo-preverify .ceo-help {
  color: #6d6d6d !important;
}

@media (max-width: 400px) {
  .ceo-stage-panel {
    padding: 20px 15px;
  }
  .ceo-stage-title {
    font-size: 18px;
  }
}

/* v1.3.9 existing-wallet recovery state */
.ceo-existing-wallet-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: min(100%, 360px);
  margin: 18px auto 0;
  text-decoration: none;
}
.ceo-existing-wallet-action[hidden] { display: none !important; }

/* v1.4.0: same-wallet PIN recovery is always available beside replacement. */
.ceo-pin-recovery-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: min(100%, 420px);
  margin: 12px auto 0;
  color: #1f5f91;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ceo-pin-recovery-inline {
  order: 85;
  grid-column: 1 / -1;
  justify-self: center;
  width: auto;
  max-width: 100%;
  margin: 5px auto 0;
}

/* v1.4.3: lock the profile pairs into predictable columns. This prevents
 * auxiliary links or hidden Wallet controls from shifting First/Last Name,
 * Mobile/Country, or Primary/Secondary Email out of alignment. */
.ceo-FirstName { grid-column: 1; }
.ceo-LastName { grid-column: 2; }
.ceo-MobileNumber { grid-column: 1; }
.ceo-country { grid-column: 2; }
.ceo-primary-field { grid-column: 1; }
.ceo-SecondaryEmail { grid-column: 2; }

.signup-login-form.ceo-unified-form .ceo-profile-field,
.signup-login-form.ceo-unified-form .ceo-primary-field {
  width: 100%;
  box-sizing: border-box;
}
.signup-login-form.ceo-unified-form .ceo-profile-field .signup-login-input,
.signup-login-form.ceo-unified-form .ceo-primary-field .signup-login-input {
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Orange is the Coxy signup action colour on this page. */
.signup-login-form.ceo-unified-form .ceo-actions .signup-login-button,
.signup-login-form.ceo-unified-form .ceo-actions .signup-login-create,
.signup-login-form.ceo-unified-form .ceo-actions .signup-login-cancel {
  background: #f28c00 !important;
  border-color: #f28c00 !important;
  color: #fff !important;
}
.signup-login-form.ceo-unified-form .ceo-actions .signup-login-button:hover,
.signup-login-form.ceo-unified-form .ceo-actions .signup-login-button:focus-visible,
.signup-login-form.ceo-unified-form .ceo-actions .signup-login-create:hover,
.signup-login-form.ceo-unified-form .ceo-actions .signup-login-cancel:hover {
  background: #dc7d00 !important;
  border-color: #dc7d00 !important;
}

@media (max-width: 520px) {
  .ceo-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .ceo-actions > :nth-child(3) {
    grid-column: 1 / -1;
  }
}