/* Connect-with-an-expert modal styles. Depends on .modal-backdrop/.modal/.modal-actions
 * from site-nav.css and the page-level --brand-primary / --text variables.
 *
 * The .expert-modal scope overrides any host-page `.modal p` / `.modal h3` rules
 * so the partner-detail modal renders the same on the SPA and the resource page. */

.modal.expert-modal h3 { font-size: 1.125rem; font-weight: 600; color: var(--text); margin: 0; }
.modal.expert-modal p { font-size: 1rem; color: var(--text); line-height: 1.55; margin: 0; }
.modal.expert-modal p.expert-disclosure { font-size: 0.75rem; color: #666; line-height: 1.5; margin-top: 1rem; }
.modal.expert-modal a { color: var(--brand-primary); }
.modal.expert-modal a:hover { color: var(--brand-primary-hover); }

.expert-celebrate { display: flex; align-items: flex-start; gap: 0.75rem; margin: -0.25rem -0.25rem 1.25rem; padding: 0.875rem 1rem; border-radius: 8px; background: linear-gradient(135deg, rgba(74,124,89,0.12), rgba(74,124,89,0.04)); }
.expert-celebrate-icon { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--brand-primary); color: #fff; display: flex; align-items: center; justify-content: center; }
.expert-celebrate-text { font-size: 0.9375rem; line-height: 1.45; color: var(--text); min-width: 0; }
.expert-disclosure { margin-top: 1rem; font-size: 0.75rem; line-height: 1.5; color: #666; }

/* Post-submit success view: animated check-draw on a popping green disc, with
 * a soft halo that scales out behind it. ~700ms total, prefers-reduced-motion
 * collapses to a static icon. */
.expert-success { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 1rem 0 1.5rem; }
.expert-success-disc { position: relative; width: 64px; height: 64px; margin-bottom: 1.75rem; }
.expert-success-halo { position: absolute; inset: 0; border-radius: 50%; background: var(--brand-primary); opacity: 0.35; animation: expertSuccessHalo 0.9s 0.1s cubic-bezier(0.16, 1, 0.3, 1) both; }
.expert-success-icon { position: relative; width: 64px; height: 64px; border-radius: 50%; background: var(--brand-primary); color: #fff; display: flex; align-items: center; justify-content: center; animation: expertSuccessPop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.expert-success-icon svg { width: 36px; height: 36px; }
.expert-success-icon polyline { stroke-dasharray: 30; stroke-dashoffset: 30; animation: expertSuccessDraw 0.4s 0.3s ease-out both; }
.expert-success h3 { margin: 0 0 0.875rem; }
.expert-success p { margin: 0; max-width: 32ch; }

@keyframes expertSuccessPop { 0% { transform: scale(0.2); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes expertSuccessDraw { to { stroke-dashoffset: 0; } }
@keyframes expertSuccessHalo { 0% { transform: scale(1); opacity: 0.4; } 100% { transform: scale(2.4); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .expert-success-halo { display: none; }
  .expert-success-icon, .expert-success-icon polyline { animation: none; }
  .expert-success-icon polyline { stroke-dashoffset: 0; }
}

@media (max-width: 600px) {
  .modal-backdrop:has(.expert-celebrate) .modal {
    max-width: none;
    width: 100%;
    height: 100%;
    border-radius: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
  }
}