/**
 * Simple Exit Notifier - Frontend Styles
 *
 * @package SimpleExitNotifier
 * @since 2.0.0
 */

/* Modal container */
#simple-exit-notifier-modal {position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; display: none;}

/* Overlay */
.simple-exit-notifier-overlay {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); cursor: pointer;}

/* Modal content */
.simple-exit-notifier-content {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); width: 750px; max-width: 90%; border-radius: 4px; overflow: hidden;}

/* Header */
.simple-exit-notifier-header {padding: 10px 20px; background: #ccc;}
.simple-exit-notifier-header h2 {margin: 0; padding: 0; font-size: 1.5em;}

/* Message */
.simple-exit-notifier-message {padding: 20px 20px 0;}
.simple-exit-notifier-message p {margin: 0 0 1em;}

/* Remember checkbox */
.simple-exit-notifier-remember {padding: 0 20px 10px; text-align: center;}
.simple-exit-notifier-remember label {cursor: pointer; display: inline-flex; align-items: center; gap: 6px;}
.simple-exit-notifier-remember input[type="checkbox"] {width: 16px; height: 16px; margin: 0; cursor: pointer;}

/* Actions */
.simple-exit-notifier-actions {padding: 10px 20px 20px; text-align: center;}
.simple-exit-notifier-content button,
.simple-exit-notifier-content a {margin: 10px; padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; text-decoration: none; display: inline-block; font-size: 1em; transition: opacity 0.2s ease;}
.simple-exit-notifier-content button:hover,
.simple-exit-notifier-content a:hover {opacity: 0.9;}
.simple-exit-notifier-content button:focus,
.simple-exit-notifier-content a:focus {outline: 2px solid #0073aa; outline-offset: 2px;}
.simple-exit-notifier-content button:disabled,
.simple-exit-notifier-content a:disabled {cursor: not-allowed;}

/* Cancel button */
#simple-exit-notifier-cancel {background: #f44336; color: #fff;}

/* Proceed button */
#simple-exit-notifier-proceed {background: #4caf50; color: #fff;}

/* Body class when modal is open - prevents scroll */
body.simple-exit-notifier-modal-open {overflow: hidden;}

/* External link icon */
.chrssen-external-icon {font-size: 0.8em; vertical-align: super; margin: 0 2px;}

/* Animation: Fade (default) */
#simple-exit-notifier-modal.chrssen-animation-fade .simple-exit-notifier-content {opacity: 0; transition: opacity 0.3s ease;}
#simple-exit-notifier-modal.chrssen-animation-fade.chrssen-modal-visible .simple-exit-notifier-content {opacity: 1;}

/* Animation: Slide Up */
#simple-exit-notifier-modal.chrssen-animation-slide-up .simple-exit-notifier-content {transform: translate(-50%, 100%); opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease;}
#simple-exit-notifier-modal.chrssen-animation-slide-up.chrssen-modal-visible .simple-exit-notifier-content {transform: translate(-50%, -50%); opacity: 1;}

/* Animation: Slide Down */
#simple-exit-notifier-modal.chrssen-animation-slide-down .simple-exit-notifier-content {transform: translate(-50%, -200%); opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease;}
#simple-exit-notifier-modal.chrssen-animation-slide-down.chrssen-modal-visible .simple-exit-notifier-content {transform: translate(-50%, -50%); opacity: 1;}

/* Animation: None */
#simple-exit-notifier-modal.chrssen-animation-none .simple-exit-notifier-content {opacity: 1;}