/**
 * Surety Made Simple — bond application "apply" screen
 * (templates/Applications/apply.php)
 *
 * Full rewrite of the form/summary panel per the Claude Design mockup
 * (ui_kits/marketing_site/apply.html, ApplyScreen.jsx). Everything is
 * scoped under .ap-screen so it can't leak into fill_details.php, which
 * shares the same 'product' layout but keeps its own legacy styling.
 *
 * JS hooks preserved as-is: .application-form, [data-application-type],
 * .contractor-switch-link, and Bootstrap's d-none/d-inline toggle classes
 * (see the script block at the bottom of apply.php).
 */

.ap-screen {
  max-width: 1080px;
  margin: 0 auto;
}

/* .ap-panel is purely structural: the layout's own #product-card already
   supplies the white, rounded card around this content, so giving this
   wrapper its own border/background would nest a second card inside it. */

.ap-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(28px, 4vw, 48px);
  padding: clamp(20px, 4vw, 40px);
  align-items: start;
}

@media (max-width: 820px) {
  .ap-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

/* ---------- LEFT: application form ---------- */

.ap-form-col {
  display: flex;
  flex-direction: column;
}

.ap-eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--green-600);
}

.ap-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: -.01em;
  margin: 14px 0 8px;
  color: var(--ink-900);
}

.ap-subtitle {
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--slate-500);
  margin: 0 0 28px;
  max-width: 420px;
}

@media (max-width: 520px) {
  .ap-title {
    font-size: 23px;
  }
}

.ap-fields {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Matches the mono/uppercase treatment already used for small metadata-style
   labels elsewhere on this screen (.ap-eyebrow, .ap-row-label, .ap-desc-label)
   instead of the body copy font. Scoped as ".ap-fields .ap-label" (rather
   than the bare class) so it reliably outranks the generic
   ".money label { font-size: 14px }" rule the shared "product" layout
   (plugins/MetronicFrontend/templates/layout/product.php) applies to any
   CakeDC Money-typed field, which Bond amount is — a bare ".ap-label" has
   lower specificity than ".money label" and was losing to it. */
.ap-fields .ap-label {
  display: block;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ink-700);
  margin-bottom: 8px;
}

.ap-hint {
  display: block;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--slate-500);
  margin-top: 6px;
}

/* Live accepted/not-accepted signal for the email field (populated by
   templates/element/email_validation.php when suppressInlineMessages is on).
   The icon sits inline in the field itself, so the common "looks good" case
   adds no extra vertical space at all — .ap-fields' rhythm (each .ap-field
   the same height as its neighbors) stays intact. Only the invalid/warning
   cases, which have something the user actually needs to read, add a text
   line below, and that's expected to look different from a plain field. */
.ap-input-wrap {
  position: relative;
}

.ap-input-wrap .form-control {
  padding-right: 40px;
}

.ap-email-status-icon {
  display: none;
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  line-height: 0;
}

.ap-email-status-icon.is-valid,
.ap-email-status-icon.is-invalid,
.ap-email-status-icon.is-warning {
  display: block;
}

.ap-email-status-icon svg {
  width: 16px;
  height: 16px;
  display: block;
}

.ap-email-status-icon.is-valid {
  color: var(--green-600);
}

.ap-email-status-icon.is-invalid {
  color: var(--red-600);
}

.ap-email-status-icon.is-warning {
  color: var(--amber-600);
}

.ap-email-status-message {
  display: none;
  margin-top: 6px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.4;
}

.ap-email-status-message.is-invalid,
.ap-email-status-message.is-warning {
  display: block;
}

.ap-email-status-message.is-invalid {
  color: var(--red-600);
}

.ap-email-status-message.is-warning {
  color: var(--amber-600);
}

.ap-email-status-message .ap-email-status-fix {
  border: 0;
  background: none;
  padding: 0;
  margin-left: 2px;
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  color: inherit;
  cursor: pointer;
}

.ap-fields .form-control {
  background: var(--surface-50);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  height: auto;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14.5px;
  color: var(--ink-900);
  box-shadow: none;
}

.ap-fields .form-control::placeholder {
  color: var(--slate-300);
  font-weight: 500;
}

.ap-fields .form-control:focus {
  background: var(--surface-50);
  border-color: var(--blue-500);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(59, 99, 219, .15);
}

.ap-links {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.ap-link,
.ap-link:hover {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
}

.ap-link,
.ap-link:visited {
  color: var(--blue-500);
}

.ap-link:hover {
  color: var(--blue-800);
}

.ap-link svg {
  width: 15px;
  height: 15px;
  flex: none;
}

.ap-actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

@media (max-width: 520px) {
  .ap-actions {
    flex-direction: column-reverse;
    align-items: stretch;
    margin-top: 24px;
  }
}

.ap-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 700;
  line-height: 1.2;
  border-radius: 999px;
  border: 1.5px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--duration-base) var(--ease), box-shadow var(--duration-base) var(--ease), background var(--duration-base) var(--ease);
}

@media (max-width: 520px) {
  .ap-btn {
    width: 100%;
  }
}

.ap-btn svg {
  width: 16px;
  height: 16px;
  flex: none;
}

.ap-btn-primary,
.ap-btn-primary:active,
.ap-btn-primary:focus {
  font-size: 15px;
  padding: 14px 24px;
  background: var(--action-gradient);
  color: #fff;
  box-shadow: var(--shadow-action);
}

.ap-btn-primary:hover {
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 20px 36px -10px rgba(59, 99, 219, .68);
}

.ap-btn-primary:active {
  transform: scale(.975);
}

.ap-btn-ghost,
.ap-btn-ghost:active,
.ap-btn-ghost:focus {
  font-size: 13.5px;
  padding: 11px 18px;
  background: transparent;
  color: var(--ink-700);
}

.ap-btn-ghost:hover {
  color: var(--ink-700);
  background: var(--surface-50);
}

/* ---------- RIGHT: bond summary card ---------- */

.ap-summary {
  align-self: start;
  background: var(--surface-50);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
}

@media (max-width: 820px) {
  .ap-summary {
    border-radius: var(--radius-md);
  }
}

@media (max-width: 520px) {
  .ap-summary {
    padding: 16px 18px;
  }
}

.ap-badge {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  border-radius: 999px;
  border: 1px solid rgba(75, 158, 103, .4);
  background: #fff;
  color: var(--green-600);
  padding: 3px 10px;
}

.ap-summary-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 19px;
  line-height: 1.25;
  letter-spacing: -.01em;
  margin: 12px 0 22px;
  color: var(--ink-900);
}

.ap-row {
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.ap-row-label,
.ap-desc-label {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--slate-500);
  margin-bottom: 6px;
}

.ap-row-value {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-900);
}

.ap-row-value.ap-mono {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 20px;
}

.ap-desc-label {
  margin-bottom: 8px;
}

.ap-desc,
.ap-desc p {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.65;
  color: var(--slate-500);
  margin: 0;
}

.ap-desc strong {
  color: var(--ink-700);
  font-weight: 700;
}

.ap-trust {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

.ap-icon-badge {
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 50%;
  background: var(--surface-100);
  color: var(--slate-500);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ap-icon-badge svg {
  width: 11px;
  height: 11px;
}

.ap-trust-text {
  font-size: 12px;
  font-weight: 600;
  color: var(--slate-500);
}