/*
 * Rex Popup — frontend styles
 * All selectors prefixed with .rex-popup-* to avoid collisions.
 * Only target Tingle classes inside .rex-popup-modal scope.
 */

/* Author-controlled layout: popup content renders edge-to-edge.
   Anything the popup wants (padding, background, rounded corners)
   is set inside the post_content HTML itself — the plugin adds nothing. */
.rex-popup-modal .rex-popup-inner { padding: 0; margin: 0; }
.rex-popup-modal .rex-popup-inner img { max-width: 100%; height: auto; }

/* Strip Tingle's default white box background/shadow so popup content owns
   its own look. Combined with edge-to-edge padding below, this means the modal
   is invisible until the popup's own HTML paints something. */
.rex-popup-modal .tingle-modal-box { background: transparent; box-shadow: none; }

/* Zero out Tingle's default modal-content padding for centered/fullscreen popups.
   Bar/slide-in variants below still set their own padding explicitly. */
.rex-popup-modal.rex-popup-pos-center .tingle-modal-box__content,
.rex-popup-modal.rex-popup-pos-fullscreen .tingle-modal-box__content { padding: 0; background: transparent; }

/* Position: top bar */
.rex-popup-modal.rex-popup-pos-top-bar .tingle-modal-box {
	width: 100%; max-width: 100%; margin: 0; border-radius: 0;
	position: fixed; top: 0; left: 0; right: 0;
}
.rex-popup-modal.rex-popup-pos-top-bar .tingle-modal-box__content { padding: 18px 24px; }

/* Position: bottom bar */
.rex-popup-modal.rex-popup-pos-bottom-bar .tingle-modal-box {
	width: 100%; max-width: 100%; margin: 0; border-radius: 0;
	position: fixed; bottom: 0; left: 0; right: 0; top: auto;
}
.rex-popup-modal.rex-popup-pos-bottom-bar .tingle-modal-box__content { padding: 18px 24px; }

/* Position: slide-in corners */
.rex-popup-modal.rex-popup-pos-bottom-right .tingle-modal-box,
.rex-popup-modal.rex-popup-pos-bottom-left .tingle-modal-box {
	max-width: 380px; margin: 0; position: fixed; bottom: 20px;
}
.rex-popup-modal.rex-popup-pos-bottom-right .tingle-modal-box { right: 20px; left: auto; }
.rex-popup-modal.rex-popup-pos-bottom-left  .tingle-modal-box { left: 20px;  right: auto; }
.rex-popup-modal.rex-popup-pos-bottom-right .tingle-modal,
.rex-popup-modal.rex-popup-pos-bottom-left  .tingle-modal { background: transparent !important; pointer-events: none; }
.rex-popup-modal.rex-popup-pos-bottom-right .tingle-modal-box,
.rex-popup-modal.rex-popup-pos-bottom-left  .tingle-modal-box { pointer-events: auto; }

/* Fullscreen */
.rex-popup-modal.rex-popup-pos-fullscreen .tingle-modal-box {
	max-width: 100%; width: 100%; height: 100%; margin: 0; border-radius: 0;
}

/* Animations */
.rex-popup-modal.rex-popup-anim-fade.tingle-modal--visible .tingle-modal-box { animation: rexPopupFade .25s ease; }
.rex-popup-modal.rex-popup-anim-slide.tingle-modal--visible .tingle-modal-box { animation: rexPopupSlide .3s ease; }
.rex-popup-modal.rex-popup-anim-zoom.tingle-modal--visible .tingle-modal-box  { animation: rexPopupZoom .25s ease; }
.rex-popup-modal.rex-popup-anim-none .tingle-modal-box { animation: none !important; }

@keyframes rexPopupFade  { from { opacity: 0; } to { opacity: 1; } }
@keyframes rexPopupSlide { from { transform: translateY(40px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes rexPopupZoom  { from { transform: scale(.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* Shortcode trigger button — minimal default, theme should override */
.rex-popup-trigger {
	display: inline-block; padding: 10px 20px; font: inherit; cursor: pointer;
	border: 1px solid currentColor; background: transparent; color: inherit; border-radius: 4px;
}
.rex-popup-trigger:hover { opacity: .85; }