/*
 * CloudIngest — Employer Signup Page
 * Extends my-style.css (already loaded). Signup-specific overrides only.
 */

/* ── Page stretches full height ── */
.ci-page { align-items: stretch; }
.ci-right { overflow: visible; }

/* ── Compact left panel spacing for signup ── */
.ci-left .ci-badge      { margin-bottom: 20px; }
.ci-left .ci-hero-title { font-size: clamp(24px, 2.6vw, 38px); margin-bottom: 12px; }
.ci-left .ci-hero-sub   { font-size: 13.5px; margin-bottom: 24px; line-height: 1.65; }
.ci-left .ci-stats      { gap: 28px; margin-bottom: 24px; }
.ci-left .ci-stat-num   { font-size: 22px; }
.ci-benefit-list        { gap: 8px; }
.ci-benefit-item        { font-size: 13px; }
.ci-left > div[style]   { margin-top: 20px !important; }

/* ── Signup card ── */
.ci-card.ci-signup-card {
  max-width: 520px;
  padding: 22px 34px 18px;
  overflow: visible;
}

/* ── reCAPTCHA — hide badge, attribution shown inline in HTML ── */
.grecaptcha-badge { visibility: hidden !important; width: 0 !important; }

/* attribution text */
.ci-recaptcha-notice {
  text-align: center; font-size: 11px; color: var(--muted);
  margin-top: 8px; line-height: 1.5;
}
.ci-recaptcha-notice a { color: rgba(0,200,240,0.65); text-decoration: none; }
.ci-recaptcha-notice a:hover { color: var(--cyan); }

/* my-style logo already at 52px — match container padding */
.ci-card.ci-signup-card ~ * .ci-logo-container,
.ci-signup-card .ci-logo-container {
  padding: 8px 20px 6px;
}
.ci-signup-card .ci-logo-wrap { margin-bottom: 10px; }
.ci-signup-card .ci-card-badge { margin-bottom: 8px; }
.ci-signup-card .ci-card-title { font-size: 20px; margin-bottom: 4px; }
.ci-signup-card .ci-card-sub   { font-size: 12px; margin-bottom: 10px; }
.ci-signup-card .ci-form-divider { margin-bottom: 12px; }

/* ── Section labels ── */
.ci-section-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted);
  margin-bottom: 8px; margin-top: 0;
  display: flex; align-items: center; gap: 8px;
}
.ci-section-label::after {
  content: ''; flex: 1; height: 1px;
  background: rgba(0,200,240,0.10);
}

/* ── 2-column field grid ── */
.ci-field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px 12px;
  margin-bottom: 10px;
}
.ci-field-full { grid-column: 1 / -1; }

/* ── Individual fields ── */
.ci-field { display: flex; flex-direction: column; gap: 5px; }
.ci-field label {
  font-size: 10.5px !important; font-weight: 600 !important;
  color: var(--muted) !important; text-transform: uppercase !important;
  letter-spacing: 0.05em !important; margin: 0 !important;
}

/* ── Compact inputs ── */
.ci-card.ci-signup-card .form-control,
.ci-card.ci-signup-card .ci-input-wrap .form-control,
.ci-card.ci-signup-card .ci-input-wrap input {
  padding: 9px 12px 9px 36px !important;
  font-size: 13px !important;
  border-radius: 9px !important;
}
.ci-card.ci-signup-card .no-icon .form-control,
.ci-card.ci-signup-card .no-icon input {
  padding: 9px 12px !important;
}
.ci-card.ci-signup-card .ci-input-icon { font-size: 13px; }

/* ── Terms ── */
.ci-terms {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 8px 0 12px;
  font-size: 12px; color: var(--muted); line-height: 1.45;
}
.ci-terms input[type="checkbox"] {
  accent-color: var(--cyan);
  width: 14px; height: 14px; flex-shrink: 0; margin-top: 2px; cursor: pointer;
}
.ci-terms a { color: var(--cyan); text-decoration: none; font-weight: 500; }
.ci-terms a:hover { text-decoration: underline; }

/* ── Submit button — compact ── */
.ci-card.ci-signup-card .login-btn {
  padding: 12px !important;
  font-size: 14px !important;
}

/* ── Already have account ── */
.ci-already-row {
  text-align: center; margin-top: 10px;
  font-size: 12.5px; color: var(--muted);
}
.ci-already-row a { color: var(--cyan); font-weight: 600; text-decoration: none; }
.ci-already-row a:hover { text-decoration: underline; }

/* ── Password wrapper ── */
.ci-card.ci-signup-card .password-wrapper-val,
.ci-card.ci-signup-card .password-wrapper {
  position: relative; display: flex; align-items: center;
}
.ci-card.ci-signup-card .password-wrapper-val input,
.ci-card.ci-signup-card .password-wrapper input {
  padding-right: 40px !important; flex: 1;
}
/* The password-policy plugin wraps the input in .jq-password-validator at
   runtime, making that div the flex child instead of the input. Without a
   flex rule it shrink-wraps to the input's intrinsic width, so the field
   renders narrow (worst on small devices). Make the wrapper fill the row
   and the input fill the wrapper. */
.ci-card.ci-signup-card .password-wrapper-val .jq-password-validator,
.ci-card.ci-signup-card .password-wrapper .jq-password-validator {
  flex: 1 1 auto; width: 100%; min-width: 0; position: relative;
}
.ci-card.ci-signup-card .password-wrapper-val .jq-password-validator input,
.ci-card.ci-signup-card .password-wrapper .jq-password-validator input {
  width: 100% !important;
}
.ci-card.ci-signup-card .eye-dv {
  position: absolute !important; right: 8px !important;
  top: 50% !important; transform: translateY(-50%) !important;
  background: transparent !important; border: none !important;
  color: var(--muted) !important; padding: 5px !important;
  cursor: pointer !important; z-index: 10 !important;
}
.ci-card.ci-signup-card .eye-dv:hover { color: var(--cyan) !important; }
.ci-card.ci-signup-card .eye-dv i { font-size: 13px !important; }

/* ── Validation errors ── */
.ci-card.ci-signup-card label.error {
  color: #ff7090 !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  margin-top: 3px !important;
  display: block !important;
}

/* Tighten gap above and add breathing room below for the
   Terms-checkbox error (otherwise it sits ~15px below the row
   because of .ci-terms bottom margin). */
.ci-card.ci-signup-card label.error[for="agree_seeker"],
.ci-card.ci-signup-card label.error[for="agree_student"],
.ci-card.ci-signup-card label.error[for="agree_tpo"],
.ci-card.ci-signup-card label.error[for="agree_panel"] {
  margin-top: -8px !important;
  margin-bottom: 10px !important;
}

/* Remove Bootstrap's right-side warning icon — it shifts padding and
   overlaps our custom left icon. Keep left-icon padding intact. */
.ci-card.ci-signup-card .form-control.error,
.ci-card.ci-signup-card .form-control.is-invalid,
.ci-card.ci-signup-card input.error,
.ci-card.ci-signup-card input.is-invalid {
  border-color: rgba(255,77,109,0.7) !important;
  box-shadow: 0 0 0 3px rgba(255,77,109,0.10) !important;
  background-image: none !important;
  background-repeat: no-repeat !important;
  padding-right: 12px !important;
  padding-left: 36px !important;
  color: var(--text) !important;
}
/* Placeholder stays legible in error state */
.ci-card.ci-signup-card input.error::placeholder,
.ci-card.ci-signup-card input.is-invalid::placeholder {
  color: rgba(122,154,184,0.45) !important;
}
/* Left icon turns red when its sibling input is invalid */
.ci-card.ci-signup-card .ci-input-wrap:has(input.error) .ci-input-icon,
.ci-card.ci-signup-card .ci-input-wrap:has(input.is-invalid) .ci-input-icon {
  color: rgba(255,77,109,0.8) !important;
}

/* ── Left panel benefit list ── */
.ci-benefit-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.ci-benefit-item {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13px; color: var(--muted); line-height: 1.45;
}
.ci-benefit-icon {
  width: 20px; height: 20px; border-radius: 5px; flex-shrink: 0;
  background: rgba(0,200,240,0.12); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; color: var(--cyan); margin-top: 1px;
}

/* ── Responsive ── */
@media (max-width: 960px) {
  .ci-field-grid { grid-template-columns: 1fr; }
  .ci-field-full  { grid-column: 1; }
  .ci-card.ci-signup-card { max-width: 100%; padding: 22px 20px 18px; }
  .ci-left .ci-hero-title { font-size: 28px; }
}