html.yeln-modal-open, html.yeln-modal-open body {
  overflow: hidden;
}

.yeln-overlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,var(--yeln-overlay, 0.55));
  z-index: 999999;
  padding: 20px;
}

.yeln-overlay.is-open {
  display: flex;
}

.yeln-modal {
  width: 100%;
  max-width: 520px;
}

.yeln-modal__inner {
  background: #fff;
  border-radius: 6px;
  box-shadow: 0px 0px 8px rgba(0,0,0,0.2);
  padding: 22px 22px 18px;
  border-top: 5px solid var(--yeln-primary, #000);
}

.yeln-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

/**
 * -----------------------------------------------------------------------------
 * Button System – Theme Isolation & Focus Management
 * -----------------------------------------------------------------------------
 * Themes apply global button styles (button:focus, etc.) that override YELN
 * buttons when focus moves into the modal. Solution: explicit state styles
 * with high specificity. Uses :focus-visible for keyboard-only focus rings.
 * -----------------------------------------------------------------------------
 */

/**
 * Base button reset – neutralize inherited/theme properties.
 */
.yeln-overlay .yeln-modal .yeln-btn {
	display: inline-block;
	box-sizing: border-box;
	margin: 0;
	padding: 8px 18px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
	text-shadow: none;
	text-transform: none;
	letter-spacing: normal;
	word-spacing: normal;
	vertical-align: middle;
	white-space: nowrap;
	cursor: pointer;
	border: 1px solid;
	border-radius: 4px;
	outline: none;
	box-shadow: none;
	transition: background-color 0.15s ease, border-color 0.15s ease;
	-webkit-appearance: none;
	appearance: none;
}

/**
 * Suppress theme focus/active styling on all buttons.
 */
.yeln-overlay .yeln-modal .yeln-btn:focus,
.yeln-overlay .yeln-modal .yeln-btn:active {
	outline: none;
	box-shadow: none;
}

/**
 * Keyboard focus ring (accessible).
 */
.yeln-overlay .yeln-modal .yeln-btn:focus-visible {
	outline: 2px solid var(--yeln-focus-ring, #2271b1);
	outline-offset: 2px;
}

/**
 * Secondary button (Cancel/Go Back).
 */
.yeln-overlay .yeln-modal .yeln-btn.yeln-cancel {
	background: var(--yeln-secondary-bg, #f0f0f0);
	border-color: var(--yeln-secondary-border, #8c8f94);
	color: var(--yeln-secondary-text, #1d2327);
}

.yeln-overlay .yeln-modal .yeln-btn.yeln-cancel:hover,
.yeln-overlay .yeln-modal .yeln-btn.yeln-cancel:active {
	background: var(--yeln-secondary-bg-hover, #e5e5e5);
	border-color: var(--yeln-secondary-border-hover, #50575e);
}

/**
 * Primary button (Continue).
 */
.yeln-overlay .yeln-modal .yeln-btn.yeln-btn--primary {
	background: var(--yeln-primary, #000);
	border-color: var(--yeln-primary, #000);
	color: var(--yeln-btn-text, #fff);
}

.yeln-overlay .yeln-modal .yeln-btn.yeln-btn--primary:hover,
.yeln-overlay .yeln-modal .yeln-btn.yeln-btn--primary:active {
	background: var(--yeln-primary-hover, #000);
	border-color: var(--yeln-primary-hover, #000);
}

/**
 * -----------------------------------------------------------------------------
 * Typography Hardening – Modal Title & Description
 * -----------------------------------------------------------------------------
 * Reset properties commonly overridden by theme heading/paragraph styles.
 * -----------------------------------------------------------------------------
 */
.yeln-overlay .yeln-modal .yeln-title,
.yeln-overlay .yeln-modal .yeln-desc {
	padding: 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	letter-spacing: normal;
	text-transform: none;
	word-spacing: normal;
}

.yeln-overlay .yeln-modal .yeln-title {
	margin: 0 0 8px;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--yeln-title-color, #1d2327);
}

.yeln-overlay .yeln-modal .yeln-desc {
	margin: 0 0 18px;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.55;
	color: var(--yeln-desc-color, #444);
}