/* ===========================================================
   Modals (Under Construction + Contact Form)
   - Shared overlay & container
   - Header, close, body, chips, notes, CTA
   - UC graphic block
   - Small-screen + dark-scheme refinements
   =========================================================== */


/* ---------- Base: overlay ---------- */
/* Apply to: generic .modal-overlay + existing .uc-overlay/#cf-overlay */
.modal-overlay,
.uc-overlay,
#cf-overlay {
  position: fixed;
  inset: 0;
  background: rgba(12, 18, 28, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease-out;
  z-index: 9998;
}

/* Open state (toggled by JS) */
.modal-overlay.is-open,
.uc-overlay.is-open,
#cf-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}


/* ---------- Base: modal container ---------- */
/* Apply to: generic .modal + existing .uc-modal/#cf-modal */
.modal,
.uc-modal,
#cf-modal {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 100%;
  max-width: 560px;
  transform: translate(-50%, -50%) scale(0.96);
  opacity: 0;
  pointer-events: none;
  background: #fff;
  color: #0f172a;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 22px 20px 24px;
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.15),
    0 8px 20px rgba(0, 0, 0, 0.08);
  transition:
    opacity 180ms ease-out,
    transform 180ms ease-out;
  z-index: 9999;
}

/* Open state (toggled by JS) */
.modal.is-open,
.uc-modal.is-open,
#cf-modal.is-open {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: auto;
}


/* ---------- Header row ---------- */
/* Apply to both modals; UC already uses .uc-header */
.modal-header,
.uc-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-right: 36px; /* room for the close button */
  margin-bottom: 24px;
}

.modal-header h2,
.uc-header h2 {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
}


/* ---------- Close button ---------- */
/* Same close control class in both modals */
.uc-close-btn,
.modal-close-btn {
  position: absolute;
  right: 12px;
  top: 12px;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 0;
  background: transparent;
  color: #334155;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.uc-close-btn:hover,
.modal-close-btn:hover { background: #f1f5f9; color: #0f172a; }
.uc-close-btn:focus-visible,
.modal-close-btn:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }


/* ---------- Body ---------- */
.modal-body,
.uc-body {
  text-align: center;
}

.uc-lead {
  font-size: 1.375rem;
  font-weight: 800;
  margin: 6px 0 10px;
  letter-spacing: -0.01em;
}

.uc-copy {
  color: #475569;
  line-height: 1.55;
  margin: 0 0 16px;
}


/* ---------- Chips (UC) ---------- */
.uc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin: 0 0 16px;
}
.uc-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  background: #eef2ff;
  color: #334155;
  border: 1px solid #e2e8f0;
}


/* ---------- Note box (UC) ---------- */
.uc-note {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  padding: 12px 14px;
}
.uc-note-title { margin: 0 0 4px; color: #1e40af; font-weight: 700; }
.uc-note-copy  { margin: 0; color: #1d4ed8; font-size: 12.5px; }


/* ---------- CTA button (shared) ---------- */
.uc-cta,
.modal-cta {
  margin-top: 18px;
  width: 100%;
  height: 40px;
  border: 0;
  border-radius: 10px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(to right, var(--btn-blue), var(--btn-purple));
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(0,0,0,.12);
  transition: filter 140ms ease, transform 40ms ease, box-shadow 140ms ease;
}
.uc-cta:hover,
.modal-cta:hover { filter: brightness(1.03); box-shadow: 0 8px 16px rgba(0,0,0,.16); }
.uc-cta:active,
.modal-cta:active { transform: translateY(1px); }
.uc-cta:focus-visible,
.modal-cta:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }


/* ---------- UC Graphic Block ---------- */
.uc-graphic {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px 0 18px;
}
.uc-graphic-wrap { position: relative; display: inline-block; }

.uc-graphic-main {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;               /* p-6 */
  border-radius: 9999px;       /* full */
  background: #fff7ed;         /* orange-50 analog */
}
.uc-graphic-hammer { color: #f97316; }   /* orange-500 analog */

.uc-graphic-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  padding: 8px;                /* p-2 */
  border-radius: 9999px;
  background: #fef3c7;         /* yellow-100 analog */
}
.uc-graphic-badge-icon { color: #ca8a04; } /* yellow-600 analog */


/* ---------- Small screens ---------- */
@media (max-width: 420px) {
  .modal,
  .uc-modal,
  #cf-modal { padding: 18px 14px 20px; }
}

@media (max-width: 380px) {
  .uc-graphic-main { padding: 18px; }
  .uc-graphic-hammer { width: 52px; height: 52px; }
  .uc-graphic-badge { top: -6px; right: -6px; padding: 6px; }
  .uc-graphic-badge-icon { width: 18px; height: 18px; }
}


/* ---------- Dark-scheme refinements ---------- */
@media (prefers-color-scheme: dark) {
  .modal,
  .uc-modal,
  #cf-modal {
    background: #0b1221;
    color: #e5edff;
    border-color: #1f2a44;
    box-shadow:
      0 20px 50px rgba(0, 0, 0, 0.5),
      0 8px 20px rgba(0, 0, 0, 0.3);
  }

  .uc-close-btn,
  .modal-close-btn { color: #c7d2fe; }
  .uc-close-btn:hover,
  .modal-close-btn:hover { background: rgba(255,255,255,0.06); color: #fff; }

  .uc-copy { color: #c7d2fe; }
  .uc-chip {
    background: rgba(99,102,241,0.15);
    color: #e5edff;
    border-color: rgba(148,163,184,0.35);
  }
  .uc-note {
    background: rgba(30,64,175,0.25);
    border-color: rgba(30,64,175,0.55);
  }
  .uc-note-title,
  .uc-note-copy { color: #bfdbfe; }
}