/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

/* Base & brand */
:root{
  --blue:#0e1b67;
  --yellow:#e2aa40;
  --ink:#0b0f25;
  --ink-2:#1a223d;
  --muted:#e9eefc;

  --glass-a: rgba(255,255,255,.18);
  --glass-b: rgba(255,255,255,.10);
  --glass-line: rgba(255,255,255,.22);
  --shadow: rgba(0,0,0,.40);
}

/* FORM */
/* .form-card{ padding-bottom: 16px; } */

/* form{ padding: 8px 18px 18px; } */
.grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: start;
}
.field{
  display: grid;
  gap: 6px;
  align-content: start;
}
label{
  font-size: 12px;
  font-family: inherit;
  letter-spacing: .2px;
  color: #dfe8ff;
}
input, select, textarea{
  width: 100%;
  color: #0b1450;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 10px;
  padding: 12px 12px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
  box-sizing: border-box;
  height: 44px;
}
textarea{ resize: vertical; min-height: 120px; height: auto; }

input:focus, select:focus, textarea:focus{
  border-color: var(--yellow);
  box-shadow: 0 0 0 3px rgba(226,170,64,.25);
}

/* Validation states */
input.invalid, select.invalid, textarea.invalid {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

input.invalid:focus, select.invalid:focus, textarea.invalid:focus {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25);
}

.error{
  min-height: 16px;
  color: #ffd6d6;
  font-size: 12px;
  font-family: inherit;
}

.actions {
  margin-top: 20px;
  text-align: center;
}

/* Reset button styling for custom button */
.cta-btn {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  outline: none;
}

/* Status */
.form-status{
  margin-top: 12px;
  font-size: 13px;
  font-family: inherit;
  min-height: 18px;
  text-align: center;
}

.form-status.success {
  color: #4ade80;
}

.form-status.error {
  color: #ffd6d6;
}

/* Loading spinner */
.contactly-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  border-top-color: transparent;
  animation: contactly-spin 1s ease-in-out infinite;
}

@keyframes contactly-spin {
  to { transform: rotate(360deg); }
}

/* Responsive */
@media (max-width: 600px){
  .grid{ grid-template-columns: 1fr; }
}