/* =============================================================
   Rapattoni Modal Link Plugin — Stylesheet
   ============================================================= */

/* ---------- Custom Properties ---------- */
:root {
  --rap-accent:        #2563eb;
  --rap-accent-hover:  #1d4ed8;
  --rap-radius:        12px;
  --rap-shadow:        0 20px 50px rgba(0,0,0,0.3);
  --rap-backdrop-bg:   rgba(0,0,0,0.6);
  --rap-bg:            #ffffff;
  --rap-header-bg:     #f8faff;
  --rap-border:        #eeeeee;
  --rap-text:          #1e293b;
  --rap-text-muted:    #666666;
  --rap-close-hover:   #ef4444;
  --rap-transition:    0.3s ease;
}

/* ---------- Trigger: Link style ---------- */
.rap-trigger--link {
  display:         inline;
  color:           var(--rap-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor:          pointer;
  background:      none;
  border:          none;
  padding:         0;
  font:            inherit;
  transition:      color var(--rap-transition);
}
.rap-trigger--link:hover,
.rap-trigger--link:focus-visible {
  color: var(--rap-accent-hover);
}

/* ---------- Trigger: Button style ---------- */
.rap-trigger--button {
  display:         inline-flex;
  align-items:     center;
  gap:             .45em;
  padding:         .6em 1.4em;
  background:      var(--rap-accent);
  color:           #fff;
  border:          none;
  border-radius:   8px;
  font:            inherit;
  font-weight:     600;
  letter-spacing:  .02em;
  cursor:          pointer;
  text-decoration: none;
  transition:      background var(--rap-transition), transform var(--rap-transition),
                   box-shadow var(--rap-transition);
  box-shadow:      0 2px 8px rgba(37,99,235,.30);
}
.rap-trigger--button:hover,
.rap-trigger--button:focus-visible {
  background:  var(--rap-accent-hover);
  transform:   translateY(-1px);
  box-shadow:  0 4px 16px rgba(37,99,235,.40);
}
.rap-trigger--button:active {
  transform: translateY(0);
}

/* ---------- Overlay ---------- */
.rap-overlay {
  position:        fixed !important;
  inset:           0 !important;
  z-index:         99999999 !important; /* Massive z-index for Divi and other page builders */
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         20px;
  visibility:      hidden !important;
  opacity:         0;
  transition:      opacity var(--rap-transition);
  pointer-events:  none;
  isolation:       isolate;
  will-change:     opacity;
}

.rap-overlay.rap-is-open {
  visibility:     visible !important;
  opacity:        1 !important;
  pointer-events: auto !important;
}

/* ---------- Backdrop ---------- */
.rap-backdrop {
  position:   absolute;
  inset:      0;
  background: var(--rap-backdrop-bg);
  cursor:     pointer;
}

/* ---------- Modal Box ---------- */
.rap-modal {
  position:      relative;
  background:    var(--rap-bg);
  width:         100%;
  max-width:     var(--rap-modal-width, 560px);
  border-radius: var(--rap-radius);
  box-shadow:    var(--rap-shadow);
  overflow:      hidden;
  opacity:       0;
  transform:     translateY(20px);
  transition:    transform var(--rap-transition), opacity var(--rap-transition);
}

.rap-overlay.rap-is-open .rap-modal {
  transform: translateY(0);
  opacity:   1;
}

/* ---------- Header ---------- */
.rap-modal__header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         15px 20px;
  background:      var(--rap-header-bg);
  border-bottom:   1px solid var(--rap-border);
}

.rap-modal__title {
  margin:      0;
  font-size:   1.15rem;
  font-weight: 700;
  color:       var(--rap-text);
  line-height: 1.3;
}

/* ---------- Close Button ---------- */
.rap-modal__close {
  background: none;
  border:     none;
  cursor:     pointer;
  padding:    5px;
  color:      var(--rap-text-muted);
  transition: color var(--rap-transition);
}
.rap-modal__close:hover,
.rap-modal__close:focus-visible {
  color: var(--rap-close-hover);
}
.rap-modal__close svg {
  width:   20px;
  height:  20px;
  display: block;
}

/* ---------- Body ---------- */
.rap-modal__body {
  padding:     25px 20px;
  line-height: 1.6;
  color:       var(--rap-text);
  max-height:  72vh;
  overflow-y:  auto;
}
.rap-modal__body > *:first-child { margin-top: 0; }
.rap-modal__body > *:last-child  { margin-bottom: 0; }

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .rap-overlay,
  .rap-modal {
    transition: none;
  }
}

/* ---------- Mobile ---------- */
@media (max-width: 480px) {
  .rap-overlay {
    align-items: flex-end;
    padding:     0;
  }
  .rap-modal {
    max-width:     100%;
    border-radius: var(--rap-radius) var(--rap-radius) 0 0;
    transform:     translateY(100%);
  }
  .rap-overlay.rap-is-open .rap-modal {
    transform: translateY(0);
  }
}