/* FireQO — styles that sit alongside Tailwind.
   Only what utilities can't express cleanly: input skin, RTL fixes, motion. */

/* ---------- Inputs ---------- */
.fq-input {
  border: 1.5px solid rgba(10, 32, 54, .16);
  border-radius: 10px;
  padding: 12px 14px;
  font: 400 15.5px 'Source Sans 3', system-ui, sans-serif;
  background: #FBFAF8;
  color: #0A2036;
  outline: none;
  width: 100%;
  transition: border-color .15s, background-color .15s;
}
.fq-input:focus  { border-color: #0B72D6; background: #fff; }
.fq-input-error  { border-color: #D24B4B; background: #fff; }
.fq-input-sm     { padding: 10px 13px; font-size: 14.5px; }
textarea.fq-input { resize: vertical; line-height: 1.5; }

html[lang="ar"] .fq-input { font-family: 'Cairo', 'Source Sans 3', sans-serif; }

/* ---------- Checkboxes ---------- */
.fq-box {
  appearance: none;
  width: 19px; height: 19px;
  border: 1.5px solid rgba(10, 32, 54, .28);
  border-radius: 5px;
  background: #fff;
  cursor: pointer;
  display: inline-grid;
  place-content: center;
  flex: none;
  transition: background-color .12s, border-color .12s;
}
.fq-box:checked { background: #0B72D6; border-color: #0B72D6; }
.fq-box:checked::after {
  content: '';
  width: 5px; height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) translateY(-1px);
}
.fq-box:focus-visible { outline: 2px solid #0B72D6; outline-offset: 2px; }

/* ---------- Utilities ---------- */
.fq-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- Motion ---------- */
@keyframes fq-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.fq-rise { animation: fq-in .35s ease both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ---------- Focus visibility ---------- */
a:focus-visible, button:focus-visible, select:focus-visible {
  outline: 2px solid #0B72D6;
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---------- Arabic / RTL ---------- */
html[dir="rtl"] body { letter-spacing: 0; }
html[dir="rtl"] .fq-flip { transform: scaleX(-1); }

/* Selection matches the brand amber */
::selection { background: #FBD9A6; }