/*
###############################################################################################################################################################
XPLOO NOTIFICATIONS
###############################################################################################################################################################
*/

/*
###############################################################################################################################################################
PWA INSTALLATION SYSTEM - BANNERS
###############################################################################################################################################################
*/

.xploo-pwa-banner {
    font-family: var(--PWA_FONT_FAMILY);
}

/* Banner Content - Base Styles */
.xploo-pwa-banner-content {
    color: var(--PWA_COLOR_WHITE);
    padding: var(--PWA_BANNER_PADDING);
    z-index: var(--PWA_Z_INDEX_BANNER);
}

/* Banner Content - Desktop */
.xploo-pwa-banner-content.desktop {
    position: fixed;
    bottom: var(--PWA_BANNER_DESKTOP_BOTTOM);
    right: var(--PWA_BANNER_DESKTOP_RIGHT);
    border-radius: var(--PWA_BANNER_BORDER_RADIUS);
    border: var(--PWA_BANNER_BORDER);
    animation: slideInUp var(--PWA_BANNER_ANIMATION_DURATION) ease-out;
}

/* Banner Content - Mobile */
.xploo-pwa-banner-content.mobile {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    box-shadow: var(--PWA_BANNER_SHADOW);
    animation: slideDown var(--PWA_BANNER_ANIMATION_DURATION) ease-out;
}

/* Banner Color Schemes */
.xploo-pwa-banner-content.install {
    background: var(--PWA_COLOR_INSTALL);
    box-shadow: var(--PWA_COLOR_INSTALL_SHADOW);
}

.xploo-pwa-banner-content.open-app {
    background: var(--PWA_COLOR_OPEN_APP);
    box-shadow: var(--PWA_COLOR_OPEN_APP_SHADOW);
}

.xploo-pwa-banner-content.incognito {
    background: var(--PWA_COLOR_INCOGNITO);
    border: var(--PWA_BANNER_BORDER);
    box-shadow: var(--PWA_COLOR_INCOGNITO_SHADOW);
}

/* Banner Inner Content */
.xploo-pwa-banner-inner {
    max-width: var(--PWA_MAX_WIDTH_BANNER_INNER);
    margin: var(--PWA_MARGIN_AUTO);
}

.xploo-pwa-banner-text {
    margin-bottom: var(--PWA_SPACING_2XL);
}

.xploo-pwa-banner-title {
    font-weight: var(--PWA_BANNER_TITLE_WEIGHT);
    font-size: var(--PWA_BANNER_TITLE_SIZE);
    margin-bottom: var(--PWA_SPACING_MD);
}

.xploo-pwa-banner-title i {
    margin-right: var(--PWA_SPACING_MD);
}

.xploo-pwa-banner-message {
    font-size: var(--PWA_BANNER_MESSAGE_SIZE);
    opacity: var(--PWA_BANNER_MESSAGE_OPACITY);
}

.xploo-pwa-banner-actions {
    text-align: center;
}

/*
###############################################################################################################################################################
PWA INSTALLATION SYSTEM - MODALS
###############################################################################################################################################################
*/

/* Modal Overlay */
.xploo-pwa-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--PWA_MODAL_OVERLAY_BG);
    z-index: var(--PWA_Z_INDEX_MODAL_OVERLAY);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--PWA_MODAL_PADDING);
    backdrop-filter: var(--PWA_MODAL_BACKDROP_BLUR);
    animation: var(--PWA_MODAL_ANIMATION);
}

/* Modal Content Base */
.xploo-pwa-modal-content {
    border-radius: var(--PWA_MODAL_CONTENT_RADIUS);
    max-width: var(--PWA_MODAL_CONTENT_MAX_WIDTH);
    width: var(--PWA_WIDTH_FULL);
    position: relative;
    animation: var(--PWA_MODAL_CONTENT_ANIMATION);
    box-shadow: var(--PWA_MODAL_CONTENT_SHADOW);
    border: var(--PWA_MODAL_CONTENT_BORDER);
    padding: var(--PWA_MODAL_CONTENT_PADDING);
    text-align: center;
    color: var(--PWA_COLOR_WHITE);
}

/* Modal Content - Install Theme */
.xploo-pwa-modal-content.install {
    background: var(--PWA_COLOR_INSTALL);
}

/* Modal Content - Open App Theme */
.xploo-pwa-modal-content.open-app {
    background: var(--PWA_COLOR_OPEN_APP);
}

/* Modal Content - Instructions Theme */
.xploo-pwa-modal-content.instructions {
    background: var(--PWA_INSTRUCTIONS_BG);
    color: var(--PWA_INSTRUCTIONS_COLOR);
}

/* Modal Close Button (in modal context) */
.xploo-pwa-modal-content .xploo-pwa-close-btn {
    top: var(--PWA_MODAL_CLOSE_BTN_TOP);
    right: var(--PWA_MODAL_CLOSE_BTN_RIGHT);
    background: var(--PWA_MODAL_CLOSE_BTN_BG);
    font-size: var(--PWA_MODAL_CLOSE_BTN_FONT_SIZE);
    width: var(--PWA_MODAL_CLOSE_BTN_SIZE);
    height: var(--PWA_MODAL_CLOSE_BTN_SIZE);
    color: var(--PWA_COLOR_WHITE);
}

.xploo-pwa-modal-content .xploo-pwa-close-btn:hover {
    background: var(--PWA_MODAL_CLOSE_BTN_BG_HOVER);
}

.xploo-pwa-modal-content.instructions .xploo-pwa-close-btn {
    background: var(--PWA_INSTRUCTIONS_CLOSE_BTN_BG);
    color: var(--PWA_INSTRUCTIONS_CLOSE_BTN_COLOR);
    font-size: var(--PWA_INSTRUCTIONS_CLOSE_BTN_FONT_SIZE);
    width: var(--PWA_INSTRUCTIONS_CLOSE_BTN_SIZE);
    height: var(--PWA_INSTRUCTIONS_CLOSE_BTN_SIZE);
}

.xploo-pwa-modal-content.instructions .xploo-pwa-close-btn:hover {
    background: var(--PWA_INSTRUCTIONS_CLOSE_BTN_BG_HOVER);
    color: var(--PWA_INSTRUCTIONS_CLOSE_BTN_COLOR_HOVER);
}

/* Modal Icon */
.xploo-pwa-modal-icon {
    font-size: var(--PWA_MODAL_ICON_SIZE);
    margin-bottom: var(--PWA_MODAL_ICON_MARGIN);
}

/* Modal Title */
.xploo-pwa-modal-title {
    font-size: var(--PWA_MODAL_TITLE_SIZE);
    font-weight: var(--PWA_MODAL_TITLE_WEIGHT);
    margin-bottom: var(--PWA_MODAL_TITLE_MARGIN);
    text-shadow: var(--PWA_MODAL_TITLE_SHADOW);
}

.xploo-pwa-modal-content.instructions .xploo-pwa-modal-title {
    text-shadow: var(--PWA_TEXT_SHADOW_NONE);
    color: var(--PWA_INSTRUCTIONS_TITLE_COLOR);
    font-size: var(--PWA_INSTRUCTIONS_TITLE_SIZE);
    font-weight: var(--PWA_INSTRUCTIONS_TITLE_WEIGHT);
    margin-bottom: var(--PWA_INSTRUCTIONS_TITLE_MARGIN);
}

/* Modal Description */
.xploo-pwa-modal-description {
    font-size: var(--PWA_MODAL_DESC_SIZE);
    opacity: var(--PWA_MODAL_DESC_OPACITY);
    margin-bottom: var(--PWA_MODAL_DESC_MARGIN);
    line-height: var(--PWA_MODAL_DESC_LINE_HEIGHT);
}

.xploo-pwa-modal-content.instructions .xploo-pwa-modal-description {
    opacity: var(--PWA_OPACITY_FULL);
    color: var(--PWA_INSTRUCTIONS_DESC_COLOR);
}

/* Modal Primary Button */
.xploo-pwa-modal-primary-btn {
    background: var(--PWA_PRIMARY_BTN_BG);
    color: var(--PWA_PRIMARY_BTN_COLOR_INSTALL);
    border: none;
    padding: var(--PWA_PRIMARY_BTN_PADDING);
    border-radius: var(--PWA_PRIMARY_BTN_RADIUS);
    font-size: var(--PWA_PRIMARY_BTN_FONT_SIZE);
    font-weight: var(--PWA_PRIMARY_BTN_FONT_WEIGHT);
    cursor: pointer;
    transition: var(--PWA_PRIMARY_BTN_TRANSITION);
    box-shadow: var(--PWA_PRIMARY_BTN_SHADOW);
    display: inline-flex;
    align-items: center;
    gap: var(--PWA_PRIMARY_BTN_GAP);
}

.xploo-pwa-modal-primary-btn:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: var(--PWA_PRIMARY_BTN_SHADOW_HOVER);
}

.xploo-pwa-modal-content.open-app .xploo-pwa-modal-primary-btn {
    color: var(--PWA_PRIMARY_BTN_COLOR_OPEN_APP);
}

/* Modal Footer Note */
.xploo-pwa-modal-footer-note {
    margin-top: var(--PWA_FOOTER_NOTE_MARGIN);
    font-size: var(--PWA_FOOTER_NOTE_SIZE);
    opacity: var(--PWA_FOOTER_NOTE_OPACITY);
}

/* Instructions Modal - Specific Styles */
.xploo-pwa-modal-content.instructions {
    max-width: var(--PWA_INSTRUCTIONS_MAX_WIDTH);
    max-height: var(--PWA_INSTRUCTIONS_MAX_HEIGHT);
    overflow-y: auto;
    animation: var(--PWA_INSTRUCTIONS_ANIMATION);
    padding: 0;
}

.xploo-pwa-instructions-content {
    text-align: center;
    padding: var(--PWA_INSTRUCTIONS_PADDING);
    color: var(--PWA_INSTRUCTIONS_COLOR);
}

.xploo-pwa-instructions-title {
    color: var(--PWA_INSTRUCTIONS_TITLE_COLOR);
    margin-bottom: var(--PWA_INSTRUCTIONS_TITLE_MARGIN);
    font-size: var(--PWA_INSTRUCTIONS_TITLE_SIZE);
    font-weight: var(--PWA_INSTRUCTIONS_TITLE_WEIGHT);
    text-align: center;
}

.xploo-pwa-instructions-title.green {
    color: var(--PWA_INSTRUCTIONS_TITLE_COLOR_GREEN);
}

.xploo-pwa-instructions-title.purple {
    color: var(--PWA_INSTRUCTIONS_TITLE_COLOR_PURPLE);
}

.xploo-pwa-instructions-title i {
    margin-right: var(--PWA_SPACING_MD);
    font-size: var(--PWA_SPACING_3XL);
}

.xploo-pwa-instructions-description {
    margin-bottom: var(--PWA_INSTRUCTIONS_TITLE_MARGIN);
    color: var(--PWA_INSTRUCTIONS_DESC_COLOR);
    font-size: var(--PWA_MODAL_DESC_SIZE);
    line-height: var(--PWA_MODAL_DESC_LINE_HEIGHT);
}

.xploo-pwa-instructions-steps {
    text-align: left;
    margin: var(--PWA_MARGIN_AUTO);
    line-height: var(--PWA_LINE_HEIGHT_NORMAL);
}

.xploo-pwa-instruction-step {
    margin-bottom: var(--PWA_STEP_MARGIN);
    display: flex;
    align-items: flex-start;
    padding: var(--PWA_STEP_PADDING);
    background: var(--PWA_STEP_BG);
    border-radius: var(--PWA_STEP_RADIUS);
    border-left: var(--PWA_STEP_BORDER_LEFT_WIDTH) solid var(--PWA_STEP_BORDER_COLOR);
}

.xploo-pwa-instruction-step.green {
    border-left-color: var(--PWA_STEP_BORDER_COLOR_GREEN);
}

.xploo-pwa-instruction-step.purple {
    border-left-color: var(--PWA_STEP_BORDER_COLOR_PURPLE);
}

.xploo-pwa-instruction-number {
    background: var(--PWA_STEP_NUMBER_BG);
    color: var(--PWA_STEP_NUMBER_COLOR);
    border-radius: var(--PWA_RADIUS_CIRCLE);
    width: var(--PWA_STEP_NUMBER_SIZE);
    height: var(--PWA_STEP_NUMBER_SIZE);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: var(--PWA_STEP_NUMBER_MARGIN);
    font-size: var(--PWA_STEP_NUMBER_FONT_SIZE);
    font-weight: var(--PWA_STEP_NUMBER_WEIGHT);
    flex-shrink: 0;
}

.xploo-pwa-instruction-number.green {
    background: var(--PWA_STEP_NUMBER_BG_GREEN);
}

.xploo-pwa-instruction-number.purple {
    background: var(--PWA_STEP_NUMBER_BG_PURPLE);
}

.xploo-pwa-instruction-text {
    color: var(--PWA_STEP_TEXT_COLOR);
    font-size: var(--PWA_STEP_TEXT_SIZE);
}

.xploo-pwa-instruction-highlight {
    background: var(--PWA_COLOR_INSTALL);
    border-radius: var(--PWA_HIGHLIGHT_RADIUS);
    padding: var(--PWA_HIGHLIGHT_PADDING);
    margin-top: var(--PWA_HIGHLIGHT_MARGIN);
    color: var(--PWA_HIGHLIGHT_COLOR);
}

.xploo-pwa-instruction-highlight.green {
    background: var(--PWA_COLOR_OPEN_APP);
}

.xploo-pwa-instruction-highlight.purple {
    background: var(--PWA_COLOR_INCOGNITO);
}

.xploo-pwa-instruction-highlight i {
    margin-right: var(--PWA_SPACING_MD);
}

/* Info Box */
.xploo-pwa-info-box {
    background: var(--PWA_INFO_BOX_BG);
    border: var(--PWA_INFO_BOX_BORDER);
    border-radius: var(--PWA_INFO_BOX_RADIUS);
    padding: var(--PWA_INFO_BOX_PADDING);
    margin-bottom: var(--PWA_INFO_BOX_MARGIN);
    color: var(--PWA_INFO_BOX_COLOR);
}

.xploo-pwa-info-box.yellow {
    background: var(--PWA_INFO_BOX_BG_YELLOW);
    border: var(--PWA_INFO_BOX_BORDER_YELLOW);
    color: var(--PWA_INFO_BOX_COLOR_YELLOW);
}

.xploo-pwa-info-box i {
    margin-right: var(--PWA_INFO_BOX_ICON_MARGIN);
    font-size: var(--PWA_INFO_BOX_ICON_SIZE);
}

/* Copy URL Button */
.xploo-pwa-copy-btn {
    background: var(--PWA_COPY_BTN_BG);
    color: var(--PWA_COPY_BTN_COLOR);
    border: none;
    padding: var(--PWA_COPY_BTN_PADDING);
    border-radius: var(--PWA_COPY_BTN_RADIUS);
    font-size: var(--PWA_COPY_BTN_FONT_SIZE);
    font-weight: var(--PWA_COPY_BTN_FONT_WEIGHT);
    cursor: pointer;
    transition: var(--PWA_COPY_BTN_TRANSITION);
    box-shadow: var(--PWA_COPY_BTN_SHADOW);
}

.xploo-pwa-copy-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--PWA_COPY_BTN_SHADOW_HOVER);
}

.xploo-pwa-copy-btn.success {
    background: var(--PWA_COPY_BTN_BG_SUCCESS);
}

.xploo-pwa-copy-btn i {
    margin-right: var(--PWA_SPACING_SM);
}

/* Special styling for iOS Safari SVG icon */
.xploo-pwa-safari-share-icon {
    width: var(--PWA_SAFARI_SHARE_ICON_SIZE);
    height: var(--PWA_SAFARI_SHARE_ICON_SIZE);
    vertical-align: middle;
    margin: var(--PWA_MARGIN_ZERO) var(--PWA_SAFARI_SHARE_ICON_MARGIN);
    display: inline-block;
}

/* Browser-specific instruction boxes */
.xploo-pwa-browser-box {
    margin-bottom: var(--PWA_BROWSER_BOX_MARGIN);
    padding: var(--PWA_BROWSER_BOX_PADDING);
    background: var(--PWA_BROWSER_BOX_BG);
    border-radius: var(--PWA_BROWSER_BOX_RADIUS);
}

.xploo-pwa-browser-box.chrome {
    border-left: var(--PWA_BROWSER_BOX_BORDER_WIDTH) solid var(--PWA_BROWSER_BOX_BORDER_CHROME);
}

.xploo-pwa-browser-box.firefox {
    border-left: var(--PWA_BROWSER_BOX_BORDER_WIDTH) solid var(--PWA_BROWSER_BOX_BORDER_FIREFOX);
}

.xploo-pwa-browser-box.safari {
    border-left: var(--PWA_BROWSER_BOX_BORDER_WIDTH) solid var(--PWA_BROWSER_BOX_BORDER_SAFARI);
}

.xploo-pwa-browser-box.android {
    border-left: var(--PWA_BROWSER_BOX_BORDER_WIDTH) solid var(--PWA_BROWSER_BOX_BORDER_ANDROID);
}

.xploo-pwa-browser-box-header {
    display: flex;
    align-items: center;
    margin-bottom: var(--PWA_BROWSER_BOX_HEADER_MARGIN);
}

.xploo-pwa-browser-box-header i {
    font-size: var(--PWA_BROWSER_BOX_ICON_SIZE);
    margin-right: var(--PWA_BROWSER_BOX_ICON_MARGIN);
    width: var(--PWA_WIDTH_ICON);
}

.xploo-pwa-browser-box-header i.fa-chrome {
    color: var(--PWA_BROWSER_BOX_BORDER_CHROME);
}

.xploo-pwa-browser-box-header i.fa-edge {
    color: var(--PWA_BROWSER_BOX_BORDER_EDGE);
}

.xploo-pwa-browser-box-header i.fa-firefox-browser {
    color: var(--PWA_BROWSER_BOX_BORDER_FIREFOX);
}

.xploo-pwa-browser-box-header i.fa-safari {
    color: var(--PWA_BROWSER_BOX_BORDER_SAFARI);
}

.xploo-pwa-browser-box-header i.fa-android {
    color: var(--PWA_BROWSER_BOX_BORDER_ANDROID);
}

.xploo-pwa-browser-box-header strong {
    color: var(--PWA_STEP_TEXT_COLOR);
    font-size: var(--PWA_BROWSER_BOX_TITLE_SIZE);
}

.xploo-pwa-browser-box-content {
    color: var(--PWA_INSTRUCTIONS_DESC_COLOR);
    font-size: var(--PWA_BROWSER_BOX_CONTENT_SIZE);
    margin-left: var(--PWA_BROWSER_BOX_CONTENT_MARGIN);
}

.xploo-pwa-browser-box-content i {
    margin: var(--PWA_MARGIN_ZERO) var(--PWA_SPACING_XXS);
}

/* Open App Instructions - Specific styles */
.xploo-pwa-open-app-step {
    border-radius: var(--PWA_OPEN_APP_STEP_RADIUS);
    padding: var(--PWA_OPEN_APP_STEP_PADDING);
    margin-bottom: var(--PWA_OPEN_APP_STEP_MARGIN);
}

.xploo-pwa-open-app-step.primary {
    background: var(--PWA_COLOR_OPEN_APP);
    color: var(--PWA_COLOR_WHITE);
    box-shadow: var(--PWA_COLOR_OPEN_APP_SHADOW);
}

.xploo-pwa-open-app-step.secondary {
    background: var(--PWA_OPEN_APP_STEP_SECONDARY_BG);
    border: var(--PWA_OPEN_APP_STEP_SECONDARY_BORDER);
}

.xploo-pwa-open-app-step-content {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--PWA_SPACING_XL);
}

.xploo-pwa-open-app-step-number {
    border-radius: var(--PWA_RADIUS_CIRCLE);
    width: var(--PWA_OPEN_APP_STEP_NUMBER_SIZE);
    height: var(--PWA_OPEN_APP_STEP_NUMBER_SIZE);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: var(--PWA_OPEN_APP_STEP_NUMBER_MARGIN);
    font-weight: bold;
    font-size: var(--PWA_OPEN_APP_STEP_NUMBER_FONT_SIZE);
}

.xploo-pwa-open-app-step-number.white {
    background: var(--PWA_COLOR_WHITE);
    color: var(--PWA_STEP_NUMBER_BG_GREEN);
}

.xploo-pwa-open-app-step-number.green {
    background: var(--PWA_STEP_NUMBER_BG_GREEN);
    color: var(--PWA_COLOR_WHITE);
}

.xploo-pwa-open-app-step-text {
    text-align: left;
}

.xploo-pwa-open-app-step-title {
    font-size: var(--PWA_OPEN_APP_STEP_TITLE_SIZE);
    font-weight: var(--PWA_OPEN_APP_STEP_TITLE_WEIGHT);
    margin-bottom: var(--PWA_SPACING_XS);
}

.xploo-pwa-open-app-step.primary .xploo-pwa-open-app-step-title {
    margin-bottom: var(--PWA_SPACING_XS);
}

.xploo-pwa-open-app-step.secondary .xploo-pwa-open-app-step-title {
    color: var(--PWA_STEP_NUMBER_BG_GREEN);
    margin-bottom: var(--PWA_SPACING_MD);
    display: flex;
    align-items: center;
    gap: var(--PWA_GAP_SM);
}

.xploo-pwa-open-app-step-subtitle {
    font-size: var(--PWA_OPEN_APP_STEP_SUBTITLE_SIZE);
}

.xploo-pwa-open-app-step.primary .xploo-pwa-open-app-step-subtitle {
    opacity: var(--PWA_OPACITY_HIGH);
}

.xploo-pwa-open-app-step.secondary .xploo-pwa-open-app-step-subtitle {
    color: var(--PWA_OPEN_APP_HELP_TITLE_COLOR);
}

.xploo-pwa-open-app-help-box {
    background: var(--PWA_OPEN_APP_HELP_BOX_BG);
    padding: var(--PWA_OPEN_APP_HELP_BOX_PADDING);
    border-radius: var(--PWA_OPEN_APP_HELP_BOX_RADIUS);
    margin-top: var(--PWA_OPEN_APP_HELP_BOX_MARGIN);
    border: var(--PWA_OPEN_APP_HELP_BOX_BORDER);
}

.xploo-pwa-open-app-help-title {
    font-size: var(--PWA_OPEN_APP_HELP_TITLE_SIZE);
    color: var(--PWA_OPEN_APP_HELP_TITLE_COLOR);
    margin-bottom: var(--PWA_SPACING_MD);
}

.xploo-pwa-open-app-help-title i {
    margin-right: var(--PWA_SPACING_SM);
    color: var(--PWA_STEP_NUMBER_BG_GREEN);
}

.xploo-pwa-open-app-help-content {
    font-size: var(--PWA_OPEN_APP_HELP_CONTENT_SIZE);
    color: var(--PWA_OPEN_APP_HELP_CONTENT_COLOR);
}

.xploo-pwa-app-icon {
    width: var(--PWA_APP_ICON_SIZE);
    height: var(--PWA_APP_ICON_SIZE);
    border-radius: var(--PWA_APP_ICON_RADIUS);
    box-shadow: var(--PWA_APP_ICON_SHADOW);
}

.xploo-pwa-modal-close-action-btn {
    background: var(--PWA_COLOR_OPEN_APP);
    color: var(--PWA_COLOR_WHITE);
    border: none;
    padding: var(--PWA_PRIMARY_BTN_PADDING);
    border-radius: var(--PWA_PRIMARY_BTN_RADIUS);
    font-size: var(--PWA_PRIMARY_BTN_FONT_SIZE);
    font-weight: var(--PWA_PRIMARY_BTN_FONT_WEIGHT);
    cursor: pointer;
    transition: var(--PWA_PRIMARY_BTN_TRANSITION);
    box-shadow: var(--PWA_COLOR_OPEN_APP_SHADOW);
}

.xploo-pwa-modal-close-action-btn:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: var(--PWA_PRIMARY_BTN_SHADOW_HOVER);
}

.xploo-pwa-modal-close-action-btn i {
    margin-right: var(--PWA_SPACING_MD);
}

/*
###############################################################################################################################################################
PWA INSTALLATION SYSTEM - BUTTONS
###############################################################################################################################################################
*/

/* Close Button */
.xploo-pwa-close-btn {
    position: absolute;
    top: var(--PWA_CLOSE_BTN_TOP);
    right: var(--PWA_CLOSE_BTN_RIGHT);
    background: var(--PWA_CLOSE_BTN_BG);
    border: none;
    color: var(--PWA_COLOR_WHITE);
    font-size: var(--PWA_CLOSE_BTN_FONT_SIZE);
    cursor: pointer;
    padding: 0;
    border-radius: var(--PWA_CLOSE_BTN_RADIUS);
    width: var(--PWA_CLOSE_BTN_SIZE);
    height: var(--PWA_CLOSE_BTN_SIZE);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--PWA_CLOSE_BTN_TRANSITION);
    line-height: var(--PWA_LINE_HEIGHT_TIGHT);
    z-index: var(--PWA_Z_INDEX_CLOSE_BTN);
}

.xploo-pwa-close-btn:hover {
    background: var(--PWA_CLOSE_BTN_BG_HOVER);
}

/* Install/Action Button */
.xploo-pwa-action-btn {
    background: var(--PWA_ACTION_BTN_BG);
    border: var(--PWA_ACTION_BTN_BORDER);
    color: var(--PWA_COLOR_WHITE);
    padding: var(--PWA_ACTION_BTN_PADDING);
    border-radius: var(--PWA_ACTION_BTN_RADIUS);
    font-size: var(--PWA_ACTION_BTN_FONT_SIZE);
    font-weight: var(--PWA_ACTION_BTN_FONT_WEIGHT);
    cursor: pointer;
    transition: var(--PWA_ACTION_BTN_TRANSITION);
    white-space: nowrap;
    display: inline-block;
}

.xploo-pwa-action-btn:hover {
    background: var(--PWA_ACTION_BTN_BG_HOVER);
    transform: translateY(-2px);
}

/*
###############################################################################################################################################################
PWA INSTALLATION SYSTEM - SUCCESS MESSAGE
###############################################################################################################################################################
*/

.xploo-pwa-success-banner {
    position: fixed;
    top: var(--PWA_SUCCESS_BANNER_TOP);
    left: 50%;
    transform: translateX(-50%);
    background: var(--PWA_COLOR_OPEN_APP);
    color: var(--PWA_COLOR_WHITE);
    padding: var(--PWA_SUCCESS_BANNER_PADDING);
    border-radius: var(--PWA_SUCCESS_BANNER_RADIUS);
    box-shadow: var(--PWA_COLOR_OPEN_APP_SHADOW);
    z-index: var(--PWA_Z_INDEX_BANNER);
    font-family: var(--PWA_FONT_FAMILY);
    animation: var(--PWA_SUCCESS_BANNER_ANIMATION);
    max-width: var(--PWA_SUCCESS_BANNER_MAX_WIDTH);
    text-align: center;
}

.xploo-pwa-success-banner i {
    margin-right: var(--PWA_SUCCESS_BANNER_ICON_MARGIN);
    font-size: var(--PWA_SUCCESS_BANNER_ICON_SIZE);
}

/*
###############################################################################################################################################################
NOTIFICATION SETTINGS MODAL (notification preferences)
###############################################################################################################################################################
*/

/* Notification Settings Modal Container */
.xploo-notification-settings-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--PWA_WIDTH_FULL);
    height: var(--PWA_WIDTH_FULL);
    background: var(--NOTIFICATION_MODAL_OVERLAY_BG);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--PWA_Z_INDEX_BANNER);
    backdrop-filter: var(--NOTIFICATION_MODAL_BACKDROP_BLUR);
    animation: fadeIn 0.3s ease-out;
}

/* Notification Settings Modal Content */
.xploo-notification-settings-content {
    background: var(--NOTIFICATION_MODAL_CONTENT_BG);
    padding: var(--NOTIFICATION_MODAL_CONTENT_PADDING);
    border-radius: var(--NOTIFICATION_MODAL_BORDER_RADIUS);
    max-width: var(--NOTIFICATION_MODAL_MAX_WIDTH);
    width: var(--PWA_WIDTH_90);
    margin: var(--PWA_SPACING_4XL);
    box-shadow: var(--NOTIFICATION_MODAL_SHADOW);
    position: relative;
    animation: var(--NOTIFICATION_MODAL_ANIMATION);
}

/* Notification Settings Modal Header */
.xploo-notification-settings-header {
    margin-bottom: var(--PWA_SPACING_4XL);
    text-align: center;
}

.xploo-notification-settings-title {
    margin: var(--PWA_MARGIN_ZERO) var(--PWA_MARGIN_ZERO) var(--PWA_SPACING_XL) var(--PWA_MARGIN_ZERO);
    color: var(--NOTIFICATION_HEADER_TITLE_COLOR);
    font-size: var(--NOTIFICATION_HEADER_TITLE_SIZE);
    font-weight: var(--NOTIFICATION_HEADER_TITLE_WEIGHT);
}

.xploo-notification-settings-description {
    color: var(--NOTIFICATION_HEADER_DESC_COLOR);
    line-height: var(--NOTIFICATION_HEADER_LINE_HEIGHT);
    font-size: var(--NOTIFICATION_HEADER_DESC_SIZE);
    margin-bottom: var(--PWA_SPACING_LG);
}

/* Notification Settings List */
.xploo-notification-settings-list {
    color: var(--NOTIFICATION_LIST_COLOR);
    line-height: var(--NOTIFICATION_LIST_LINE_HEIGHT);
    margin: 0 0 var(--NOTIFICATION_LIST_MARGIN_BOTTOM) 0;
    padding-left: 0;
    list-style: none;
    text-align: left;
}

.xploo-notification-settings-list li {
    margin-bottom: var(--NOTIFICATION_LIST_ITEM_MARGIN);
    padding-left: 0;
    display: flex;
    align-items: flex-start;
    gap: var(--NOTIFICATION_LIST_ITEM_GAP);
}

/* Notification Settings Actions */
.xploo-notification-settings-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--NOTIFICATION_BTN_GAP);
    justify-content: center;
    align-items: center;
}

/* Notification Settings Buttons */
.xploo-notification-btn {
    border: none;
    padding: var(--NOTIFICATION_BTN_PADDING);
    border-radius: var(--NOTIFICATION_BTN_BORDER_RADIUS);
    font-size: var(--NOTIFICATION_BTN_FONT_SIZE);
    font-weight: var(--NOTIFICATION_BTN_FONT_WEIGHT);
    cursor: pointer;
    transition: var(--NOTIFICATION_BTN_TRANSITION);
    white-space: nowrap;
}

.xploo-notification-btn-primary {
    background: var(--NOTIFICATION_BTN_PRIMARY_BG);
    color: var(--NOTIFICATION_BTN_PRIMARY_COLOR);
}

.xploo-notification-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--NOTIFICATION_BTN_PRIMARY_SHADOW);
}

.xploo-notification-btn-test {
    background: var(--NOTIFICATION_BTN_TEST_BG);
    color: var(--NOTIFICATION_BTN_TEST_COLOR);
}

.xploo-notification-btn-test:hover {
    transform: translateY(-2px);
    box-shadow: var(--NOTIFICATION_BTN_TEST_SHADOW);
}

.xploo-notification-btn-vibration {
    background: var(--NOTIFICATION_BTN_VIBRATION_BG);
    color: var(--NOTIFICATION_BTN_VIBRATION_COLOR);
}

.xploo-notification-btn-vibration:hover {
    transform: translateY(-2px);
    box-shadow: var(--NOTIFICATION_BTN_VIBRATION_SHADOW);
}

/* Admin-only buttons visibility */
.xploo-notification-btn-admin {
    display: none;
}

.xploo-notification-btn-admin.is-admin {
    display: inline-block;
}

/*
###############################################################################################################################################################
CACHE UPDATE NOTIFICATION MODAL
###############################################################################################################################################################
*/

.xploo-cache-update-modal {
    position: fixed;
    z-index: var(--CACHE_UPDATE_MODAL_Z_INDEX);
    color: var(--CACHE_UPDATE_MODAL_COLOR);
    font-family: var(--CACHE_UPDATE_MODAL_FONT_FAMILY);
    cursor: pointer;
    animation: var(--CACHE_UPDATE_MODAL_ANIMATION_DESKTOP);
    display: flex;
    justify-content: center;
}

.xploo-cache-update-modal.is-desktop {
    bottom: var(--CACHE_UPDATE_MODAL_DESKTOP_BOTTOM);
    right: var(--CACHE_UPDATE_MODAL_DESKTOP_RIGHT);
    min-width: var(--CACHE_UPDATE_MODAL_MIN_WIDTH_DESKTOP);
    max-width: var(--CACHE_UPDATE_MODAL_MAX_WIDTH);
}

.xploo-cache-update-modal.is-mobile {
    top: var(--CACHE_UPDATE_MODAL_MOBILE_TOP);
    left: var(--CACHE_UPDATE_MODAL_MOBILE_LEFT);
    right: var(--CACHE_UPDATE_MODAL_MOBILE_RIGHT);
    animation: var(--CACHE_UPDATE_MODAL_ANIMATION_MOBILE);
}

.xploo-cache-update-inner {
    background: var(--CACHE_UPDATE_MODAL_BG);
    border-radius: var(--CACHE_UPDATE_MODAL_BORDER_RADIUS);
    padding: var(--CACHE_UPDATE_MODAL_PADDING);
    box-shadow: var(--CACHE_UPDATE_MODAL_BOX_SHADOW_DESKTOP);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--CACHE_UPDATE_MODAL_GAP);
    width: 100%;
}

.xploo-cache-update-modal.is-mobile .xploo-cache-update-inner {
    border-radius: 0;
    box-shadow: var(--CACHE_UPDATE_MODAL_BOX_SHADOW_MOBILE);
    justify-content: space-between;
    max-width: var(--CACHE_UPDATE_MODAL_MAX_WIDTH);
    margin: 0 auto;
    width: 100%;
}

.xploo-cache-update-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--CACHE_UPDATE_MODAL_GAP);
    flex: 1;
    min-width: 0;
}

.xploo-cache-update-title {
    font-size: var(--CACHE_UPDATE_MODAL_TITLE_SIZE);
    font-weight: var(--CACHE_UPDATE_MODAL_TITLE_WEIGHT);
    margin: 0;
}

.xploo-cache-update-message {
    font-size: var(--CACHE_UPDATE_MODAL_MESSAGE_SIZE);
    opacity: var(--CACHE_UPDATE_MODAL_MESSAGE_OPACITY);
    line-height: 1.4;
    margin: 0;
}

.xploo-cache-update-hint {
    font-size: var(--CACHE_UPDATE_MODAL_HINT_SIZE);
    opacity: var(--CACHE_UPDATE_MODAL_HINT_OPACITY);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--CACHE_UPDATE_MODAL_HINT_ICON_MARGIN);
}

.xploo-cache-update-hint i {
    font-size: var(--CACHE_UPDATE_MODAL_HINT_SIZE);
}

.xploo-cache-update-action {
    background: var(--CACHE_UPDATE_MODAL_ACTION_BG);
    border: var(--CACHE_UPDATE_MODAL_ACTION_BORDER);
    color: var(--CACHE_UPDATE_MODAL_ACTION_COLOR);
    padding: var(--CACHE_UPDATE_MODAL_ACTION_PADDING);
    border-radius: var(--CACHE_UPDATE_MODAL_ACTION_RADIUS);
    font-size: var(--CACHE_UPDATE_MODAL_ACTION_FONT_SIZE);
    font-weight: var(--CACHE_UPDATE_MODAL_ACTION_FONT_WEIGHT);
    cursor: pointer;
    transition: var(--CACHE_UPDATE_MODAL_ACTION_TRANSITION);
    white-space: nowrap;
    font-family: inherit;
    line-height: 1.1;
}

.xploo-cache-update-action:hover,
.xploo-cache-update-action:focus {
    background: var(--CACHE_UPDATE_MODAL_ACTION_BG_HOVER);
}

.xploo-cache-update-action:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4);
}

.xploo-cache-update-modal.is-desktop .xploo-cache-update-action {
    display: none;
}

.xploo-cache-update-modal.is-mobile .xploo-cache-update-hint {
    display: none;
}

.xploo-cache-update-modal:focus-visible {
    outline: none;
}

/*
###############################################################################################################################################################
ANIMATIONS
###############################################################################################################################################################
*/

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideDown {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        transform: translateY(0);
        opacity: 1;
    }
    to {
        transform: translateY(-100%);
        opacity: 0;
    }
}

@keyframes slideInUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideOutDown {
    from {
        transform: translateY(0);
        opacity: 1;
    }
    to {
        transform: translateY(100%);
        opacity: 0;
    }
}

@keyframes modalScaleIn {
    from {
        opacity: 0;
        transform: scale(0.7) translateY(30px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: scale(0.8) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes slideDownSuccess {
    from {
        transform: translateX(-50%) translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }
}

/*
###############################################################################################################################################################
RESPONSIVE
###############################################################################################################################################################
*/

/* Desktop - wider modal for instructions */
@media (min-width: 769px) {
    .xploo-pwa-modal-content.instructions {
        max-width: var(--PWA_MAX_WIDTH_INSTRUCTIONS_DESKTOP);
    }

    .xploo-pwa-instructions-content {
        padding: var(--PWA_INSTRUCTIONS_PADDING_DESKTOP) !important;
    }
}

/* Mobile - narrower modal */
@media (max-width: 768px) {
    .xploo-pwa-modal-content {
        max-width: var(--PWA_MAX_WIDTH_MODAL_MOBILE);
        padding: var(--PWA_MODAL_CONTENT_PADDING_MOBILE);
    }

    .xploo-pwa-modal-content.instructions {
        max-width: var(--PWA_MAX_WIDTH_INSTRUCTIONS_MOBILE);
    }
}

/* Responsive buttons */
@media (max-width: 768px) {
    .xploo-notification-settings-actions {
        flex-direction: column;
        width: var(--PWA_WIDTH_FULL);
    }

    .xploo-notification-btn {
        width: var(--PWA_WIDTH_FULL);
        text-align: center;
    }
}

@media (min-width: 769px) {
    .xploo-notification-settings-actions {
        flex-direction: row;
        justify-content: center;
    }
}

/*
###############################################################################################################################################################
UTILITY CLASSES
###############################################################################################################################################################
*/

/* Font Awesome Icons Support */
.xploo-pwa-modal-content .fas,
.xploo-pwa-modal-content .fab {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands" !important;
    font-weight: 900;
}

/* Box Sizing Reset for Modal Content */
.xploo-pwa-modal-content * {
    box-sizing: border-box;
}