/**
 * KC Popup Modal – v1.2.0
 */

/* ------------------------------------------------------------------
   CTA trigger — button style
------------------------------------------------------------------ */
.kc-pm__trigger--button {
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  padding:          13px 32px;
  background:       var(--kc-pm-btn-bg, #111);
  color:            var(--kc-pm-btn-color, #fff);
  font-size:        14px;
  font-weight:      600;
  line-height:      1.2;
  letter-spacing:   0.04em;
  border:           2px solid var(--kc-pm-btn-bg, #111);
  border-radius:    4px;
  cursor:           pointer;
  text-decoration:  none;
  transition:       background 200ms ease, color 200ms ease, border-color 200ms ease, opacity 200ms ease;
}

.kc-pm__trigger--button:hover,
.kc-pm__trigger--button:focus-visible {
  opacity: 0.82;
  outline: none;
}

.kc-pm__trigger--button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* ------------------------------------------------------------------
   CTA trigger — simple text link style
------------------------------------------------------------------ */
.kc-pm__trigger--link {
  display:         inline;
  background:      none;
  border:          none;
  padding:         0;
  color:           var(--kc-pm-link-color, inherit);
  font-size:       inherit;
  font-weight:     600;
  line-height:     inherit;
  cursor:          pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition:      opacity 180ms ease;
}

.kc-pm__trigger--link:hover,
.kc-pm__trigger--link:focus-visible {
  opacity: 0.65;
  outline: none;
}

.kc-pm__trigger--link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* ------------------------------------------------------------------
   Scroll lock when modal is open
------------------------------------------------------------------ */
body.kc-pm-body-lock {
  overflow: hidden;
}

/* ------------------------------------------------------------------
   Modal overlay (backdrop)
------------------------------------------------------------------ */
.kc-pm__overlay {
  position:        fixed;
  inset:           0;
  z-index:         var(--kc-pm-z-index, 999998);
  background:      rgba(0, 0, 0, 0.72);
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         24px 16px;
  opacity:         0;
  transition:      opacity 220ms ease;
  /* [hidden] keeps it out of the flow and inaccessible until opened */
}

.kc-pm__overlay[hidden] {
  display: none;
}

.kc-pm__overlay.kc-pm--open {
  opacity: 1;
}

/* ------------------------------------------------------------------
   Modal dialog box
------------------------------------------------------------------ */
.kc-pm__dialog {
  position:         relative;
  background:       #fff;
  border-radius:    8px;
  padding:          48px 40px 40px;
  width:            var(--kc-pm-modal-width-desktop, 100%);
  max-width:        var(--kc-pm-modal-max-width-desktop, min(680px, calc(100vw - 32px)));
  max-height:       88vh;
  overflow-y:       auto;
  box-shadow:       0 24px 64px rgba(0, 0, 0, 0.28);

  /* Slide-up entrance */
  transform:        translateY(16px);
  transition:       transform 220ms ease;
}

.kc-pm__overlay.kc-pm--open .kc-pm__dialog {
  transform: translateY(0);
}

/* ------------------------------------------------------------------
   Close button
------------------------------------------------------------------ */
.kc-pm__close {
  position:      absolute;
  top:           14px;
  right:         14px;
  width:         36px;
  height:        36px;
  padding:       0;
  background:    rgba(0, 0, 0, 0.06);
  border:        none;
  border-radius: 999px;
  cursor:        pointer;
  display:       flex;
  align-items:   center;
  justify-content: center;
  color:         #444;
  transition:    background 180ms ease, color 180ms ease;
  flex-shrink:   0;
}

.kc-pm__close:hover,
.kc-pm__close:focus-visible {
  background: rgba(0, 0, 0, 0.14);
  color:      #000;
  outline:    none;
}

.kc-pm__close:focus-visible {
  outline: 2px solid #444;
  outline-offset: 2px;
}

.kc-pm__close svg {
  width:  18px;
  height: 18px;
  display: block;
}

/* ------------------------------------------------------------------
   Modal title
------------------------------------------------------------------ */
.kc-pm__title {
  margin:      0 0 20px;
  font-size:   22px;
  font-weight: 700;
  line-height: 1.3;
  color:       #111;
  padding-right: 32px; /* clear the close button */
}

/* ------------------------------------------------------------------
   Modal body content
------------------------------------------------------------------ */
.kc-pm__body {
  font-size:   16px;
  line-height: 1.7;
  color:       #333;
}

.kc-pm__body > *:first-child { margin-top:    0; }
.kc-pm__body > *:last-child  { margin-bottom: 0; }

.kc-pm__body p   { margin: 0 0 1em; }
.kc-pm__body h1,
.kc-pm__body h2,
.kc-pm__body h3,
.kc-pm__body h4  { margin: 1.4em 0 0.5em; color: #111; }
.kc-pm__body a   { color: inherit; text-decoration: underline; }
.kc-pm__body a:hover { opacity: 0.7; }

.kc-pm__body img {
  max-width:     100%;
  height:        auto;
  border-radius: 4px;
  display:       block;
}

.kc-pm__body ul,
.kc-pm__body ol {
  padding-left: 1.4em;
  margin:       0 0 1em;
}

.kc-pm__body li { margin-bottom: 0.35em; }

/* ------------------------------------------------------------------
   Mobile
------------------------------------------------------------------ */
@media (max-width: 600px) {
  .kc-pm__dialog {
    width:      var(--kc-pm-modal-width-mobile, 100%);
    max-width:  calc(100vw - 24px);
    padding:    40px 24px 28px;
    max-height: 90vh;
  }

  .kc-pm__title {
    font-size: 18px;
  }

  .kc-pm__body {
    font-size: 15px;
  }
}