/* ==========================================================================
   AppVerticals — form-system.css
   Styles for: BottomForm section (bottom / inline modes) + modal overlay.
   All selectors prefixed with .av- to avoid collisions with Bootstrap
   or other framework classes.
   ========================================================================== */

/* ── Section wrapper (bottom mode) ───────────────────────────────────────── */
.av-form-section {
  padding: 30px 0 80px;
}

/* ── Colour style variants ────────────────────────────────────────────────── */

/* Dark variant — explicit dark background (default look) */
.av-form-section--dark {
  background-color: #0a0a0a;
}

/* Light variant — white background, text colours flipped */
.av-form-section--light {
  background-color: #fff;
}

.av-form-section--light .av-form-left h2 {
  color: #0a0a0a;
}

.av-form-section--light .av-form-left .av-form-subhead {
  color: #555;
}

.av-form-section--light .av-form-left .av-contact-list li {
  color: #444;
}

.av-form-section--light .av-form-left .av-contact-list li a {
  color: #444;
}

.av-form-section--light .av-form-left .av-contact-list li a:hover {
  color: #0a0a0a;
}

.av-form-section--light .av-field input,
.av-form-section--light .av-field textarea {
  color: #0a0a0a;
  border-color: rgba(10, 10, 10, 0.25);
}

.av-form-section--light .av-field input::placeholder,
.av-form-section--light .av-field textarea::placeholder {
  color: #aaa;
}

.av-form-section--light .av-field input:focus,
.av-form-section--light .av-field textarea:focus {
  border-color: rgba(10, 10, 10, 0.6);
}

.av-form-section--light .av-field input:-webkit-autofill,
.av-form-section--light .av-field input:-webkit-autofill:hover,
.av-form-section--light .av-field input:-webkit-autofill:focus {
  -webkit-text-fill-color: #0a0a0a !important;
}

/* Light variant inside modal */
.av-modal-box.av-form-section--light {
  background: #fff;
}

.av-modal-box.av-form-section--light h2,
.av-modal-box.av-form-section--light .av-form-subhead {
  color: #0a0a0a;
}

/* Form-only inline wrapper also carries the style class */
.av-form-inline.av-form-section--dark {
  background-color: #0a0a0a;
  padding: 30px 0 80px;
}

.av-form-inline.av-form-section--light {
  background-color: #fff;
  padding: 30px 0 80px;
}

/* ── Two-column grid ──────────────────────────────────────────────────────── */
.av-form-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 50px;
  align-items: start;
}

/* ── Left column ──────────────────────────────────────────────────────────── */
.av-form-left .av-form-subhead {
  font-size: 20px;
  font-weight: 400;
  color: #7f7f7f;
  margin-bottom: 0.5rem;
}

.av-form-left h2 {
  font-size: 54px;
  font-weight: 600;
  letter-spacing: -3px;
  color: #fff;
  line-height: 1.1;
  margin: 0 0 10px;
}

.av-form-left h2 span {
  color: #e80101;
}

.av-form-left .av-contact-list {
  list-style: none;
  padding-left: 0;
  margin: 30px 0 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.av-form-left .av-contact-list li {
  display: flex;
  gap: 15px;
  align-items: center;
  color: #747474;
  font-size: 16px;
  font-weight: 500;
}

.av-contact-icon {
  flex-shrink: 0;
  border: 1px solid #e80101;
  border-radius: 50%;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #e80101;
}

.av-contact-icon svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.av-form-left .av-contact-list li a {
  color: #747474;
  text-decoration: none;
  transition: color 0.3s;
}

.av-form-left .av-contact-list li a:hover {
  color: #fff;
}

/* ── Right column / form wrapper ──────────────────────────────────────────── */
.av-form-right .av-contact-form {
  padding: 20px 0;
  color: #fff;
}

/* ── Form group — wrapping flex row for mixed full/half fields ───────────── */
.av-form-group {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

/* ── Field width variants ────────────────────────────────────────────────── */
.av-field--full {
  flex: 0 0 100%;
  min-width: 0;
}

.av-field--half {
  flex: 1 1 calc(50% - 10px);
  min-width: 180px; /* wraps to full on narrow containers */
}

.av-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ── Inputs and textarea ──────────────────────────────────────────────────── */
.av-field input,
.av-field textarea {
  width: 100%;
  background: transparent;
  border: 1px solid rgba(222, 222, 222, 0.5);
  padding: 12px 14px;
  color: #fff;
  font-size: 16px;
  font-family: inherit;
  outline: none;
  border-radius: 8px;
  box-sizing: border-box;
  transition: border-color 0.3s;
}

.av-field input::placeholder,
.av-field textarea::placeholder {
  color: #575757;
}

.av-field input:focus,
.av-field textarea:focus {
  border-color: rgba(222, 222, 222, 0.85);
}

.av-field input.av-error-border,
.av-field textarea.av-error-border {
  border-color: #e80101;
}

.av-field textarea {
  resize: none;
  min-height: 120px;
}

/* ── Select / dropdown ───────────────────────────────────────────────────── */
.av-field select.av-select {
  width: 100%;
  background: transparent;
  border: 1px solid rgba(222, 222, 222, 0.5);
  padding: 12px 36px 12px 14px;
  color: #fff;
  font-size: 16px;
  font-family: inherit;
  outline: none;
  border-radius: 8px;
  box-sizing: border-box;
  transition: border-color 0.3s;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23888' d='M5 7l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px;
}

.av-field select.av-select:focus {
  border-color: rgba(222, 222, 222, 0.85);
}

.av-field select.av-select.av-error-border {
  border-color: #e80101;
}

/* Dropdown options inherit browser defaults — override bg for dark contexts */
.av-field select.av-select option {
  background: #1a1a1a;
  color: #fff;
}

/* Light variant select */
.av-form-section--light .av-field select.av-select {
  color: #0a0a0a;
  border-color: rgba(10, 10, 10, 0.25);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23555' d='M5 7l5 5 5-5z'/%3E%3C/svg%3E");
}

.av-form-section--light .av-field select.av-select option {
  background: #fff;
  color: #0a0a0a;
}

/* Suppress browser autofill yellow background */
.av-field input:-webkit-autofill,
.av-field input:-webkit-autofill:hover,
.av-field input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
  -webkit-text-fill-color: #fff !important;
  transition: background-color 9999s ease-in-out 0s;
}

/* ── Validation error text ────────────────────────────────────────────────── */
.av-field-error {
  color: #e80101;
  font-size: 12px;
  display: block;
  min-height: 16px;
}

/* ── Submit button ────────────────────────────────────────────────────────── */
.av-form-submit {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background-color: #e80101;
  color: #fff;
  border: 1px solid #e80101;
  padding: 14px 40px;
  font-size: 16px;
  font-weight: 600;
  font-family: inherit;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
}

.av-form-submit:hover {
  background-color: transparent;
  color: #e80101;
}

.av-form-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background-color: #e80101 !important;
  color: #fff !important;
}

.av-form-submit--full {
  width: 100%;
  justify-content: center;
}

/* Loading spinner (hidden by default, shown via inline style by JS) */
.av-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: av-spin 0.7s linear infinite;
}

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

/* ── Inline success / error message bar ──────────────────────────────────── */
.av-form-message {
  padding: 14px 18px;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 500;
  display: none;
}

.av-form-message.av-msg-success {
  background: rgba(39, 174, 96, 0.15);
  border: 1px solid #27ae60;
  color: #27ae60;
}

.av-form-message.av-msg-error {
  background: rgba(232, 1, 1, 0.12);
  border: 1px solid #e80101;
  color: #e80101;
}

/* ── Modal overlay ────────────────────────────────────────────────────────── */
.av-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.av-modal-overlay.av-modal-open {
  opacity: 1;
  visibility: visible;
}

.av-modal-box {
  background: #111;
  border-radius: 12px;
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 40px 36px;
  position: relative;
  transform: translateY(30px);
  transition: transform 0.25s ease;
}

.av-modal-overlay.av-modal-open .av-modal-box {
  transform: translateY(0);
}

/* ── Modal close button ───────────────────────────────────────────────────── */
.av-modal-close {
  position: absolute;
  top: 14px;
  right: 18px;
  background: none;
  border: none;
  cursor: pointer;
  color: #888;
  font-size: 28px;
  line-height: 1;
  padding: 4px 8px;
  transition: color 0.2s;
}

.av-modal-close:hover {
  color: #fff;
}

/* ── Heading inside modal box ─────────────────────────────────────────────── */
.av-modal-box .av-form-subhead {
  font-size: 16px;
  color: #7f7f7f;
  margin: 0 0 6px;
}

.av-modal-box h2 {
  font-size: 36px;
  font-weight: 600;
  letter-spacing: -1px;
  color: #fff;
  line-height: 1.15;
  margin: 0 0 24px;
}

.av-modal-box h2 span {
  color: #e80101;
}

/* Form inside modal: remove default top padding */
.av-modal-box .av-contact-form {
  padding: 0;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 1440px) {
  .av-form-left h2       { font-size: 45px; }
  .av-form-left .av-form-subhead { font-size: 18px; }
}

@media (max-width: 1300px) {
  .av-form-left h2 { font-size: 40px; letter-spacing: 0; }
}

@media (max-width: 1200px) {
  .av-form-left h2 { font-size: 35px; }
}

@media (max-width: 991px) {
  .av-form-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .av-form-left h2 {
    font-size: 30px;
    text-align: center;
  }

  .av-form-left .av-form-subhead {
    font-size: 16px;
    text-align: center;
  }

  /* Hide contact list on mobile (matches BottomForm.module.scss) */
  .av-form-left .av-contact-list {
    display: none;
  }

  .av-input-row {
    flex-direction: column;
    gap: 0;
  }
}

@media (max-width: 480px) {
  .av-modal-box {
    padding: 28px 18px;
  }

  .av-modal-box h2 {
    font-size: 28px;
  }

  .av-form-submit {
    width: 100%;
    justify-content: center;
  }
}