/* World Design — Accessibility & Performance utilities */

/* Hide page until i18n applies (prevents Arabic flash when English is selected) */
html.wd-i18n-pending body {
  opacity: 0;
}

html.i18n-ready body {
  opacity: 1;
  transition: opacity 0.12s ease;
}

.skip-link {
  position: fixed;
  top: -100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10001;
  padding: 0.75rem 1.25rem;
  background: var(--color-primary);
  color: #fff;
  font-weight: 600;
  border-radius: var(--radius-sm);
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 1rem;
  outline: 3px solid var(--color-primary-light);
  outline-offset: 2px;
}

:focus-visible {
  outline: 2px solid var(--color-primary-light);
  outline-offset: 2px;
}

.form-group.has-error input,
.form-group.has-error textarea,
.form-group.has-error select {
  border-color: #ef4444;
}

.form-error {
  display: block;
  color: #f87171;
  font-size: 0.8rem;
  margin-top: 0.35rem;
}

.form-success-msg {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 1.25rem;
  margin-top: 1rem;
  border-radius: var(--radius-sm);
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.3);
  color: #86efac;
  font-size: 0.95rem;
  animation: fade-up 0.4s ease;
}

[data-theme="light"] .form-success-msg {
  background: rgba(34, 197, 94, 0.1);
  color: #166534;
}

/* Page hero subtitle */
.page-hero .section-desc {
  max-width: 640px;
}

/* Breadcrumb separator */
.breadcrumb span[aria-hidden] {
  margin-inline: 0.25rem;
}

/* Prevent horizontal overflow on small screens */
html, body {
  max-width: 100vw;
  overflow-x: clip;
}

img, video, svg, canvas {
  max-width: 100%;
  height: auto;
}

/* Safe areas for notched phones */
.site-header {
  padding-top: env(safe-area-inset-top, 0);
}

.whatsapp-float {
  bottom: calc(1.5rem + env(safe-area-inset-bottom, 0));
}

.mobile-nav {
  padding-bottom: env(safe-area-inset-bottom, 0);
}

/* Content visibility for below-fold sections */
.section:not(.hero):not(.page-hero) {
  content-visibility: auto;
  contain-intrinsic-size: auto 500px;
}

/* Skeleton loading */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-glass) 25%,
    rgba(255, 255, 255, 0.08) 50%,
    var(--color-glass) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.2s ease-in-out infinite;
  border-radius: var(--radius-sm);
  min-height: 1rem;
}

@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; }
  .testimonials-track,
  .tech-track { animation: none !important; }
}

/* Ultra-wide & 4K max content width */
@media (min-width: 1920px) {
  :root { --container-max: 1440px; }
}

@media (max-width: 380px) {
  .hero-cta { flex-direction: column; width: 100%; }
  .hero-cta .btn { width: 100%; justify-content: center; }
  .trust-badges { flex-direction: column; align-items: flex-start; }
  .floating-card { display: none; }
  .pricing-grid { grid-template-columns: 1fr; }
}

/* Touch targets */
@media (pointer: coarse) {
  .btn, .filter-btn, .faq-question, .nav-desktop a, .mobile-nav a {
    min-height: 44px;
  }
}

/* Print */
@media print {
  .site-header, .whatsapp-float, .page-loader, .cosmic-bg, .mobile-nav { display: none !important; }
  body { background: #fff; color: #000; }
}