/* Icon Tech — Accessibility & Performance utilities */

/* Author display:* must not override the hidden attribute (e.g. .seo-links-grid { display: grid }) */
[hidden] {
  display: none !important;


}

.wd-form-hp {
  display: none !important;
}

/* Hide i18n text briefly — but NEVER hide hero (hurts LCP) */
html.wd-i18n-pending [data-i18n] {
  visibility: hidden;
}

html.wd-i18n-pending .hero [data-i18n] {
  visibility: visible;
}
html.wd-i18n-pending[lang="ar"] .site-header [data-i18n] {
  visibility: visible;
}

html.i18n-ready [data-i18n] {
  visibility: visible;
}

html.i18n-ready body {
  opacity: 1;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.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 (desktop only — breaks scroll/reveal on mobile) */
@media (min-width: 769px) {
  .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; }
}

/* Mobile: drop expensive glass blur (big main-thread / compositor cost) */
@media (max-width: 768px) {
  .glass-card,
  .site-header,
  .mobile-nav,
  .floating-card {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .cosmic-bg__stars .star {
    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; }
}