/* =====================================================================
   CONTACT FORM — POPUP NOTIFICATION SYSTEM (NEW FILE)
   -----------------------------------------------------------------
   Adds:
     1. A glassmorphism success / error modal for the contact form.
     2. A loading-spinner state for the "Send Message" button.
   This file only ADDS new styles. It reuses the color, spacing,
   radius, shadow and easing variables already defined in
   css/style.css (:root) so the popup matches the site's look.
   No existing selectors are overridden or removed.
   ===================================================================== */

/* ---------- Submit button loading state ---------- */
.form-submit[disabled] {
  cursor: not-allowed;
  opacity: 0.85;
}

.cf-spinner {
  width: 18px;
  height: 18px;
  border: 2.5px solid rgba(0, 0, 0, 0.15);
  border-top-color: currentColor;
  border-radius: 50%;
  display: inline-block;
  animation: spin 0.7s linear infinite; /* re-uses @keyframes spin from style.css */
  flex-shrink: 0;
}

/* ---------- Overlay (backdrop blur) ---------- */
.cf-popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-3);
  background: rgba(26, 19, 14, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-base), visibility var(--t-base);
}

.cf-popup-overlay.is-visible {
  opacity: 1;
  visibility: visible;
}

/* ---------- Popup card (glassmorphism) ---------- */
.cf-popup {
  position: relative;
  width: 100%;
  max-width: 420px;
  text-align: center;
  padding: var(--sp-6) var(--sp-5) var(--sp-5);
  border-radius: var(--r-xl);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.78));
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: var(--shadow-xl);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  transform: scale(0.82) translateY(24px);
  opacity: 0;
  transition: transform 0.45s var(--ease-bounce), opacity 0.3s var(--ease);
}

.cf-popup-overlay.is-visible .cf-popup {
  transform: scale(1) translateY(0);
  opacity: 1;
}

/* Close button (manual close — used for error popup) */
.cf-popup-close {
  position: absolute;
  top: var(--sp-2);
  right: var(--sp-2);
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--gray-500);
  background: rgba(0, 0, 0, 0.05);
  transition: all var(--t-fast);
}
.cf-popup-close:hover { background: rgba(0, 0, 0, 0.1); color: var(--navy-900); transform: rotate(90deg); }
.cf-popup-close svg { width: 16px; height: 16px; }

/* Hide the close button for the auto-dismissing success popup */
.cf-popup--success .cf-popup-close { display: none; }

/* ---------- Icon ---------- */
.cf-popup-icon {
  width: 84px;
  height: 84px;
  margin: 0 auto var(--sp-4);
}
.cf-popup-icon svg { width: 100%; height: 100%; overflow: visible; }

.cf-icon-circle {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 145;
  stroke-dashoffset: 145;
  animation: cfCircleDraw 0.5s var(--ease) forwards;
}
.cf-popup--success .cf-icon-circle { stroke: var(--success); }
.cf-popup--error .cf-icon-circle { stroke: var(--error); }

.cf-icon-check {
  stroke: var(--success);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 34;
  stroke-dashoffset: 34;
  animation: cfCheckDraw 0.35s var(--ease) 0.45s forwards;
}
.cf-icon-cross {
  stroke: var(--error);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
  animation: cfCheckDraw 0.35s var(--ease) 0.45s forwards;
}

@keyframes cfCircleDraw { to { stroke-dashoffset: 0; } }
@keyframes cfCheckDraw { to { stroke-dashoffset: 0; } }

/* ---------- Text ---------- */
.cf-popup-title {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--navy-900);
  margin-bottom: var(--sp-2);
}
.cf-popup-desc {
  color: var(--gray-700);
  font-size: 0.98rem;
  line-height: 1.55;
  margin-bottom: 0.35rem;
}
.cf-popup-sub {
  color: var(--gray-500);
  font-size: 0.88rem;
  line-height: 1.5;
}

/* ---------- Auto-close progress bar (success only) ---------- */
.cf-popup-progress {
  margin-top: var(--sp-4);
  height: 4px;
  border-radius: var(--r-full);
  background: rgba(76, 143, 46, 0.15);
  overflow: hidden;
  display: none;
}
.cf-popup--success .cf-popup-progress { display: block; }
.cf-popup-progress > span {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--success);
  transform-origin: left;
  transform: scaleX(1);
  transition: transform linear;
}

/* ---------- Manual close button (error popup CTA) ---------- */
.cf-popup-action {
  margin-top: var(--sp-4);
  width: 100%;
}

/* ---------- Mobile responsive ---------- */
@media (max-width: 480px) {
  .cf-popup {
    padding: var(--sp-5) var(--sp-4) var(--sp-4);
    border-radius: var(--r-lg);
  }
  .cf-popup-icon { width: 68px; height: 68px; margin-bottom: var(--sp-3); }
  .cf-popup-title { font-size: 1.2rem; }
  .cf-popup-desc { font-size: 0.92rem; }
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .cf-popup, .cf-popup-overlay, .cf-icon-circle, .cf-icon-check, .cf-icon-cross, .cf-spinner {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}