/* ═══════════════════════════════════════════════════════════════════════════
   SETTLEMENTRADAR — Visual Fluidity Pass
   Task #987919: Sitewide smooth corners, kill harsh outlines, fluid feel

   LOADING ORDER: After unified-settlement-card-977882.css, BEFORE contrast-guardian.css
   PURPOSE: Global visual polish — border-radius consistency, soft shadows,
            smooth transitions, kill rogue outlines. Makes every element feel
            intentionally placed and butter-smooth.

   RESPECTS: prefers-reduced-motion throughout.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════════
   §1 — DESIGN TOKENS (Fluidity Layer)
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  /* Border-radius scale */
  --vf-radius-xs: 6px;
  --vf-radius-sm: 8px;
  --vf-radius-md: 12px;
  --vf-radius-lg: 16px;
  --vf-radius-xl: 20px;
  --vf-radius-pill: 9999px;

  /* Shadows — layered, soft */
  --vf-shadow-sm: 0 1px 2px rgba(0,0,0,0.04), 0 1px 3px rgba(0,0,0,0.06);
  --vf-shadow-md: 0 1px 3px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.04);
  --vf-shadow-lg: 0 2px 6px rgba(0,0,0,0.05), 0 8px 24px rgba(0,0,0,0.06);
  --vf-shadow-xl: 0 4px 12px rgba(0,0,0,0.06), 0 16px 40px rgba(0,0,0,0.08);

  /* Focus ring (keyboard-only) */
  --vf-focus-ring: 0 0 0 3px rgba(5,150,105,0.25);
  --vf-focus-ring-offset: 0 0 0 2px #fff, 0 0 0 4px rgba(5,150,105,0.3);

  /* Transition timing */
  --vf-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --vf-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --vf-duration: 0.2s;
  --vf-duration-slow: 0.3s;

  /* Soft border color (replaces hard borders) */
  --vf-border-soft: rgba(0,0,0,0.06);
  --vf-border-subtle: rgba(0,0,0,0.08);
}


/* ═══════════════════════════════════════════════════════════════════════════
   §2 — KILL ROGUE OUTLINES
   Remove default browser outlines on mouse click. Preserve :focus-visible
   for keyboard navigation (WCAG 2.4.7). This is the #1 visual jank killer.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Remove ALL focus outlines by default */
*:focus {
  outline: none !important;
}

/* Restore accessible focus ring ONLY for keyboard navigation */
*:focus-visible {
  outline: none !important;
  box-shadow: var(--vf-focus-ring) !important;
}

/* Inputs/textareas get a subtler focus treatment */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  box-shadow: 0 0 0 3px rgba(5,150,105,0.2) !important;
  border-color: rgba(5,150,105,0.5) !important;
}

/* Links and buttons: ring with white offset for visibility on any bg */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
  box-shadow: var(--vf-focus-ring-offset) !important;
  border-radius: inherit;
}


/* ═══════════════════════════════════════════════════════════════════════════
   §3 — BORDER-RADIUS CONSISTENCY
   Standard: 12px cards, 16px modals/hero, 8px inputs/buttons, 9999px pills
   ═══════════════════════════════════════════════════════════════════════════ */

/* --- Cards: 12px standard --- */
.card,
.cs-card,
.dir-card,
.sotw-card,
.sotw-archive-card,
.twd-card,
.sm-match-card,
.sm-audience-card,
.sm-vp-card,
.sm-bank-card,
.sm-connect-card,
.progress-card,
.tool-card,
.tier-card,
.sr2-card-header,
.dir-state-card,
[class*="card"]:not([class*="card-"]):not(.badge):not([class*="badge"]),
.la-card,
.tw-card,
.sl-card,
.lb-card,
.expiring-card,
.pcd-alert-section,
.quiz-alert-capture,
.sidebar-pro-alert {
  border-radius: var(--vf-radius-md) !important;
}

/* --- Modals & overlays: 16px --- */
.modal-content,
.modal-inner,
.sm-checkout-modal,
.cmp-modal-box,
.cr-modal,
dialog,
dialog[open],
[role="dialog"] {
  border-radius: var(--vf-radius-lg) !important;
}

/* --- Buttons: 8px standard --- */
button:not(.announce-bar-dismiss):not(.bar-dismiss):not(.modal-close):not(.activity-toast-close):not([class*="close"]):not([class*="dismiss"]),
.btn,
[class*="btn-"],
[class*="-btn"]:not(.cfb-chips):not([class*="card-"]),
[role="button"],
a[class*="cta"],
.cta-btn,
.bar-cta,
.hero-cta,
.go-pro-btn,
.claim-btn,
.file-btn,
.checkout-btn,
.sr-btn,
.sm-btn-primary,
.sm-btn-ghost,
.sm-submit-btn,
.rc-btn,
.rc-btn-primary,
.rc-btn-secondary,
.sotw-cta-btn,
.sotw-archive-browse-btn,
.sotw-newsletter-btn,
.btn-subscribe,
.pcd-alert-btn {
  border-radius: var(--vf-radius-sm) !important;
}

/* --- Inputs & selects: 8px --- */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="date"],
input:not([type]),
select,
textarea,
.form-input,
.form-select,
.form-textarea,
.aup-input,
.aup-input-pw,
.sm-form-input,
.sm-form-select,
.sm-email-input,
.sotw-newsletter-input,
.tw-email-input,
.tl-capture-input,
.tools-email-input,
.sidebar-email-input,
.gsc-email-input,
.tq-email-input,
.pcd-alert-input,
.link-input,
.share-form-input,
.sr-link-input {
  border-radius: var(--vf-radius-sm) !important;
}

/* --- Pills & badges: fully rounded --- */
.badge,
[class*="badge-"],
[class*="badge--"],
.sm-cat-badge,
.sm-plan-badge,
.sm-match-badge,
.nav-tag,
.tier-pill,
.twd-chip,
[class*="twd-chip-"],
[class*="-pill"],
[class*="-tag"]:not(body):not(html):not(main):not(nav):not(header):not(footer):not(section):not(article) {
  border-radius: var(--vf-radius-pill) !important;
}

/* --- Dropdowns: 12px --- */
.nav-more-dropdown,
.nav-account-dropdown,
.nav-search-dropdown,
.nav-search-dropdown--mobile,
.fmc-dropdown,
.fa-hero-search-dropdown,
.cmp-search-dropdown,
.cmc-dropdown,
.dropdown-menu,
.dropdown {
  border-radius: var(--vf-radius-md) !important;
}

/* --- Toasts & notifications: 12px --- */
.toast,
.tq-toast,
.activity-toast,
[class*="toast"],
.alert,
[class*="alert-"]:not(.pcd-alert-section):not(.pcd-alert-inner):not(.pcd-alert-btn):not(.pcd-alert-input) {
  border-radius: var(--vf-radius-md) !important;
}

/* --- Tooltips: 8px --- */
.tooltip,
.tooltip-inner,
[role="tooltip"] {
  border-radius: var(--vf-radius-sm) !important;
}

/* --- Close/dismiss buttons: circle --- */
.modal-close,
.activity-toast-close,
[class*="close-btn"],
.bar-dismiss,
.announce-bar-dismiss,
.cr-modal-close,
.sm-close-modal,
.cmp-modal-close,
button[aria-label="Dismiss"],
button[aria-label="Close"] {
  border-radius: 50% !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   §4 — SOFT BORDERS (Replace Harsh Lines)
   Trade hard 1px solid borders for subtle shadows or very light borders.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Cards: replace hard borders with soft shadow + ultra-light border */
.card,
.cs-card,
.dir-card,
.sotw-card,
.sotw-archive-card,
.sm-match-card,
.sm-audience-card,
.sm-vp-card,
.sm-bank-card,
.sm-connect-card,
.progress-card,
.tool-card,
.tier-card,
.la-card,
.tw-card,
.sl-card,
.lb-card,
.expiring-card {
  border: 1px solid var(--vf-border-soft) !important;
  box-shadow: var(--vf-shadow-md) !important;
}

/* Card hover: lift + stronger shadow */
.card:hover,
.cs-card:hover,
.dir-card:hover,
.sotw-card:hover,
.sm-match-card:hover,
.la-card:hover,
.tw-card:hover,
.sl-card:hover,
.lb-card:hover,
.expiring-card:hover,
.tool-card:hover,
.tier-card:hover {
  box-shadow: var(--vf-shadow-lg) !important;
  border-color: var(--vf-border-subtle) !important;
}

/* Modals: stronger elevation shadow */
.modal-content,
.modal-inner,
.sm-checkout-modal,
.cmp-modal-box,
.cr-modal,
dialog[open],
[role="dialog"] {
  border: 1px solid var(--vf-border-soft) !important;
  box-shadow: var(--vf-shadow-xl) !important;
}

/* Dropdowns: soft shadow, subtle border */
.nav-more-dropdown,
.nav-account-dropdown,
.nav-search-dropdown,
.nav-search-dropdown--mobile,
.fmc-dropdown,
.fa-hero-search-dropdown,
.cmp-search-dropdown,
.cmc-dropdown,
.dropdown-menu,
.dropdown {
  border: 1px solid var(--vf-border-soft) !important;
  box-shadow: var(--vf-shadow-lg) !important;
}

/* Toasts: subtle shadow */
.toast,
.tq-toast,
.activity-toast,
[class*="toast"] {
  border: 1px solid var(--vf-border-soft) !important;
  box-shadow: var(--vf-shadow-md) !important;
}

/* Inputs: soft border, darken on focus */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="date"],
input:not([type]),
select,
textarea,
.form-input,
.form-select,
.form-textarea,
.aup-input,
.aup-input-pw,
.sm-form-input,
.sm-form-select,
.sm-email-input,
.sotw-newsletter-input,
.tw-email-input,
.pcd-alert-input {
  border: 1px solid rgba(0,0,0,0.12) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important;
}

/* Input focus: darker border + subtle glow */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input:not([type]):focus,
select:focus,
textarea:focus,
.form-input:focus,
.form-select:focus,
.form-textarea:focus,
.aup-input:focus,
.aup-input-pw:focus,
.sm-form-input:focus,
.sm-form-select:focus,
.sm-email-input:focus {
  border-color: rgba(5,150,105,0.4) !important;
  box-shadow: 0 0 0 3px rgba(5,150,105,0.12), 0 1px 2px rgba(0,0,0,0.04) !important;
}

/* Section dividers: softer */
hr,
.divider,
[class*="divider"] {
  border-color: var(--vf-border-soft) !important;
  opacity: 0.7;
}


/* ═══════════════════════════════════════════════════════════════════════════
   §5 — SMOOTH TRANSITIONS (Global)
   Everything interactive gets smooth state changes. 200-300ms ease.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Links */
a {
  transition: color var(--vf-duration) var(--vf-ease),
              opacity var(--vf-duration) var(--vf-ease) !important;
}

/* Inputs: smooth border/shadow changes */
input,
select,
textarea {
  transition: border-color var(--vf-duration) var(--vf-ease),
              box-shadow var(--vf-duration) var(--vf-ease),
              background-color var(--vf-duration) var(--vf-ease) !important;
}

/* Cards: smooth hover lift */
.card,
.cs-card,
.dir-card,
.sotw-card,
.sm-match-card,
.la-card,
.tw-card,
.sl-card,
.lb-card,
.expiring-card,
.tool-card,
.tier-card {
  transition: transform var(--vf-duration-slow) var(--vf-ease),
              box-shadow var(--vf-duration-slow) var(--vf-ease),
              border-color var(--vf-duration-slow) var(--vf-ease) !important;
}

/* Card hover: subtle lift */
.card:hover,
.cs-card:hover,
.dir-card:hover,
.sotw-card:hover,
.sm-match-card:hover,
.la-card:hover,
.tw-card:hover,
.sl-card:hover,
.lb-card:hover,
.expiring-card:hover,
.tool-card:hover,
.tier-card:hover {
  transform: translateY(-2px) !important;
}

/* Toasts: smooth appearance */
.toast,
.tq-toast,
.activity-toast,
[class*="toast"] {
  transition: opacity var(--vf-duration-slow) var(--vf-ease),
              transform var(--vf-duration-slow) var(--vf-ease),
              box-shadow var(--vf-duration) var(--vf-ease) !important;
}

/* Dropdowns: smooth open (enhanced) */
.nav-more-dropdown,
.nav-account-dropdown,
.fmc-dropdown,
.cmp-search-dropdown,
.cmc-dropdown,
.dropdown-menu,
.dropdown {
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0s !important;
}

/* Badges & chips: smooth color transitions */
.badge,
[class*="badge-"],
[class*="badge--"],
.twd-chip,
[class*="twd-chip-"],
.nav-tag {
  transition: background-color var(--vf-duration) var(--vf-ease),
              color var(--vf-duration) var(--vf-ease),
              transform var(--vf-duration) var(--vf-ease) !important;
}

/* Button hover: subtle shadow lift (enhance existing) */
button:hover,
.btn:hover,
[class*="btn-"]:hover,
[class*="-btn"]:hover,
[role="button"]:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.1), 0 1px 3px rgba(0,0,0,0.06) !important;
}

/* Button active: press down */
button:active,
.btn:active,
[class*="btn-"]:active,
[class*="-btn"]:active,
[role="button"]:active {
  transform: scale(0.98) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08) !important;
}

/* Accordion/collapsible content transitions */
details > summary {
  transition: color var(--vf-duration) var(--vf-ease),
              background-color var(--vf-duration) var(--vf-ease) !important;
  cursor: pointer;
  border-radius: var(--vf-radius-sm);
}
details[open] > summary {
  border-radius: var(--vf-radius-sm) var(--vf-radius-sm) 0 0;
}


/* ═══════════════════════════════════════════════════════════════════════════
   §6 — INPUT FIELD POLISH
   Soft corners, pleasant borders, smooth focus states.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Consistent input height & padding */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="number"],
input:not([type]),
select,
.form-input,
.form-select,
.aup-input,
.sm-form-input,
.sm-form-select {
  -webkit-appearance: none;
  appearance: none;
}

/* Textarea: softer corners */
textarea,
.form-textarea {
  border-radius: var(--vf-radius-sm) !important;
}

/* Search inputs: pill shape */
input[type="search"],
.nav-search-input,
[class*="search-input"],
[class*="search-bar"] input {
  border-radius: var(--vf-radius-pill) !important;
}

/* Checkboxes & radio: rounded */
input[type="checkbox"] {
  border-radius: 4px !important;
}
input[type="radio"] {
  border-radius: 50% !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   §7 — BUTTON POLISH
   Consistent radius, smooth states, no jank.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Primary buttons: smooth hover color shift */
.btn-primary,
.sm-btn-primary,
.rc-btn-primary,
.hero-cta,
.checkout-btn,
.claim-btn,
.file-btn {
  transition: transform 0.2s var(--vf-ease-spring),
              box-shadow 0.2s var(--vf-ease),
              background-color 0.2s var(--vf-ease),
              border-color 0.2s var(--vf-ease) !important;
}

/* Ghost/outline buttons: smooth border transition */
.btn-outline,
.sm-btn-ghost,
.btn-secondary,
.rc-btn-secondary {
  transition: transform 0.2s var(--vf-ease-spring),
              box-shadow 0.2s var(--vf-ease),
              background-color 0.2s var(--vf-ease),
              border-color 0.2s var(--vf-ease),
              color 0.2s var(--vf-ease) !important;
}

/* Pill-shaped CTAs (e.g., "File Now", "Claim") */
.hero-cta,
[class*="cta-btn"],
[class*="cta-pill"] {
  border-radius: var(--vf-radius-pill) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   §8 — MEGA-MENU, DROPDOWN & SEARCH PANEL POLISH
   (Enhance existing transitions from premium-header.css)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Search dropdown: smooth slide + fade */
.nav-search-dropdown {
  border-radius: var(--vf-radius-md) !important;
  border: 1px solid var(--vf-border-soft) !important;
  box-shadow: var(--vf-shadow-lg) !important;
  transition: opacity 0.2s var(--vf-ease),
              transform 0.2s var(--vf-ease) !important;
}

/* Account dropdown: smooth appearance */
.nav-account-dropdown {
  border-radius: var(--vf-radius-md) !important;
  box-shadow: var(--vf-shadow-lg) !important;
  border: 1px solid var(--vf-border-soft) !important;
}

/* Dropdown items: smooth hover */
.nav-more-item,
.nav-more-sub,
.fmc-dropdown-item,
[class*="dropdown-item"],
[class*="dropdown"] a,
[class*="dropdown"] li {
  transition: background-color 0.15s var(--vf-ease),
              color 0.15s var(--vf-ease) !important;
  border-radius: var(--vf-radius-xs) !important;
}

/* Mobile nav menu: smooth slide */
.nav-mobile-menu {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.3s var(--vf-ease) !important;
  border-radius: 0 0 var(--vf-radius-lg) var(--vf-radius-lg) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   §9 — MODAL POLISH
   Smooth open/close, soft overlay, rounded content.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Modal overlay: smooth fade */
.modal-overlay,
.modal-backdrop,
.sm-checkout-modal-overlay,
.cr-modal-backdrop {
  transition: opacity var(--vf-duration-slow) var(--vf-ease) !important;
}

/* Modal content: smooth scale-up entrance */
.modal-content,
.modal-inner,
.sm-checkout-modal,
.cmp-modal-box,
.cr-modal,
dialog[open] {
  transition: transform var(--vf-duration-slow) var(--vf-ease-spring),
              opacity var(--vf-duration-slow) var(--vf-ease) !important;
}

/* Modal close button: circle with smooth hover */
.modal-close,
.sm-close-modal,
.cmp-modal-close,
.cr-modal-close {
  width: 32px !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  border: none !important;
  background: rgba(0,0,0,0.05) !important;
  transition: background-color 0.15s var(--vf-ease),
              transform 0.15s var(--vf-ease) !important;
}
.modal-close:hover,
.sm-close-modal:hover,
.cmp-modal-close:hover,
.cr-modal-close:hover {
  background: rgba(0,0,0,0.1) !important;
  transform: scale(1.05) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   §10 — TOAST & NOTIFICATION POLISH
   ═══════════════════════════════════════════════════════════════════════════ */

.activity-toast {
  border-radius: var(--vf-radius-md) !important;
  box-shadow: var(--vf-shadow-lg) !important;
  border: 1px solid var(--vf-border-soft) !important;
}

.activity-toast-close {
  border-radius: 50% !important;
  transition: background-color 0.15s var(--vf-ease) !important;
}
.activity-toast-close:hover {
  background: rgba(0,0,0,0.08) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   §11 — COMPARISON FLOAT BAR
   ═══════════════════════════════════════════════════════════════════════════ */

#compareFloatBar {
  border-radius: var(--vf-radius-md) !important;
  box-shadow: var(--vf-shadow-xl) !important;
  border: 1px solid var(--vf-border-soft) !important;
  transition: transform var(--vf-duration-slow) var(--vf-ease),
              opacity var(--vf-duration-slow) var(--vf-ease) !important;
}

.cfb-chips {
  border-radius: var(--vf-radius-pill) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   §12 — STICKY FILING BAR
   ═══════════════════════════════════════════════════════════════════════════ */

.sticky-filing-bar {
  transition: transform var(--vf-duration-slow) var(--vf-ease),
              opacity var(--vf-duration-slow) var(--vf-ease) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   §13 — ANNOUNCEMENT BAR
   ═══════════════════════════════════════════════════════════════════════════ */

.announce-bar {
  transition: transform var(--vf-duration-slow) var(--vf-ease),
              opacity var(--vf-duration-slow) var(--vf-ease) !important;
}

.announce-bar-dismiss {
  border-radius: 50% !important;
  transition: background-color 0.15s var(--vf-ease),
              transform 0.15s var(--vf-ease) !important;
}
.announce-bar-dismiss:hover {
  background: rgba(255,255,255,0.15) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   §14 — SCROLL-TO-TOP & FLOATING ELEMENTS
   ═══════════════════════════════════════════════════════════════════════════ */

.scroll-to-top,
#scrollToTop,
[class*="scroll-top"],
[class*="back-to-top"] {
  border-radius: 50% !important;
  box-shadow: var(--vf-shadow-md) !important;
  transition: transform 0.2s var(--vf-ease-spring),
              box-shadow 0.2s var(--vf-ease),
              opacity 0.2s var(--vf-ease) !important;
}
.scroll-to-top:hover,
#scrollToTop:hover,
[class*="scroll-top"]:hover {
  transform: translateY(-2px) scale(1.05) !important;
  box-shadow: var(--vf-shadow-lg) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   §15 — AUTH PAGES (Login/Signup)
   ═══════════════════════════════════════════════════════════════════════════ */

.aup-tabs {
  border-radius: var(--vf-radius-md) !important;
  overflow: hidden;
}
.aup-tab {
  transition: background-color var(--vf-duration) var(--vf-ease),
              color var(--vf-duration) var(--vf-ease) !important;
}
.aup-panel {
  border-radius: var(--vf-radius-md) !important;
}
.aup-group {
  border-radius: var(--vf-radius-sm) !important;
}
.aup-error,
.aup-info,
.aup-success {
  border-radius: var(--vf-radius-sm) !important;
  transition: opacity var(--vf-duration) var(--vf-ease),
              transform var(--vf-duration) var(--vf-ease) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   §16 — PRICING CARDS & TIER ELEMENTS
   ═══════════════════════════════════════════════════════════════════════════ */

[class*="pricing-card"],
[class*="plan-card"],
[class*="tier-card"] {
  border-radius: var(--vf-radius-lg) !important;
  box-shadow: var(--vf-shadow-md) !important;
  border: 1px solid var(--vf-border-soft) !important;
  transition: transform var(--vf-duration-slow) var(--vf-ease),
              box-shadow var(--vf-duration-slow) var(--vf-ease) !important;
}
[class*="pricing-card"]:hover,
[class*="plan-card"]:hover,
[class*="tier-card"]:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--vf-shadow-xl) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   §17 — FOOTER ELEMENTS
   ═══════════════════════════════════════════════════════════════════════════ */

footer a {
  transition: color var(--vf-duration) var(--vf-ease),
              opacity var(--vf-duration) var(--vf-ease) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   §18 — IMAGES & MEDIA
   Rounded edges on images inside cards and content areas.
   ═══════════════════════════════════════════════════════════════════════════ */

.card img,
.cs-card img,
[class*="card"] img:not(.badge img):not(.nav-logo img) {
  border-radius: var(--vf-radius-sm) !important;
}

/* Avatar/profile images: circle */
[class*="avatar"],
[class*="profile-img"],
.activity-toast-avatar img {
  border-radius: 50% !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   §19 — TABLE SOFTENING
   ═══════════════════════════════════════════════════════════════════════════ */

table {
  border-radius: var(--vf-radius-md) !important;
  overflow: hidden;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}
table th,
table td {
  border-color: var(--vf-border-soft) !important;
}
table thead th:first-child {
  border-top-left-radius: var(--vf-radius-md) !important;
}
table thead th:last-child {
  border-top-right-radius: var(--vf-radius-md) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   §20 — REDUCED MOTION
   Respect user preference — disable all transitions/animations.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  .card:hover,
  .cs-card:hover,
  .dir-card:hover,
  .la-card:hover,
  .tw-card:hover,
  .sl-card:hover,
  .lb-card:hover,
  .expiring-card:hover,
  .tool-card:hover,
  .tier-card:hover,
  [class*="pricing-card"]:hover,
  [class*="plan-card"]:hover {
    transform: none !important;
  }
}