/* ================== EXTERNAL LINKS (SHARED) ================== */

/* ---- COLOR VARIABLES (default fallback) ---- */
:root {
  --external-popup-confirm-bg: #42706f;
  --external-popup-confirm-hover-bg: #101819;
  --external-popup-confirm-text: #ffffff;

  --external-popup-cancel-bg: #e0e0e0;
  --external-popup-cancel-hover-bg: #d0d0d0;
  --external-popup-cancel-text: #000000;
}

/* ---- External link icon ---- */
.external-link::after {
  content: '';
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  margin-left: 0.2em;
  position: relative;
  top: 0.2em;

  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7zm-9 2h5V3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-5h-2v5H5V5z'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;

  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7zm-9 2h5V3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-5h-2v5H5V5z'/%3E%3C/svg%3E");
  mask-size: contain;
  mask-repeat: no-repeat;

  background-color: currentColor;
}

/* ---- Remove icon where needed ---- */
a.no-external-icon::after,
a.et_pb_button.external-link::after,
.et_pb_image a.external-link::after,
.wp-block-image a.external-link::after {
  display: none !important;
  content: none !important;
}

/* ================== POPUP MODAL ================== */

.popup-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
   z-index: 2147483647 !important;
}

.popup-content {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-sizing: border-box;

  background-color: #fff;
  padding: 1.25rem;

  width: min(31.25rem, calc(100vw - 2rem));
  max-width: 100%;
  max-height: calc(100vh - 2rem);
  overflow: auto;

  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  text-align: left;
}

/* close button */
.popup-content .close-modal {
  position: absolute;
  top: 0.25rem;
  right: 0.5rem;
  background: none;
  border: none;
  font-size: 1.5rem;
  font-weight: bold;
  cursor: pointer;
}

/* modal header icon */
.popup-content h2 .external-link-icon {
  display: inline-flex;
  align-items: center;
  margin-right: 0.25rem;
}

.popup-content h2 .external-link-icon svg {
  width: 1.875rem;
  height: 1.875rem;
  display: block;
  color: currentColor;
}

/* ================== BUTTONS ================== */

.modal-actions {
  display: flex;
  justify-content: center;   /* centers buttons */
  align-items: center;
  gap: 0.75rem;   
  margin-top: 1.25rem;
  flex-wrap: wrap;
}

.external-links-popup-button {
  margin: 0;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  font-size: 1rem;
  font-family: Helvetica, Arial, Lucida, sans-serif !important;
  font-weight: 600;
  text-transform: uppercase !important;
  cursor: pointer;
}
/* primary */
#confirm-exit {
  background-color: var(--external-popup-confirm-bg);
  color: var(--external-popup-confirm-text) !important;
}

#confirm-exit:hover {
  background-color: var(--external-popup-confirm-hover-bg) !important;
}

/* secondary */
#cancel-exit {
  background-color: var(--external-popup-cancel-bg);
  color: var(--external-popup-cancel-text);
}

#cancel-exit:hover {
  background-color: var(--external-popup-cancel-hover-bg);
}

.external-links-popup-button,
.external-links-popup-button:hover,
.external-links-popup-button:focus {
  border: none !important;
  box-shadow: none !important;
}
/* ================== MOBILE ================== */

@media (max-width: 480px) {
  .modal-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }

  .external-links-popup-button {
    width: 100%;
  }
}