/* ============================================================================
   CAS Forms — success modal. Visual + animation parity with cas.ai/one-sdk
   /css/modal.css. Selectors namespaced under .cas-form-success-modal so the
   styles don't leak into other markup that may share generic class names
   (e.g. .modal, .step) on the same page.

   Forms can opt out of the default popup with `popup: 'custom'` in the
   registry; in that case the modal markup is still printed but the JS
   bails out, leaving a custom popup (e.g. /referral) free to handle the
   `cas-form:success` event itself.
   ============================================================================ */

.cas-form-success-modal {
  position: fixed;
  inset: 0;
  background: rgba(10, 12, 18, 0.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 10000;
}

.cas-form-success-modal[hidden] { display: none !important; }

.cas-form-success-modal h1,
.cas-form-success-modal h2,
.cas-form-success-modal h3,
.cas-form-success-modal h4 {
  padding: 1rem 0;
}

.cas-form-success-modal ul,
.cas-form-success-modal ol {
  padding-left: 1.5rem;
  margin: 0.5rem 0;
}

.cas-form-success-modal ul { list-style: disc; }
.cas-form-success-modal ol { list-style: decimal; }

.cas-form-success-modal li {
  margin: 0.25rem 0;
}

.cas-form-success-modal p {
  margin: 0.5rem 0;
}

.cas-form-success-modal blockquote {
  margin: 0.75rem 0;
  padding-left: 1rem;
  border-left: 3px solid rgba(1, 114, 253, 0.4);
  color: #a8b2c8;
}

.cas-form-success-modal.is-closing {
  animation: casFormModalOverlayOut 0.35s cubic-bezier(0.4, 0, 1, 1) both;
}

.cas-form-success-modal.is-closing .modal {
  animation: casFormModalSlideDown 0.35s cubic-bezier(0.4, 0, 1, 1) both;
}

@keyframes casFormModalOverlayOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes casFormModalSlideDown {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(16px) scale(0.97); }
}

.cas-form-success-modal .modal {
  font-family: 'Raleway', sans-serif;

  position: relative;
  background: #1f2430;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  max-width: min(680px, 100%);
  width: 100%;
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  animation: casFormModalSlideUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
  box-shadow:
    0 0 0 1px rgba(1, 114, 253, 0.06),
    0 20px 60px rgba(0, 0, 0, 0.45),
    0 4px 16px rgba(0, 0, 0, 0.25);
}

@keyframes casFormModalSlideUp {
  from { opacity: 0; transform: translateY(20px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.cas-form-success-modal .modal::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    #0172fd 25%,
    #4fa3ff 50%,
    #0172fd 75%,
    transparent 100%
  );
  background-size: 250% 100%;
  border-radius: 20px 20px 0 0;
  animation: casFormShimmerLine 3s 0.6s ease-in-out infinite;
}

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

.cas-form-success-modal .modal::after {
  content: '';
  position: absolute;
  top: -50px; right: -50px;
  width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(1, 114, 253, 0.08) 0%, transparent 65%);
  pointer-events: none;
}

.cas-form-success-modal .modal-header {
  padding: 44px 44px 0;
  position: relative;
  z-index: 1;
}

.cas-form-success-modal .success-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(1, 114, 253, 0.1);
  border: 1px solid rgba(1, 114, 253, 0.22);
  border-radius: 100px;
  padding: 5px 13px 5px 10px;
  margin-bottom: 18px;
  animation: casFormModalFadeUp 0.4s 0.25s both;
}

@keyframes casFormModalFadeUp {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: translateY(0); }
}

.cas-form-success-modal .badge-icon {
  width: 20px; height: 20px;
  background: #0172fd;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.cas-form-success-modal .badge-icon svg { display: block; }

.cas-form-success-modal .check-path {
  stroke-dasharray: 18;
  stroke-dashoffset: 18;
  animation: casFormDrawCheck 0.45s 0.55s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes casFormDrawCheck {
  to { stroke-dashoffset: 0; }
}

.cas-form-success-modal .badge-text {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #4fa3ff;
}

.cas-form-success-modal .modal-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 25px;
  font-weight: 700;
  color: #eceef6;
  line-height: 1.3;
  margin: 0;
  /* Lets translators ship a single string; browsers that support it pick the
     prettiest break point, others fall back to natural wrapping. */
  text-wrap: balance;
  animation: casFormModalFadeUp 0.4s 0.35s both;
}

.cas-form-success-modal .modal-subtitle {
  margin: 12px 0 0;
  font-size: 17px;
  color: #a8b2c8;
  line-height: 1.7;
  animation: casFormModalFadeUp 0.4s 0.45s both;
}

.cas-form-success-modal .divider {
  height: 1px;
  background: rgba(255,255,255,0.07);
  margin: 28px 44px;
  animation: casFormModalFadeUp 0.4s 0.5s both;
}

.cas-form-success-modal .modal-body {
  padding: 0 44px;
  position: relative;
  z-index: 1;
}

.cas-form-success-modal .next-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #7282a0;
  margin-bottom: 16px;
  animation: casFormModalFadeUp 0.4s 0.55s both;
}

.cas-form-success-modal .steps {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.cas-form-success-modal .steps::before {
  content: '';
  position: absolute;
  left: 29px;
  top: 28px;
  bottom: 28px;
  width: 2px;
  background: linear-gradient(
    to bottom,
    rgba(1, 114, 253, 0.55),
    rgba(1, 114, 253, 0.12)
  );
  border-radius: 2px;
  animation: casFormModalFadeUp 0.4s 0.75s both;
}

.cas-form-success-modal .step {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  background: #252b38;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.07);
  animation: casFormModalFadeUp 0.4s both;
  transition: border-color 0.2s, background 0.2s;
  margin-bottom: 10px;
}

.cas-form-success-modal .step:last-child { margin-bottom: 0; }

.cas-form-success-modal .step:hover {
  border-color: rgba(1, 114, 253, 0.25);
  background: rgba(37, 43, 56, 0.9);
}

.cas-form-success-modal .step:nth-child(1) { animation-delay: 0.6s; }
.cas-form-success-modal .step:nth-child(2) { animation-delay: 0.7s; }
.cas-form-success-modal .step:nth-child(3) { animation-delay: 0.8s; }

.cas-form-success-modal .step-num {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: #0172fd;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #ffffff;
  margin-top: 1px;
  box-shadow: 0 0 0 3px #252b38;
  position: relative;
}

.cas-form-success-modal .step-text {
  font-size: 15px;
  color: #a8b2c8;
  line-height: 1.65;
  padding-top: 5px;
  margin: 0;
}

.cas-form-success-modal .modal-footer {
  padding: 26px 44px 38px;
  position: relative;
  z-index: 1;
  animation: casFormModalFadeUp 0.4s 0.85s both;
}

.cas-form-success-modal .btn-modal {
  display: block;
  width: 100%;
  padding: 15px 28px;
  background: #0172fd;
  border: none;
  border-radius: 12px;
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
  cursor: pointer;
  letter-spacing: 0.03em;
  transition: background 0.18s, transform 0.15s, box-shadow 0.18s;
  box-shadow: 0 2px 16px rgba(1, 114, 253, 0.35);
}

.cas-form-success-modal .btn-modal:hover {
  background: #0161dc;
  transform: translateY(-1px);
  box-shadow: 0 4px 24px rgba(1, 114, 253, 0.5);
}

.cas-form-success-modal .btn-modal:active { transform: translateY(0); }

.cas-form-success-modal .close-btn {
  position: absolute;
  top: 16px; right: 16px;
  width: 34px; height: 34px;
  background: #252b38;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: background 0.15s, border-color 0.15s;
  color: #7282a0;
}

.cas-form-success-modal .close-btn:hover {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.1);
  color: #a8b2c8;
}

@media (max-height: 640px) {
  .cas-form-success-modal {
    align-items: flex-start;
    padding-top: 12px;
  }
}

@media (max-width: 600px) {
  .cas-form-success-modal { padding: 16px; }
  .cas-form-success-modal .modal { border-radius: 20px; }
  .cas-form-success-modal .modal-header { padding: 28px 24px 0; }
  .cas-form-success-modal .success-badge { margin-bottom: 14px; }
  .cas-form-success-modal .modal-title { font-size: 20px; }
  .cas-form-success-modal .modal-subtitle {
    font-size: 14px;
    line-height: 1.55;
    margin-top: 10px;
  }
  .cas-form-success-modal .divider { margin: 20px 24px; }
  .cas-form-success-modal .modal-body { padding: 0 24px; }
  .cas-form-success-modal .next-label { margin-bottom: 12px; }
  .cas-form-success-modal .step {
    padding: 10px 12px;
    margin-bottom: 8px;
    gap: 12px;
  }
  .cas-form-success-modal .step-text {
    font-size: 13px;
    line-height: 1.5;
    padding-top: 4px;
  }
  .cas-form-success-modal .modal-footer { padding: 20px 24px 26px; }
  .cas-form-success-modal .btn-modal {
    padding: 13px 24px;
    font-size: 14px;
  }
}

@media (max-width: 375px) {
  .cas-form-success-modal { padding: 12px; }
  .cas-form-success-modal .modal-header { padding: 22px 20px 0; }
  .cas-form-success-modal .modal-title { font-size: 18px; }
  .cas-form-success-modal .modal-subtitle { font-size: 13px; }
  .cas-form-success-modal .divider { margin: 16px 20px; }
  .cas-form-success-modal .modal-body { padding: 0 20px; }
  .cas-form-success-modal .step { padding: 9px 10px; }
  .cas-form-success-modal .step-text { font-size: 12px; }
  .cas-form-success-modal .modal-footer { padding: 16px 20px 22px; }
}