/* ============================================================
   ANSOFTIO Base Styles — asf-base.css
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: var(--asf-font);
  background-color: var(--asf-bg);
  color: var(--asf-text);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--asf-blue); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--asf-cyan); }

/* ---- Layout ---- */
.asf-container {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 24px;
}

.asf-section {
  padding-block: var(--asf-section-desktop);
}

/* ---- Typography ---- */
.asf-heading-xl {
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 800;
  line-height: 1.15;
  color: var(--asf-navy);
  letter-spacing: -0.02em;
}

.asf-heading-lg {
  font-size: clamp(1.6rem, 3.5vw, 2.75rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--asf-navy);
}

.asf-heading-md {
  font-size: clamp(1.25rem, 2.5vw, 1.875rem);
  font-weight: 700;
  color: var(--asf-navy);
}

.asf-subheading {
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  color: var(--asf-muted);
  line-height: 1.7;
}

.asf-label {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--asf-cyan);
}

/* ---- Buttons ---- */
.asf-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  border-radius: var(--asf-radius-btn);
  font-family: var(--asf-font);
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all 0.25s ease;
  text-decoration: none;
  white-space: nowrap;
}

.asf-btn-primary {
  background: var(--asf-grad-primary);
  color: var(--asf-white);
  box-shadow: 0 4px 16px rgba(37,99,235,0.3);
}
.asf-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(37,99,235,0.4);
  color: var(--asf-white);
}

.asf-btn-cta {
  background: var(--asf-grad-cta);
  color: var(--asf-white);
  box-shadow: 0 4px 16px rgba(249,115,22,0.3);
}
.asf-btn-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(249,115,22,0.4);
  color: var(--asf-white);
}

.asf-btn-outline {
  background: transparent;
  color: var(--asf-blue);
  border: 2px solid var(--asf-blue);
}
.asf-btn-outline:hover {
  background: var(--asf-blue);
  color: var(--asf-white);
}

.asf-btn-ghost {
  background: transparent;
  color: var(--asf-navy);
  border: 2px solid var(--asf-border);
}
.asf-btn-ghost:hover {
  border-color: var(--asf-blue);
  color: var(--asf-blue);
}

.asf-btn-sm { padding: 8px 18px; font-size: 0.875rem; }
.asf-btn-lg { padding: 16px 36px; font-size: 1.0625rem; }

/* ---- Cards ---- */
.asf-card {
  background: var(--asf-card);
  border-radius: var(--asf-radius-card);
  border: 1px solid var(--asf-border);
  box-shadow: var(--asf-shadow-card);
  transition: box-shadow 0.25s, transform 0.25s;
  overflow: hidden;
}
.asf-card:hover {
  box-shadow: var(--asf-shadow-hover);
  transform: translateY(-4px);
}

/* ---- Badges / Chips ---- */
.asf-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
}
.asf-badge-blue   { background: var(--asf-soft-blue);   color: var(--asf-blue); }
.asf-badge-cyan   { background: var(--asf-soft-cyan);   color: var(--asf-cyan); }
.asf-badge-orange { background: var(--asf-soft-orange); color: var(--asf-orange); }
.asf-badge-green  { background: #F0FDF4; color: var(--asf-green); }
.asf-badge-red    { background: #FEF2F2; color: var(--asf-red); }
.asf-badge-yellow { background: #FEFCE8; color: #92400E; }

/* ---- Status Chips ---- */
.asf-status { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 600; }
.asf-status-active    { background: #DCFCE7; color: #15803D; }
.asf-status-pending   { background: #FEF9C3; color: #854D0E; }
.asf-status-failed    { background: #FEE2E2; color: #B91C1C; }
.asf-status-completed { background: #DBEAFE; color: #1D4ED8; }
.asf-status-revoked   { background: #F3F4F6; color: #374151; }

/* ---- Forms ---- */
.asf-form-group { margin-bottom: 20px; }
.asf-form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--asf-navy);
  margin-bottom: 6px;
}
.asf-form-input,
.asf-form-select,
.asf-form-textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  border: 1.5px solid var(--asf-border);
  border-radius: var(--asf-radius-input);
  font-family: var(--asf-font);
  font-size: 0.9375rem;
  color: var(--asf-text);
  background: var(--asf-white);
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
}
.asf-form-input:focus,
.asf-form-select:focus,
.asf-form-textarea:focus {
  border-color: var(--asf-blue);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}
.asf-form-textarea { min-height: 120px; resize: vertical; }
.asf-form-error { font-size: 0.8125rem; color: var(--asf-red); margin-top: 4px; }
.asf-form-hint  { font-size: 0.8125rem; color: var(--asf-muted); margin-top: 4px; }

/* ---- Grid helpers ---- */
.asf-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.asf-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.asf-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }

/* ---- Divider ---- */
.asf-divider { border: none; border-top: 1px solid var(--asf-border); margin-block: 32px; }

/* ---- Toast — Enterprise Grade ---- */
.asf-toast-wrap {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
.asf-toast {
  pointer-events: auto;
  min-width: 300px;
  max-width: 420px;
  padding: 14px 18px 14px 16px;
  border-radius: 14px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--asf-white);
  box-shadow: 0 12px 40px rgba(0,0,0,0.2);
  animation: asf-toast-in 0.35s cubic-bezier(0.16,1,0.3,1);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  position: relative;
  overflow: hidden;
}
.asf-toast-success { background: linear-gradient(135deg, #16A34A, #15803D); }
.asf-toast-error   { background: linear-gradient(135deg, #DC2626, #B91C1C); }
.asf-toast-info    { background: linear-gradient(135deg, #2563EB, #1D4ED8); }
.asf-toast-warning { background: linear-gradient(135deg, #F97316, #EA580C); }
.asf-toast-loading { background: linear-gradient(135deg, #475569, #334155); }

.asf-toast-icon {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 800;
  flex-shrink: 0;
}
.asf-toast-loading .asf-toast-icon { animation: asf-spin 0.8s linear infinite; }
.asf-toast-msg { flex: 1; line-height: 1.45; }
.asf-toast-close {
  background: rgba(255,255,255,0.15);
  border: none; color: rgba(255,255,255,0.8);
  width: 22px; height: 22px; border-radius: 50%;
  cursor: pointer; font-size: 0.7rem;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: background 150ms;
}
.asf-toast-close:hover { background: rgba(255,255,255,0.3); }

.asf-toast-progress {
  position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
  background: rgba(255,255,255,0.15);
}
.asf-toast-progress-bar {
  height: 100%; width: 100%;
  background: rgba(255,255,255,0.5);
  animation: asf-toast-shrink linear forwards;
  transform-origin: left;
}
@keyframes asf-toast-shrink { from { transform: scaleX(1); } to { transform: scaleX(0); } }

@keyframes asf-toast-in {
  from { opacity: 0; transform: translateX(40px) scale(0.9); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes asf-toast-out {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(40px) scale(0.9); }
}

@media (max-width: 480px) {
  .asf-toast-wrap { left: 12px; right: 12px; bottom: 12px; }
  .asf-toast { min-width: 0; max-width: none; }
}

/* ---- Modal ---- */
.asf-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(7,27,61,0.55);
  backdrop-filter: blur(4px);
  z-index: 8000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.asf-modal {
  background: var(--asf-white);
  border-radius: 24px;
  padding: 36px;
  max-width: 560px;
  width: 100%;
  box-shadow: 0 24px 80px rgba(7,27,61,0.2);
  position: relative;
}
.asf-modal-close {
  position: absolute;
  top: 16px; right: 16px;
  background: var(--asf-bg);
  border: none;
  border-radius: 50%;
  width: 36px; height: 36px;
  cursor: pointer;
  font-size: 1.1rem;
  display: flex; align-items: center; justify-content: center;
  color: var(--asf-muted);
  transition: background 0.2s;
}
.asf-modal-close:hover { background: var(--asf-border); }

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .asf-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .asf-grid-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .asf-section { padding-block: var(--asf-section-mobile); }
  .asf-grid-2,
  .asf-grid-3,
  .asf-grid-4 { grid-template-columns: 1fr; }
  .asf-container { padding-inline: 16px; }
}

/* ============================================================
   UI-PUB-37 — Reduced Motion Support
   Disables all animations and transitions when user prefers
   reduced motion (accessibility requirement).
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  html {
    scroll-behavior: auto;
  }

  /* Disable specific ANSOFTIO animations */
  .asf-home-hero-float,
  .asf-home-hero-float-1,
  .asf-home-hero-float-2,
  .asf-home-hero-chip,
  .asf-skeleton,
  .asf-loading-spinner::before {
    animation: none !important;
    transition: none !important;
  }

  /* Keep focus indicators visible */
  :focus-visible {
    outline: 3px solid var(--asf-blue) !important;
    outline-offset: 2px !important;
  }
}


/* ============================================================
   Mobile Performance Polish
   Disables heavy 3D, blur, and parallax on small screens
   to keep dashboards/payment pages snappy on entry-level phones.
   ============================================================ */
@media (max-width: 600px) {
  /* Reduce backdrop blur (expensive on mobile GPUs) */
  .asf-modal-overlay {
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }

  /* Disable hover transforms (no hover on touch) */
  .asf-card:hover {
    transform: none;
  }
  .asf-btn-primary:hover,
  .asf-btn-cta:hover {
    transform: none;
  }

  /* Reduce card shadow complexity on mobile */
  .asf-card {
    box-shadow: 0 4px 12px rgba(15,23,42,0.06);
  }
}

/* Save-data preference: disable decorative animations and gradients */
@media (prefers-reduced-data: reduce) {
  .asf-home-hero-float,
  .asf-home-hero-chip,
  .asf-skeleton {
    animation: none !important;
  }
}

/* Honor OS-level Safari low-power mode via media query (limited support) */
@media (update: slow) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}


/* ============================================================
   Accessibility — Skip Link & Enhanced Focus Indicators
   ============================================================ */
.asf-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 99999;
  padding: 14px 24px;
  background: var(--asf-navy);
  color: #fff !important;
  font-size: 0.9375rem;
  font-weight: 700;
  border-radius: 0 0 12px 0;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(7,27,61,0.3);
}
.asf-skip-link:focus {
  left: 0;
  outline: 3px solid var(--asf-cyan);
  outline-offset: 2px;
}

/* Enhanced focus rings for keyboard users (focus-visible only) */
*:focus-visible {
  outline: 3px solid var(--asf-blue);
  outline-offset: 2px;
  border-radius: 4px;
}
.asf-btn:focus-visible {
  outline: 3px solid var(--asf-cyan);
  outline-offset: 3px;
}
.asf-form-input:focus-visible,
.asf-form-select:focus-visible,
.asf-form-textarea:focus-visible {
  outline: none; /* already styled with custom focus */
}

/* Screen-reader only utility */
.asf-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ============================================================
   Skeleton Loaders & Shimmer Effects
   ============================================================ */
.asf-skeleton {
  background: linear-gradient(90deg, #F1F5F9 0%, #E2E8F0 50%, #F1F5F9 100%);
  background-size: 200% 100%;
  border-radius: 6px;
  display: block;
  animation: asf-shimmer 1.4s ease-in-out infinite;
}
.asf-skeleton-line { height: 14px; margin-bottom: 8px; }
.asf-skeleton-line:last-child { margin-bottom: 0; width: 70%; }
.asf-skeleton-title { height: 22px; width: 60%; margin-bottom: 14px; }
.asf-skeleton-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
}
.asf-skeleton-thumb {
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 12px;
}
.asf-skeleton-card {
  background: var(--asf-white);
  border: 1px solid var(--asf-border);
  border-radius: 16px;
  padding: 20px;
}

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

/* ============================================================
   Premium Empty States
   ============================================================ */
.asf-empty-state {
  text-align: center;
  padding: 56px 24px;
  background: var(--asf-white);
  border: 1px dashed var(--asf-border);
  border-radius: 20px;
}
.asf-empty-state__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--asf-soft-blue);
  color: var(--asf-blue);
  font-size: 2rem;
  margin-bottom: 18px;
}
.asf-empty-state__title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--asf-navy);
  margin-bottom: 6px;
}
.asf-empty-state__desc {
  font-size: 0.9375rem;
  color: var(--asf-muted);
  max-width: 420px;
  margin: 0 auto 22px;
  line-height: 1.6;
}
.asf-empty-state__actions {
  display: inline-flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ============================================================
   Premium Loading Spinner
   ============================================================ */
.asf-loading-spinner {
  display: inline-block;
  width: 24px;
  height: 24px;
  border: 3px solid rgba(37,99,235,0.18);
  border-top-color: var(--asf-blue);
  border-radius: 50%;
  animation: asf-spin 0.8s linear infinite;
}
@keyframes asf-spin {
  to { transform: rotate(360deg); }
}

/* ============================================================
   Section Reveal Animation (intersection-observer compatible)
   ============================================================ */
.asf-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms cubic-bezier(0.16,1,0.3,1), transform 700ms cubic-bezier(0.16,1,0.3,1);
  will-change: opacity, transform;
}
.asf-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children inside revealed sections */
.asf-reveal.is-visible > * {
  animation: asf-fade-up 600ms cubic-bezier(0.16,1,0.3,1) both;
}
.asf-reveal.is-visible > *:nth-child(1) { animation-delay: 80ms; }
.asf-reveal.is-visible > *:nth-child(2) { animation-delay: 160ms; }
.asf-reveal.is-visible > *:nth-child(3) { animation-delay: 240ms; }
.asf-reveal.is-visible > *:nth-child(4) { animation-delay: 320ms; }
.asf-reveal.is-visible > *:nth-child(5) { animation-delay: 400ms; }

@keyframes asf-fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ============================================================
   Accessibility & Responsive Polish (100/100)
   ============================================================ */

/* Honour Windows / OS high-contrast mode */
@media (prefers-contrast: more) {
  :root {
    --asf-text:   #000;
    --asf-muted:  #1f2937;
    --asf-border: #000;
  }
  a, .asf-nav-link, .asf-btn { text-decoration: underline; }
  .asf-btn { border-width: 2px; }
  *:focus-visible {
    outline: 4px solid #000 !important;
    outline-offset: 3px !important;
  }
}

/* Save-Data / metered connection: drop heavy effects */
@media (prefers-reduced-data: reduce) {
  .asf-skeleton { animation: none; background: #E2E8F0; }
  .asf-shimmer, .asf-glow, .asf-particle { display: none !important; }
  *, *::before, *::after { background-image: none !important; }
}

/* Dynamic viewport units — fixes mobile 100vh address-bar bug */
.asf-fullscreen,
.asf-mobile-nav,
.asf-idle-modal {
  height: 100dvh;
  min-height: 100dvh;
}

/* Honour iOS notch + Android gesture bar */
@supports (padding: env(safe-area-inset-top)) {
  body { padding-top: env(safe-area-inset-top); }
  .asf-footer { padding-bottom: max(24px, env(safe-area-inset-bottom)); }
  .asf-mobile-nav-actions { padding-bottom: max(16px, env(safe-area-inset-bottom)); }
}

/* Tap targets: never smaller than 44×44 (WCAG 2.5.5 AAA) */
.asf-btn-sm, .asf-topbar-btn, .asf-pill, .asf-icon-btn {
  min-height: 44px;
  min-width: 44px;
}

/* Stronger focus ring on dark backgrounds (announcement bar, footer, navy hero) */
.asf-announcement-bar a:focus-visible,
.asf-footer a:focus-visible,
.asf-topbar a:focus-visible {
  outline: 3px solid #FBBF24 !important;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Print stylesheet — clean hard copies of certificates / receipts */
@media print {
  .asf-topbar, .asf-announcement-bar, .asf-header, .asf-mobile-nav,
  .asf-back-to-top, .asf-cookie-banner, .asf-chatbot, .asf-footer,
  .asf-idle-modal { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
  a { color: #000 !important; text-decoration: underline; }
  a[href]::after { content: " (" attr(href) ")"; font-size: 0.85em; color: #555; }
  .asf-card, .asf-receipt, .asf-certificate { box-shadow: none !important; border: 1px solid #999 !important; }
}


/* ============================================================
   Global no-horizontal-scroll guard
   ============================================================
   Even with carefully sized sections, a single oversized image, third-party
   embed, or long word can spawn a horizontal scrollbar that ruins the
   premium feel. This guard clips horizontal overflow at the document root
   while preserving vertical scroll. Word-break stops long URLs from blowing
   out narrow mobile viewports.
*/
html, body {
  max-width: 100%;
  overflow-x: hidden;
}
img, video, iframe, table {
  max-width: 100%;
}
* {
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.asf-container,
section,
header,
main,
footer {
  max-width: 100%;
}


/* ============================================================
   Dynamic Logo (desktop / mobile auto-switch)
   ============================================================
   Customizer admins can upload separate logos for desktop, mobile, and
   footer. CSS shows the right one at the right breakpoint. If only one
   logo is uploaded, both span placeholders render the same image so
   nothing breaks.
*/
.asf-logo-wrap { display: inline-flex; align-items: center; }
.asf-logo-wrap .asf-logo,
.asf-logo-wrap .asf-logo-text { display: inline-flex; align-items: center; }
.asf-logo-wrap .asf-logo-mobile { display: none; }

@media (max-width: 768px) {
  .asf-logo-wrap .asf-logo-desktop { display: none; }
  .asf-logo-wrap .asf-logo-mobile  { display: inline-flex; }
}

/* Logo image sizing baseline */
.asf-logo img { display: block; height: auto; }
.asf-logo-desktop .asf-logo img { max-height: 56px; }
.asf-logo-mobile  .asf-logo img { max-height: 44px; }
.asf-logo-footer .asf-logo img  { max-height: 56px; filter: brightness(1.1); }