/* City Alo campaign form. Every class starts with .ca-, so this can sit inside
   an existing site without clashing. Change the look from the variables below. */

@font-face {
  font-family: "City Bank";
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/CityBank-Regular-V2.1.ttf") format("truetype");
}
@font-face {
  font-family: "City Bank";
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/CityBank-SemiBold-V2.1.ttf") format("truetype");
}

.ca-page {
  --ca-pink: #df4867;        /* City Alo primary (cityalo.com buttons) */
  --ca-pink-deep: #c7304f;   /* Submit hover */
  --ca-red: #c8102e;         /* links, asterisks, errors. Darker than the site's
                                #ed1c24 so small text passes AA on white */
  --ca-error-tint: #fff5f6;
  --ca-text: #231f20;
  --ca-placeholder: #767676;
  --ca-border: #d5d5db;      /* field stroke at rest */
  --ca-border-hover: #b8b8bc;
  --ca-column: 920px;        /* content width. Example pages used 920 and 730 */
  --ca-radius: 8px;

  background: #fff;
  color: var(--ca-text);
  font: 400 16px/1.5 "City Bank", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.ca-page *, .ca-page *::before, .ca-page *::after { box-sizing: border-box; }
body:has(> .ca-page) { margin: 0; }

/* Banner */
.ca-banner img { display: block; width: 100%; height: auto; }

/* Content column */
.ca-content {
  width: var(--ca-column);
  max-width: calc(100% - 40px);
  margin: 0 auto;
  padding: 48px 0 96px;
}
.ca-title {
  margin: 0 0 12px;
  color: var(--ca-pink);
  font-size: 34px;
  font-weight: 400;
  line-height: 1.2;
}
.ca-copy p { margin: 0 0 16px; }
.ca-copy a { color: var(--ca-red); }
.ca-copy a:hover { text-decoration: none; }
.ca-note { margin: 24px 0; font-size: 14px; font-style: italic; }

/* Fields */
.ca-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 30px;
}
.ca-field { min-width: 0; }
.ca-field--full { grid-column: 1 / -1; }
.ca-label { display: block; margin-bottom: 10px; }
.ca-req { color: var(--ca-red); }

.ca-input {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 12px 20px;
  background: #fff;
  border: 1px solid var(--ca-border);
  border-radius: var(--ca-radius);
  color: var(--ca-text);
  font: inherit;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.ca-input::placeholder { color: var(--ca-placeholder); opacity: 1; }
.ca-input:hover { border-color: var(--ca-border-hover); }
textarea.ca-input {
  min-height: 48px;
  height: 48px;
  resize: vertical;
}
.ca-field--full textarea.ca-input {
  min-height: 72px;
  height: auto;
}
select.ca-input {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 48px;
  cursor: pointer;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M0 5.21761L6.13162 11.2448C7.15604 12.2517 8.84396 12.2517 9.86838 11.2448L16 5.21761C15.6156 4.77979 15.2005 4.36944 14.7475 4L8.62279 10.0204C8.26695 10.3702 7.73305 10.3702 7.37721 10.0204L1.25247 4C.799319 4.36963.384592 4.77954 0 5.21761Z' fill='%23231F20'/%3E%3C/svg%3E") right 20px center / 16px no-repeat;
}
select.ca-input:has(option[value=""]:checked) { color: var(--ca-placeholder); }

/* Focus */
.ca-input:focus {
  border-color: var(--ca-pink);
  box-shadow: 0 0 0 3px rgba(223, 72, 103, .25);
  outline: 2px solid transparent; /* stays visible in Windows high-contrast mode */
}
.ca-submit:focus-visible,
.ca-copy a:focus-visible {
  outline: 3px solid var(--ca-text);
  outline-offset: 2px;
}
.ca-success:focus { outline: none; }

/* Errors (the classes and messages are added by city-alo-form.js) */
.ca-input[aria-invalid="true"] { border-color: var(--ca-red); background-color: var(--ca-error-tint); }
.ca-input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(200, 16, 46, .2); }
.ca-error { margin: 6px 0 0; color: var(--ca-red); font-size: 14px; }
.ca-status { margin: 24px 0 0; color: var(--ca-red); text-align: center; }

/* Spam trap in the Laravel view: off screen, so people never see it but bots fill it */
.ca-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Security Check */
.ca-security-group {
  margin-top: 24px;
}
.ca-security-group .ca-label {
  margin-bottom: 8px;
  font-weight: 600;
  color: #1e293b;
  font-size: 15px;
}
.ca-captcha-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.ca-captcha-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 110px;
  height: 48px;
  padding: 0 18px;
  background: #eef3f8;
  border: 1px solid #d8e2ec;
  border-radius: var(--ca-radius);
  font-size: 18px;
  font-weight: 700;
  color: #1b2a47;
  letter-spacing: 0.5px;
  user-select: none;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03);
}
.ca-captcha-input {
  width: 90px !important;
  height: 48px;
  min-height: 48px;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  color: #1b2a47;
  padding: 0 8px;
}
.ca-captcha-refresh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  border-radius: 50%;
  color: #64748b;
  cursor: pointer;
  padding: 0;
  transition: color .15s ease, background-color .15s ease;
}
.ca-captcha-refresh-btn:hover {
  color: #1b2a47;
  background-color: #f1f5f9;
}
.ca-captcha-refresh-btn svg {
  transition: transform .4s ease;
}
.ca-captcha-refresh-btn.is-spinning svg {
  transform: rotate(360deg);
}
.ca-captcha-row .ca-error {
  flex-basis: 100%;
  width: 100%;
  margin: 6px 0 0;
}

/* Submit */
.ca-actions {
  margin-top: 36px;
  text-align: center;
}
.ca-submit {
  min-width: 160px;
  min-height: 60px;
  padding: 16px 36px;
  background: var(--ca-pink);
  border: 0;
  border-radius: 999px;
  box-shadow: 0 8px 24px -8px rgba(223, 72, 103, .5);
  color: #fff;
  font-family: inherit;
  font-size: 18px;
  font-weight: 600;
  line-height: 27px;
  cursor: pointer;
  transition: background-color .12s ease;
}
.ca-submit:hover {
  background: var(--ca-pink-deep);
}
.ca-submit[disabled] {
  opacity: .6;
  cursor: progress;
}

/* Phone */
@media (max-width: 640px) {
  .ca-content { padding: 32px 0 64px; }
  .ca-title { font-size: 28px; }
  .ca-fields { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .ca-submit { width: 100%; }
}