.ykp-wrapper { display:inline-block; }

/* Trigger button (theme can override freely) */
.ykp-trigger {
  background: #02d308;
  color: #fff;
  font-weight: bold;
  border: white;
  border-radius: 10px;
  font-size: 17px;
  width: 60%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0.6em 1em;
  cursor: pointer;
}
.ykp-trigger:hover { filter: brightness(0.98); }

/* Modal */
.ykp-backdrop[hidden],
.ykp-modal[hidden] { display: none; }

.ykp-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.45);
  z-index: 9998;
}

.ykp-modal {
  position: fixed; inset: 0; display: grid; place-items: center;
  z-index: 9999; padding: 16px;
}

.ykp-dialog {
  width: min(680px, 92vw);
  background: #fff; border-radius: 12px; overflow: hidden;
  box-shadow: 0 20px 50px rgba(0,0,0,.2);
  position: relative;
}

.ykp-body { padding: 20px; }

.ykp-close {
  position: absolute; top: 8px; right: 10px;
  font-size: 24px; line-height: 1; background: transparent; border: 0; cursor: pointer;
  width: 40px; height: 40px; display: grid; place-items: center; border-radius: 8px;
}
.ykp-close:hover { background: #fafafa; }
.ykp-close:focus { outline: 3px solid rgba(0, 120, 255, 0.35); outline-offset: 2px; }

.ykp-image img { display: block; width: 100%; height: auto; border-radius: 8px; margin-bottom: 12px; }

.ykp-text { font-size: 15px; line-height: 1.7; margin: 12px 0; word-break: break-word; }

.ykp-actions { display: flex; gap: 10px; }

/* Copy button style */
.ykp-copy {
  padding: 0.5em 0.9em;
  border-radius: 8px;
  border: 1px solid #58c43b;
  background: #5dce3e;
  color: #ffffff;
  font-weight: 700;
  cursor: pointer;
}
.ykp-copy:hover { filter: brightness(0.97); }