/* ==========================================================================
   Mystic Widgets Pro - Cosmos Letter Widget
   ========================================================================== */

.mystic-cos-widget *,
.mystic-cos-widget *::before,
.mystic-cos-widget *::after {
  box-sizing: border-box !important;
}

.mystic-cos-widget {
  isolation: isolate !important;
  width: 100% !important;
  max-width: 700px !important;
  min-height: 500px !important;
  margin: 0 auto !important;
  padding: 48px 34px 54px !important;
  position: relative !important;
  overflow: hidden !important;
  display: block !important;
  float: none !important;
  border-radius: 18px !important;
  border: 1px solid rgba(130, 170, 255, .18) !important;
  background: radial-gradient(ellipse at 50% 0%, #0f1e42 0%, #0a1530 45%, #050b1c 100%) !important;
  box-shadow: 0 28px 80px rgba(0, 0, 0, .62), inset 0 0 90px rgba(90, 130, 230, .10) !important;
  font-family: 'EB Garamond', Georgia, serif !important;
  font-size: 16px !important;
  color: #eef3ff !important;
  line-height: 1.5 !important;
}

.mystic-cos-widget::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 0 !important;
  background-image:
    radial-gradient(1px 1px at 9% 15%, rgba(255, 255, 255, .70) 0%, transparent 100%),
    radial-gradient(1px 1px at 21% 38%, rgba(255, 255, 255, .45) 0%, transparent 100%),
    radial-gradient(1px 1px at 34% 12%, rgba(227, 201, 143, .72) 0%, transparent 100%),
    radial-gradient(1px 1px at 52% 24%, rgba(255, 255, 255, .50) 0%, transparent 100%),
    radial-gradient(1px 1px at 68% 11%, rgba(255, 255, 255, .45) 0%, transparent 100%),
    radial-gradient(1px 1px at 88% 42%, rgba(227, 201, 143, .48) 0%, transparent 100%),
    radial-gradient(1px 1px at 14% 67%, rgba(255, 255, 255, .42) 0%, transparent 100%),
    radial-gradient(1px 1px at 46% 78%, rgba(255, 255, 255, .35) 0%, transparent 100%),
    radial-gradient(2px 2px at 75% 72%, rgba(180, 210, 255, .40) 0%, transparent 100%),
    radial-gradient(2px 2px at 92% 80%, rgba(227, 201, 143, .35) 0%, transparent 100%) !important;
  animation: cosStars 3.8s ease-in-out infinite !important;
}

.mystic-cos-widget::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 0 !important;
  background: radial-gradient(circle at 50% 18%, rgba(90, 130, 230, .16) 0%, transparent 34%), linear-gradient(135deg, rgba(227, 201, 143, .06), transparent 42%, rgba(10, 22, 48, .40) 100%) !important;
}

@keyframes cosStars {
  0%, 100% { opacity: .62; }
  50% { opacity: 1; }
}

.mystic-cos-widget .cos-phase {
  display: none !important;
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  animation: cosFadeIn .42s ease both !important;
}

.mystic-cos-widget .cos-phase.active {
  display: block !important;
}

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

.mystic-cos-widget .cos-phase-input,
.mystic-cos-widget .cos-phase-loading {
  text-align: center !important;
}

.mystic-cos-widget .cos-mark {
  display: block !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  font-family: Georgia, serif !important;
  font-size: 38px !important;
  color: #e3c98f !important;
  line-height: 1 !important;
  text-shadow: 0 0 26px rgba(227, 201, 143, .45) !important;
}

.mystic-cos-widget .cos-title {
  margin: 0 0 10px !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  font-family: 'Cinzel', Georgia, serif !important;
  font-size: clamp(24px, 4vw, 34px) !important;
  font-weight: 700 !important;
  color: #eef3ff !important;
  line-height: 1.2 !important;
  letter-spacing: 1.2px !important;
  text-shadow: 0 0 34px rgba(180, 210, 255, .32) !important;
}

.mystic-cos-widget .cos-desc {
  max-width: 560px !important;
  margin: 0 auto 30px !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  font-family: 'EB Garamond', Georgia, serif !important;
  font-size: 17px !important;
  font-style: italic !important;
  font-weight: 400 !important;
  color: rgba(238, 243, 255, .76) !important;
  line-height: 1.55 !important;
}

.mystic-cos-widget .cos-field-label {
  display: block !important;
  margin: 0 0 10px !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  text-align: left !important;
  font-family: 'Cinzel', Georgia, serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #e3c98f !important;
  letter-spacing: 2.8px !important;
  line-height: 1.3 !important;
}

.mystic-cos-widget .cos-question-label {
  margin-top: 18px !important;
}

.mystic-cos-widget .cos-name-input,
.mystic-cos-widget .cos-question-input {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 15px 18px !important;
  border-radius: 10px !important;
  border: 1.5px solid rgba(130, 170, 255, .30) !important;
  outline: none !important;
  background: rgba(255, 255, 255, .055) !important;
  box-shadow: inset 0 0 18px rgba(0, 0, 0, .24) !important;
  font-family: 'EB Garamond', Georgia, serif !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  color: #eef3ff !important;
  line-height: 1.4 !important;
  caret-color: #e3c98f !important;
  appearance: none !important;
  transition: border-color .22s, box-shadow .22s !important;
}

.mystic-cos-widget .cos-question-input {
  min-height: 112px !important;
  resize: vertical !important;
}

.mystic-cos-widget .cos-name-input::placeholder,
.mystic-cos-widget .cos-question-input::placeholder {
  color: rgba(238, 243, 255, .42) !important;
  font-style: italic !important;
}

.mystic-cos-widget .cos-name-input:focus,
.mystic-cos-widget .cos-question-input:focus {
  border-color: rgba(227, 201, 143, .82) !important;
  box-shadow: 0 0 0 3px rgba(227, 201, 143, .10), inset 0 0 18px rgba(0, 0, 0, .24) !important;
}

.mystic-cos-widget .cos-name-input.has-error,
.mystic-cos-widget .cos-question-input.has-error {
  border-color: #e18585 !important;
}

.mystic-cos-widget .cos-error {
  display: none !important;
  margin: 8px 0 0 !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  text-align: left !important;
  font-family: 'EB Garamond', Georgia, serif !important;
  font-size: 14px !important;
  font-style: italic !important;
  font-weight: 500 !important;
  color: #ffc2c2 !important;
  line-height: 1.4 !important;
}

.mystic-cos-widget .cos-error.visible {
  display: block !important;
}

.mystic-cos-widget .cos-btn-open,
.mystic-cos-widget .cos-btn-cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 100% !important;
  margin: 24px 0 0 !important;
  padding: 16px 24px !important;
  border-radius: 999px !important;
  border: 2px solid rgba(227, 201, 143, .55) !important;
  background: linear-gradient(135deg, #2857b7 0%, #112d6f 100%) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .38), 0 0 30px rgba(90, 130, 230, .24) !important;
  cursor: pointer !important;
  text-decoration: none !important;
  font-family: 'Cinzel', Georgia, serif !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #eef3ff !important;
  line-height: 1.1 !important;
  letter-spacing: 1.8px !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .25) !important;
  transition: transform .22s, box-shadow .22s !important;
}

.mystic-cos-widget .cos-btn-open:hover,
.mystic-cos-widget .cos-btn-cta:hover,
.mystic-cos-widget .cos-btn-cta:visited {
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 38px rgba(0, 0, 0, .45), 0 0 46px rgba(90, 130, 230, .36) !important;
  color: #eef3ff !important;
  text-decoration: none !important;
}

.mystic-cos-widget .cos-privacy {
  margin: 15px 0 0 !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  font-family: 'EB Garamond', Georgia, serif !important;
  font-size: 14px !important;
  font-style: italic !important;
  font-weight: 400 !important;
  color: rgba(238, 243, 255, .50) !important;
  line-height: 1.45 !important;
}

.mystic-cos-widget .cos-phase-loading {
  padding: 32px 0 14px !important;
}

.mystic-cos-widget .cos-portal {
  width: 96px !important;
  height: 96px !important;
  margin: 0 auto 28px !important;
  padding: 0 !important;
  position: relative !important;
  border: none !important;
  background: none !important;
}

.mystic-cos-widget .cos-portal svg {
  position: relative !important;
  display: block !important;
  width: 96px !important;
  height: 96px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  animation: cosSpin 9s linear infinite !important;
}

.mystic-cos-widget .cos-portal-glow {
  position: absolute !important;
  inset: 14px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(180, 210, 255, .5) 0%, transparent 70%) !important;
  animation: cosPulse 2s ease-in-out infinite !important;
}

@keyframes cosSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes cosPulse {
  0%, 100% { opacity: .45; transform: scale(.92); }
  50% { opacity: 1; transform: scale(1.08); }
}

.mystic-cos-widget .cos-loading-title,
.mystic-cos-widget .cos-result-header,
.mystic-cos-widget .cos-echo-label,
.mystic-cos-widget .cos-msg-label,
.mystic-cos-widget .cos-cta-label {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  font-family: 'Cinzel', Georgia, serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #e3c98f !important;
  line-height: 1.35 !important;
  letter-spacing: 2.6px !important;
  text-transform: uppercase !important;
}

.mystic-cos-widget .cos-loading-title {
  margin-bottom: 10px !important;
  font-size: 14px !important;
  color: #e3c98f !important;
}

.mystic-cos-widget .cos-loading-step {
  display: block !important;
  min-height: 28px !important;
  margin: 0 0 20px !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  font-family: 'EB Garamond', Georgia, serif !important;
  font-size: 17px !important;
  font-style: italic !important;
  font-weight: 500 !important;
  color: rgba(238, 243, 255, .72) !important;
  line-height: 1.45 !important;
}

.mystic-cos-widget .cos-dots {
  display: flex !important;
  justify-content: center !important;
  gap: 8px !important;
  margin: 0 0 24px !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
}

.mystic-cos-widget .cos-dots span {
  display: inline-block !important;
  width: 7px !important;
  height: 7px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 50% !important;
  background: #e3c98f !important;
  animation: cosDot 1s ease-in-out infinite !important;
}

.mystic-cos-widget .cos-dots span:nth-child(2) {
  animation-delay: .18s !important;
}

.mystic-cos-widget .cos-dots span:nth-child(3) {
  animation-delay: .36s !important;
}

@keyframes cosDot {
  0%, 80%, 100% { transform: scale(.65); opacity: .35; }
  40% { transform: scale(1.12); opacity: 1; }
}

.mystic-cos-widget .cos-progress {
  height: 4px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  background: rgba(255, 255, 255, .10) !important;
  max-width: 420px !important;
}

.mystic-cos-widget .cos-progress-fill {
  display: block !important;
  width: 0% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #2857b7, #e3c98f) !important;
  transition: width .08s linear !important;
}

.mystic-cos-widget .cos-result-header {
  text-align: center !important;
  margin-bottom: 18px !important;
}

.mystic-cos-widget .cos-echo {
  margin: 0 0 18px !important;
  padding: 16px 18px !important;
  border: 1px solid rgba(130, 170, 255, .16) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, .045) !important;
  box-shadow: inset 0 0 24px rgba(0, 0, 0, .18) !important;
}

.mystic-cos-widget .cos-echo-label {
  margin-bottom: 8px !important;
}

.mystic-cos-widget .cos-echo-text {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  font-family: 'EB Garamond', Georgia, serif !important;
  font-size: 19px !important;
  font-style: italic !important;
  font-weight: 500 !important;
  color: rgba(238, 243, 255, .86) !important;
  line-height: 1.5 !important;
}

.mystic-cos-widget .cos-echo-text::before {
  content: '"' !important;
}

.mystic-cos-widget .cos-echo-text::after {
  content: '"' !important;
}

.mystic-cos-widget .cos-msg-card {
  margin: 0 0 20px !important;
  padding: 28px 26px !important;
  border: 1px solid rgba(130, 170, 255, .16) !important;
  border-radius: 10px !important;
  background: rgba(90, 130, 230, .1) !important;
  box-shadow: inset 0 0 38px rgba(90, 130, 230, .08), 0 18px 42px rgba(0, 0, 0, .28) !important;
}

.mystic-cos-widget .cos-msg-label {
  margin-bottom: 18px !important;
}

.mystic-cos-widget .cos-visible-text,
.mystic-cos-widget .cos-blur-text {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  white-space: pre-wrap !important;
  font-family: 'EB Garamond', Georgia, serif !important;
  font-size: 17px !important;
  font-style: italic !important;
  font-weight: 500 !important;
  color: #eef3ff !important;
  line-height: 1.78 !important;
}

.mystic-cos-widget .cos-blur-text {
  margin-top: 8px !important;
  filter: blur(4.5px) !important;
  opacity: .70 !important;
  pointer-events: none !important;
  user-select: none !important;
}

.mystic-cos-widget .cos-cta-section {
  text-align: center !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
}

.mystic-cos-widget .cos-cta-label {
  margin-bottom: 12px !important;
  text-align: center !important;
  color: rgba(227, 201, 143, .82) !important;
}

.mystic-cos-widget .cos-btn-cta {
  width: auto !important;
  min-width: min(100%, 360px) !important;
  margin-top: 0 !important;
  animation: cosCtaPulse 2.4s ease-in-out infinite !important;
}

@keyframes cosCtaPulse {
  0%, 100% { box-shadow: 0 10px 30px rgba(0, 0, 0, .38), 0 0 30px rgba(90, 130, 230, .24); }
  50% { box-shadow: 0 14px 44px rgba(0, 0, 0, .48), 0 0 54px rgba(90, 130, 230, .40); }
}

.mystic-cos-widget .cos-cta-sub {
  display: block !important;
  max-width: 490px !important;
  margin: 12px auto 0 !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  font-family: 'EB Garamond', Georgia, serif !important;
  font-size: 15px !important;
  font-style: italic !important;
  font-weight: 500 !important;
  color: rgba(238, 243, 255, .62) !important;
  line-height: 1.45 !important;
}

.mystic-cos-widget .cos-restart {
  display: inline-block !important;
  margin: 18px 0 0 !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
  text-decoration: none !important;
  font-family: 'Cinzel', Georgia, serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  color: rgba(238, 243, 255, .45) !important;
  line-height: 1.2 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
}

.mystic-cos-widget .cos-restart:hover {
  color: rgba(238, 243, 255, .78) !important;
}

@media (max-width: 540px) {
  .mystic-cos-widget {
    padding: 38px 18px 44px !important;
  }

  .mystic-cos-widget .cos-title {
    font-size: 24px !important;
  }

  .mystic-cos-widget .cos-desc {
    font-size: 16px !important;
  }

  .mystic-cos-widget .cos-msg-card {
    padding: 24px 18px !important;
  }

  .mystic-cos-widget .cos-visible-text,
  .mystic-cos-widget .cos-blur-text {
    font-size: 16px !important;
  }

  .mystic-cos-widget .cos-btn-open,
  .mystic-cos-widget .cos-btn-cta {
    font-size: 12px !important;
    letter-spacing: 1.2px !important;
    padding: 15px 18px !important;
  }
}