/* ============================================================
   Cooper Surgical DAM — Auth screens
   Covers: Register, Submitted, Login, Forgot Password, Set New Password
   Layout: two-column split (brand panel left / form panel right)
   ============================================================ */

/* ── Full-page reset ── */
html,
body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

.dam-auth-page {
  background: var(--cs-paper-2);
}

/* ── Two-column shell — mobile first ── */
.dam-auth-shell {
  display: grid;
  grid-template-columns: 1fr;
  /* single column on mobile */
  min-height: 100vh;
}

@media (min-width: 901px) {
  .dam-auth-shell {
    grid-template-columns: 520px 1fr;
  }
}

/* ── LEFT — brand panel (hidden on mobile, visible at desktop) ── */
.dam-auth-brand {
  display: none;
  /* hidden by default on mobile */
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, #f6f9fd 0%, #e8eef8 60%, #d8e3f2 100%);
  padding: 48px 56px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 90px;
}

@media (min-width: 901px) {
  .dam-auth-brand {
    display: flex;
  }
}

.dam-auth-brand__splotch {
  position: absolute;
  right: -120px;
  bottom: -160px;
  width: 680px;
  height: auto;
  opacity: 0.55;
  mix-blend-mode: multiply;
  pointer-events: none;
  user-select: none;
}

.dam-auth-brand__logo,
.dam-auth-brand__logo img,
.dam-auth-brand__logo svg {
  height: 34px;
  width: auto;
  display: block;
}

.dam-auth-brand__tagline {
  margin-top: 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--cs-blue-deep);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.dam-auth-brand__pitch {
  position: relative;
  /*margin-top: 52px;*/
}

.dam-auth-brand__pitch h1 {
  font-size: 38px;
  line-height: 1.15;
  color: var(--cs-blue-deep);
}

.dam-auth-brand__pitch p {
  font-size: 17px;
  color: var(--cs-ink-2);
  margin-top: 14px;
  line-height: 1.6;
}

.dam-auth-brand__bullets {
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dam-auth-brand__bullets li {
  display: flex;
  gap: 10px;
  font-size: 16px;
  color: var(--cs-ink);
  align-items: flex-start;
}

.dam-auth-brand__bullets .cs-bullet-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--cs-blue);
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

/* ── RIGHT — form panel — mobile first ── */
.dam-auth-form-panel {
  background: white;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 24px;
  /* mobile */
  position: relative;
}

@media (min-width: 901px) {
  .dam-auth-form-panel {
    padding: 64px;
  }
}

/* Slim rainbow accent bar at top */
.dam-auth-form-panel::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 6px;
  background: linear-gradient(90deg, var(--cs-blue-deep) 0%, var(--cs-blue) 35%, var(--cs-aqua) 50%, var(--cs-magenta) 100%);
}

.dam-auth-form-inner {
  width: 100%;
  max-width: 100%;
  /* full-width on mobile */
}

@media (min-width: 901px) {
  .dam-auth-form-inner {
    max-width: 480px;
  }
}

.dam-auth-form-inner .dam-auth-heading {
  margin-bottom: 28px;
}

.dam-auth-form-inner .dam-auth-heading h2 {
  font-size: 31px;
}

.dam-auth-form-inner .dam-auth-heading p {
  font-size: 17px;
  color: var(--cs-ink-2);
  margin-top: 8px;
  line-height: 1.5;
}

/* ── Form layout helpers ── */
.dam-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.dam-form-row {
  display: grid;
  gap: 12px;
}

.dam-form-row-2 {
  grid-template-columns: 1fr 1fr;
}

.dam-form-footer {
  border-top: 1px solid var(--cs-line);
  padding-top: 18px;
  margin-top: 6px;
  font-size: 16px;
  color: var(--cs-ink-2);
  text-align: center;
}

/* ── Select wrapper (custom arrow) ── */
.cs-select-wrap {
  position: relative;
}

.cs-select-wrap select.cs-input {
  padding-right: 38px;
}

.cs-select-wrap .cs-select-arrow {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--cs-ink-3);
  pointer-events: none;
}

/* ── Password visibility toggle ── */
.dam-input-wrap {
  position: relative;
}

.dam-input-wrap .cs-input {
  padding-right: 44px;
}

.dam-pw-toggle {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--cs-ink-3);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.dam-pw-toggle:hover {
  background: var(--cs-paper-2);
  color: var(--cs-ink);
}

.dam-pw-toggle.is-active {
  color: var(--cs-blue);
}

.dam-pw-toggle.is-active:hover {
  background: color-mix(in srgb, var(--cs-blue) 10%, transparent);
}

/* ── Terms checkbox row ── */
.dam-terms-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 15px;
  color: var(--cs-ink-2);
  margin-top: 4px;
}

.dam-terms-row input {
  margin-top: 2px;
}

/* ── Registration submitted — step tracker ── */
.dam-step-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 14px;
}

.dam-step-list li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.dam-step-icon {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
}

.dam-step-icon--done {
  background: var(--cs-emerald);
  color: white;
}

.dam-step-icon--active {
  background: var(--cs-blue);
  color: white;
}

.dam-step-icon--pending {
  background: var(--cs-paper-3);
  color: var(--cs-ink-3);
  border: 1.5px dashed var(--cs-line-2);
}

.dam-step-title {
  font-size: 17px;
  font-weight: 600;
}

.dam-step-meta {
  font-size: 14px;
  color: var(--cs-ink-3);
  margin-top: 2px;
}

/* ── Success icon (submitted screen) ── */
.dam-success-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--cs-emerald-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ── Strength requirements list ── */
.dam-pw-reqs {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dam-pw-req {
  display: flex;
  gap: 8px;
  font-size: 15px;
  align-items: center;
  transition: color var(--cs-transition);
  list-style: none;
}

.dam-pw-req::marker {
  content: '';
}

.dam-pw-req--met {
  color: var(--cs-emerald);
  font-weight: 600;
}

.dam-pw-req--unmet {
  color: var(--cs-ink-3);
  font-weight: 400;
}

.dam-pw-req-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── WP form error messages ── */
.dam-form-errors {
  background: var(--cs-magenta-soft);
  color: #882a55;
  border: 1px solid #e4a0bb;
  border-radius: var(--cs-r-md);
  padding: 12px 16px;
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 28px;
}

.dam-form-errors ul {
  margin: 6px 0 0 16px;
  padding: 0;
}

.dam-form-errors li {
  margin-bottom: 3px;
}

/* ── Auth-page modal (Contact Admin) ─────────────────────── */
.dam-modal {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.dam-modal[hidden] {
  display: none;
}

.dam-modal__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 20, 40, 0.5);
  backdrop-filter: blur(2px);
}

.dam-modal__dialog {
  position: relative;
  z-index: 1;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 16px 48px rgba(10, 20, 40, 0.18);
  width: 100%;
  max-width: 520px;
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
}

.dam-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid #e2e5ea;
}

.dam-modal__title {
  font-size: 18px;
  font-weight: 600;
  color: #1f1f1f;
  margin: 0;
}

.dam-modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 6px;
  color: #6f6f6f;
  flex-shrink: 0;
}

.dam-modal__close:hover {
  background: #f6f7f9;
}

.dam-modal__body {
  padding: 20px 24px 24px;
}

/* Gravity Forms inside auth modal — mirror .cs-input / .cs-btn-primary */
.dam-modal__body .gform_wrapper {
  margin: 0;
}

/* Override GF default row-gap */
.dam-modal__body .gform_wrapper .gform_fields {
  row-gap: 12px !important;
  column-gap: 12px !important;
}

.dam-modal__body .gform_wrapper .gfield {
  margin-bottom: 0;
}

.dam-modal__body .gform_wrapper .gfield_label {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: #1f1f1f;
  margin-bottom: 6px;
}

.dam-modal__body .gform_wrapper .gfield_required {
  color: #c93f7c;
}

.dam-modal__body .gform_wrapper input[type="text"],
.dam-modal__body .gform_wrapper input[type="email"],
.dam-modal__body .gform_wrapper input[type="tel"],
.dam-modal__body .gform_wrapper input[type="url"],
.dam-modal__body .gform_wrapper input[type="number"],
.dam-modal__body .gform_wrapper input[type="password"],
.dam-modal__body .gform_wrapper select {
  width: 100% !important;
  min-height: 48px !important;
  padding: 11px 16px !important;
  border: 1px solid #cdd1d8 !important;
  border-radius: 999px !important;
  background: #fff !important;
  font-family: inherit !important;
  font-size: 17px !important;
  color: #1f1f1f !important;
  outline: none !important;
  box-shadow: none !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
  box-sizing: border-box !important;
}

.dam-modal__body .gform_wrapper textarea {
  width: 100% !important;
  min-height: 48px !important;
  padding: 11px 16px !important;
  border: 1px solid #cdd1d8 !important;
  border-radius: 12px !important;
  background: #fff !important;
  font-family: inherit !important;
  font-size: 17px !important;
  color: #1f1f1f !important;
  outline: none !important;
  box-shadow: none !important;
  resize: vertical !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
  box-sizing: border-box !important;
}

.dam-modal__body .gform_wrapper input[type="text"]:focus,
.dam-modal__body .gform_wrapper input[type="email"]:focus,
.dam-modal__body .gform_wrapper input[type="tel"]:focus,
.dam-modal__body .gform_wrapper input[type="password"]:focus,
.dam-modal__body .gform_wrapper select:focus,
.dam-modal__body .gform_wrapper textarea:focus {
  border-color: #2e5fb5;
  box-shadow: 0 0 0 3px #e6eef8;
}

.dam-modal__body .gform_wrapper .validation_message {
  font-size: 14px;
  color: #c93f7c;
  margin-top: 4px;
}

.dam-modal__body .gform_wrapper .gfield_description {
  font-size: 14px;
  color: #6f6f6f;
  margin-top: 4px;
}

.dam-modal__body .gform_footer,
.dam-modal__body .gform_page_footer {
  margin-top: 12px;
}

.dam-modal__body .gform_wrapper .gform_submit_button,
.dam-modal__body .gform_wrapper input[type="submit"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px 20px !important;
  border-radius: 999px !important;
  border: 1px solid transparent !important;
  background: #2e5fb5 !important;
  color: #fff !important;
  font-family: inherit !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: background 0.15s ease !important;
  box-shadow: 0 1px 2px rgba(30, 63, 138, 0.3) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  width: auto !important;
}

.dam-modal__body .gform_wrapper .gform_submit_button:hover,
.dam-modal__body .gform_wrapper input[type="submit"]:hover {
  background: #1e3f8a !important;
  opacity: 1 !important;
}

.dam-modal__body .gform_confirmation_message {
  text-align: center;
  padding: 24px 0;
  color: #1f1f1f;
  font-size: 17px;
}