/* =========================================================
   OnlineVisaCenter — Polish layer (loads after design-system.css)
   Accessibility, interaction and readability refinements.
   Additive only: nothing here changes layout or brand tokens.
   ========================================================= */

/* ---------- Typography & rendering ---------- */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body.lang-fa { line-height: 1.95; letter-spacing: 0; }
body.lang-fa h1, body.lang-fa h2, body.lang-fa h3 { line-height: 1.6; }
h1, h2, h3, h4 { text-wrap: balance; }
p { text-wrap: pretty; }
::selection { background: var(--color-primary-light); color: var(--color-secondary-dark); }

/* ---------- Keyboard focus (WCAG 2.4.7) ---------- */
:focus { outline: none; }
:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--color-primary) 55%, transparent);
  outline-offset: 2px;
  border-radius: 6px;
}
a:focus-visible, button:focus-visible, [role="button"]:focus-visible, summary:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--color-primary) 60%, transparent);
  outline-offset: 2px;
}

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Buttons ---------- */
.btn {
  transition: background-color var(--transition), box-shadow var(--transition), transform 120ms ease, color var(--transition), border-color var(--transition);
  -webkit-tap-highlight-color: transparent;
}
.btn:active:not(:disabled) { transform: translateY(1px) scale(0.99); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; box-shadow: none; }
.btn-primary:hover:not(:disabled) { transform: translateY(-1px); }

/* ---------- Inputs ---------- */
input:not([type="checkbox"]):not([type="radio"]):hover, select:hover, textarea:hover {
  border-color: color-mix(in srgb, var(--color-secondary) 35%, var(--color-border));
}
input:disabled, select:disabled, textarea:disabled { background: var(--color-card); color: var(--color-text-faint); cursor: not-allowed; }

/* ---------- Cards ---------- */
.card { transition: box-shadow var(--transition), border-color var(--transition); }
.card-hover:hover, .destination-card:hover, .article-card:hover, .blog-card:hover {
  box-shadow: var(--shadow-lg);
  border-color: color-mix(in srgb, var(--color-primary) 30%, var(--color-border));
}

/* ---------- Tables ---------- */
table tbody tr { transition: background-color 120ms ease; }
table tbody tr:hover { background: color-mix(in srgb, var(--color-navy-light) 70%, transparent); }
th { position: sticky; top: 0; background: var(--color-card); z-index: 1; }
table td { vertical-align: middle; }

/* ---------- Media ---------- */
img, video { max-width: 100%; height: auto; }
img[loading] { background: var(--color-card); }

/* ---------- Scrollbars (desktop) ---------- */
@media (hover: hover) and (pointer: fine) {
  * { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--color-secondary) 25%, transparent) transparent; }
}

/* ---------- Touch targets on phones/tablets (WCAG 2.5.5) ---------- */
@media (pointer: coarse) {
  .btn, .icon-btn, .tab, .pill-option { min-height: 44px; }
  .btn-sm { min-height: 40px; }
  input[type="text"], input[type="email"], input[type="tel"], input[type="date"],
  input[type="number"], input[type="password"], select, textarea { min-height: 44px; font-size: 16px; }
}

/* ---------- Toasts ---------- */
.toast { box-shadow: var(--shadow-lg); }

/* ---------- Small screens ---------- */
@media (max-width: 640px) {
  .container { padding-inline: 16px; }
  h1 { font-size: clamp(1.6rem, 6vw, 2rem); }
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}