/*
###############################################################################################################################################################
XPLOO SENSOR CHECK - MODALS & ALERTS
Styles for sensor and connectivity checking system
###############################################################################################################################################################
*/

/*
###############################################################################################################################################################
MODAL OVERLAY & BASE
###############################################################################################################################################################
*/

.xploo-sensor-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--SENSOR_MODAL_OVERLAY_BG);
    z-index: var(--SENSOR_MODAL_OVERLAY_Z_INDEX);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--SENSOR_MODAL_OVERLAY_PADDING);
    backdrop-filter: var(--SENSOR_MODAL_OVERLAY_BACKDROP);
    animation: var(--SENSOR_MODAL_OVERLAY_ANIMATION);
    font-family: var(--SENSOR_FONT_FAMILY);
}

.xploo-sensor-modal-content {
    border-radius: var(--SENSOR_MODAL_CONTENT_RADIUS);
    max-width: var(--SENSOR_MODAL_CONTENT_MAX_WIDTH);
    width: 100%;
    position: relative;
    animation: var(--SENSOR_MODAL_CONTENT_ANIMATION);
    box-shadow: var(--SENSOR_MODAL_CONTENT_BOX_SHADOW);
    border: var(--SENSOR_MODAL_CONTENT_BORDER);
    padding: var(--SENSOR_MODAL_CONTENT_PADDING);
    text-align: center;
    color: var(--SENSOR_MODAL_CONTENT_COLOR);
}

/*
###############################################################################################################################################################
MODAL THEMES
###############################################################################################################################################################
*/

/* Critical - Offline, no connection */
.xploo-sensor-modal-content.critical {
    background: var(--SENSOR_MODAL_CRITICAL_BG);
    animation: sensorModalScaleIn 0.4s ease-out, sensorShake 0.5s ease-out 0.3s;
}

/* Error/Warning - GPS denied, compass unavailable */
.xploo-sensor-modal-content.error {
    background: var(--SENSOR_MODAL_ERROR_BG);
}

.xploo-sensor-modal-content.warning {
    background: var(--SENSOR_MODAL_WARNING_BG);
}

/* Info/Instructions */
.xploo-sensor-modal-content.instructions {
    background: var(--SENSOR_MODAL_INSTRUCTIONS_BG);
    color: var(--SENSOR_MODAL_INSTRUCTIONS_COLOR);
}

/*
###############################################################################################################################################################
MODAL ELEMENTS
###############################################################################################################################################################
*/

/* Close Button */
.xploo-sensor-close-btn {
    position: absolute;
    top: var(--SENSOR_CLOSE_BTN_TOP);
    right: var(--SENSOR_CLOSE_BTN_RIGHT);
    background: var(--SENSOR_CLOSE_BTN_BG);
    border: none;
    color: var(--SENSOR_CLOSE_BTN_COLOR);
    font-size: var(--SENSOR_CLOSE_BTN_FONT_SIZE);
    cursor: pointer;
    padding: 0;
    border-radius: 50%;
    width: var(--SENSOR_CLOSE_BTN_SIZE);
    height: var(--SENSOR_CLOSE_BTN_SIZE);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--SENSOR_CLOSE_BTN_TRANSITION);
    line-height: 1;
    z-index: 10;
}

.xploo-sensor-close-btn:hover {
    background: var(--SENSOR_CLOSE_BTN_BG_HOVER);
    transform: rotate(90deg);
}

.xploo-sensor-modal-content.instructions .xploo-sensor-close-btn {
    background: var(--SENSOR_CLOSE_BTN_INSTRUCTIONS_BG);
    color: var(--SENSOR_CLOSE_BTN_INSTRUCTIONS_COLOR);
}

.xploo-sensor-modal-content.instructions .xploo-sensor-close-btn:hover {
    background: var(--SENSOR_CLOSE_BTN_INSTRUCTIONS_BG_HOVER);
    color: var(--SENSOR_CLOSE_BTN_INSTRUCTIONS_COLOR_HOVER);
}

/* Modal Icon */
.xploo-sensor-modal-icon {
    font-size: var(--SENSOR_MODAL_ICON_SIZE);
    margin-bottom: var(--SENSOR_MODAL_ICON_MARGIN);
    animation: var(--SENSOR_MODAL_ICON_ANIMATION);
}

/* Modal Title */
.xploo-sensor-modal-title {
    font-size: var(--SENSOR_MODAL_TITLE_SIZE);
    font-weight: var(--SENSOR_MODAL_TITLE_WEIGHT);
    margin-bottom: var(--SENSOR_MODAL_TITLE_MARGIN);
    text-shadow: var(--SENSOR_MODAL_TITLE_SHADOW);
}

.xploo-sensor-modal-content.instructions .xploo-sensor-modal-title {
    text-shadow: none;
    color: var(--SENSOR_MODAL_INSTRUCTIONS_TITLE_COLOR);
    font-size: var(--SENSOR_MODAL_INSTRUCTIONS_TITLE_SIZE);
}

/*
###############################################################################################################################################################
WARNING LIST
###############################################################################################################################################################
*/

.xploo-sensor-warnings-list {
    margin-bottom: var(--SENSOR_WARNINGS_LIST_MARGIN_BOTTOM);
    text-align: left;
}

.xploo-sensor-warning-item {
    display: flex;
    align-items: center;
    padding: var(--SENSOR_WARNING_ITEM_PADDING);
    margin-bottom: var(--SENSOR_WARNING_ITEM_MARGIN_BOTTOM);
    background: var(--SENSOR_WARNING_ITEM_BG);
    border-radius: var(--SENSOR_WARNING_ITEM_BORDER_RADIUS);
    backdrop-filter: var(--SENSOR_WARNING_ITEM_BACKDROP);
    border-left: var(--SENSOR_WARNING_ITEM_BORDER_LEFT_WIDTH) solid var(--SENSOR_WARNING_ITEM_BORDER_LEFT_COLOR);
    transition: var(--SENSOR_WARNING_ITEM_TRANSITION);
}

.xploo-sensor-warning-item:hover {
    background: var(--SENSOR_WARNING_ITEM_BG_HOVER);
    transform: translateX(var(--SENSOR_WARNING_ITEM_TRANSLATE));
}

.xploo-sensor-warning-item.critical {
    border-left-color: var(--SENSOR_COLOR_CRITICAL);
    background: var(--SENSOR_WARNING_BG_CRITICAL);
}

.xploo-sensor-warning-item.high {
    border-left-color: var(--SENSOR_COLOR_HIGH);
    background: var(--SENSOR_WARNING_BG_HIGH);
}

.xploo-sensor-warning-item.medium {
    border-left-color: var(--SENSOR_COLOR_MEDIUM);
    background: var(--SENSOR_WARNING_BG_MEDIUM);
}

.xploo-sensor-warning-item.warning {
    border-left-color: var(--SENSOR_COLOR_WARNING);
    background: var(--SENSOR_WARNING_BG_WARNING);
}

.xploo-sensor-warning-item.low {
    border-left-color: var(--SENSOR_COLOR_LOW);
    background: var(--SENSOR_WARNING_BG_LOW);
}

.xploo-sensor-warning-icon {
    font-size: var(--SENSOR_WARNING_ICON_SIZE);
    margin-right: var(--SENSOR_WARNING_ICON_MARGIN);
    flex-shrink: 0;
}

.xploo-sensor-warning-message {
    font-size: var(--SENSOR_WARNING_MESSAGE_FONT_SIZE);
    line-height: var(--SENSOR_WARNING_MESSAGE_LINE_HEIGHT);
    font-weight: var(--SENSOR_WARNING_MESSAGE_FONT_WEIGHT);
}

/*
###############################################################################################################################################################
ACTION BUTTONS
###############################################################################################################################################################
*/

.xploo-sensor-actions {
    display: flex;
    flex-direction: column;
    gap: var(--SENSOR_ACTIONS_GAP);
    margin-top: var(--SENSOR_ACTIONS_MARGIN_TOP);
}

.xploo-sensor-action-btn {
    border: none;
    padding: var(--SENSOR_ACTION_BTN_PADDING);
    border-radius: var(--SENSOR_ACTION_BTN_RADIUS);
    font-size: var(--SENSOR_ACTION_BTN_FONT_SIZE);
    font-weight: var(--SENSOR_ACTION_BTN_FONT_WEIGHT);
    cursor: pointer;
    transition: var(--SENSOR_ACTION_BTN_TRANSITION);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--SENSOR_ACTION_BTN_GAP);
    font-family: var(--SENSOR_FONT_FAMILY);
}

/* Primary Button */
.xploo-sensor-action-btn.primary {
    background: var(--SENSOR_ACTION_BTN_PRIMARY_BG);
    color: var(--SENSOR_ACTION_BTN_PRIMARY_COLOR);
    box-shadow: var(--SENSOR_ACTION_BTN_PRIMARY_SHADOW);
}

.xploo-sensor-action-btn.primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--SENSOR_ACTION_BTN_PRIMARY_SHADOW_HOVER);
}

.xploo-sensor-modal-content.warning .xploo-sensor-action-btn.primary {
    color: var(--SENSOR_ACTION_BTN_PRIMARY_COLOR_WARNING);
}

.xploo-sensor-modal-content.instructions .xploo-sensor-action-btn.primary {
    background: var(--SENSOR_ACTION_BTN_PRIMARY_BG_INSTRUCTIONS);
    color: var(--SENSOR_ACTION_BTN_PRIMARY_COLOR_INSTRUCTIONS);
}

/* Secondary Button */
.xploo-sensor-action-btn.secondary {
    background: var(--SENSOR_ACTION_BTN_SECONDARY_BG);
    color: var(--SENSOR_ACTION_BTN_SECONDARY_COLOR);
    border: var(--SENSOR_ACTION_BTN_SECONDARY_BORDER);
}

.xploo-sensor-action-btn.secondary:hover {
    background: var(--SENSOR_ACTION_BTN_SECONDARY_BG_HOVER);
    transform: translateY(-2px);
}

.xploo-sensor-modal-content.instructions .xploo-sensor-action-btn.secondary {
    background: var(--SENSOR_ACTION_BTN_SECONDARY_BG_INSTRUCTIONS);
    color: var(--SENSOR_ACTION_BTN_SECONDARY_COLOR_INSTRUCTIONS);
    border: var(--SENSOR_ACTION_BTN_SECONDARY_BORDER_INSTRUCTIONS);
}

.xploo-sensor-modal-content.instructions .xploo-sensor-action-btn.secondary:hover {
    background: var(--SENSOR_ACTION_BTN_SECONDARY_BG_INSTRUCTIONS_HOVER);
    color: var(--SENSOR_ACTION_BTN_SECONDARY_COLOR_INSTRUCTIONS_HOVER);
}

/* Tertiary Button (Continue anyway) */
.xploo-sensor-action-btn.tertiary {
    background: transparent;
    color: var(--SENSOR_ACTION_BTN_TERTIARY_COLOR);
    border: none;
    font-size: var(--SENSOR_ACTION_BTN_TERTIARY_FONT_SIZE);
    padding: var(--SENSOR_ACTION_BTN_TERTIARY_PADDING);
}

.xploo-sensor-action-btn.tertiary:hover {
    color: var(--SENSOR_ACTION_BTN_TERTIARY_COLOR_HOVER);
    text-decoration: underline;
}

.xploo-sensor-modal-content.instructions .xploo-sensor-action-btn.tertiary {
    color: var(--SENSOR_ACTION_BTN_TERTIARY_COLOR_INSTRUCTIONS);
}

.xploo-sensor-modal-content.instructions .xploo-sensor-action-btn.tertiary:hover {
    color: var(--SENSOR_ACTION_BTN_TERTIARY_COLOR_INSTRUCTIONS_HOVER);
}

/*
###############################################################################################################################################################
INSTRUCTIONS
###############################################################################################################################################################
*/

.xploo-sensor-instructions {
    text-align: left;
    margin: var(--SENSOR_INSTRUCTIONS_MARGIN);
}

.xploo-sensor-instructions h4 {
    color: var(--SENSOR_INSTRUCTIONS_TITLE_COLOR);
    margin-bottom: var(--SENSOR_INSTRUCTIONS_TITLE_MARGIN);
    font-size: var(--SENSOR_INSTRUCTIONS_TITLE_SIZE);
    font-weight: var(--SENSOR_INSTRUCTIONS_TITLE_WEIGHT);
    text-align: var(--SENSOR_INSTRUCTIONS_TITLE_ALIGN);
}

.xploo-sensor-instructions h4 i {
    margin-right: var(--SENSOR_INSTRUCTIONS_TITLE_ICON_MARGIN);
}

.xploo-sensor-instruction-step {
    display: flex;
    align-items: center;
    padding: var(--SENSOR_INSTRUCTION_STEP_PADDING);
    margin-bottom: var(--SENSOR_INSTRUCTION_STEP_MARGIN);
    background: var(--SENSOR_INSTRUCTION_STEP_BG);
    border-radius: 10px;
    border-left: var(--SENSOR_INSTRUCTION_STEP_BORDER);
}

.xploo-sensor-step-number {
    background: var(--SENSOR_STEP_NUMBER_BG);
    color: var(--SENSOR_STEP_NUMBER_COLOR);
    border-radius: var(--SENSOR_STEP_NUMBER_RADIUS);
    width: var(--SENSOR_STEP_NUMBER_SIZE);
    height: var(--SENSOR_STEP_NUMBER_SIZE);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: var(--SENSOR_STEP_NUMBER_MARGIN);
    font-size: var(--SENSOR_STEP_NUMBER_FONT_SIZE);
    font-weight: var(--SENSOR_STEP_NUMBER_FONT_WEIGHT);
    flex-shrink: 0;
}

.xploo-sensor-instruction-step span:last-child {
    font-size: var(--SENSOR_INSTRUCTION_TEXT_FONT_SIZE);
    color: var(--SENSOR_INSTRUCTION_TEXT_COLOR);
}

/*
###############################################################################################################################################################
SUCCESS BANNER
###############################################################################################################################################################
*/

.xploo-sensor-success-banner {
    position: fixed;
    top: var(--SENSOR_SUCCESS_BANNER_TOP);
    left: 50%;
    transform: translateX(-50%);
    background: var(--SENSOR_SUCCESS_BANNER_BG);
    color: var(--SENSOR_SUCCESS_BANNER_COLOR);
    padding: var(--SENSOR_SUCCESS_BANNER_PADDING);
    border-radius: var(--SENSOR_SUCCESS_BANNER_RADIUS);
    box-shadow: var(--SENSOR_SUCCESS_BANNER_SHADOW);
    z-index: var(--SENSOR_SUCCESS_BANNER_Z_INDEX);
    font-family: var(--SENSOR_FONT_FAMILY);
    animation: var(--SENSOR_SUCCESS_BANNER_ANIMATION);
    max-width: var(--SENSOR_SUCCESS_BANNER_MAX_WIDTH);
    text-align: center;
    display: flex;
    align-items: center;
    gap: var(--SENSOR_SUCCESS_BANNER_GAP);
}

.xploo-sensor-success-banner i {
    font-size: var(--SENSOR_SUCCESS_ICON_SIZE);
}

@keyframes slideDownSuccess {
    from {
        transform: translateX(-50%) translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }
}

/*
###############################################################################################################################################################
CONNECTION STATUS INDICATORS
###############################################################################################################################################################
*/

.xploo-sensor-connection-indicator {
    display: inline-flex;
    align-items: center;
    gap: var(--SENSOR_CONNECTION_GAP);
    padding: var(--SENSOR_CONNECTION_PADDING);
    border-radius: var(--SENSOR_CONNECTION_RADIUS);
    font-size: var(--SENSOR_CONNECTION_FONT_SIZE);
    font-weight: var(--SENSOR_CONNECTION_FONT_WEIGHT);
    margin: var(--SENSOR_CONNECTION_MARGIN);
}

.xploo-sensor-connection-indicator.online {
    background: var(--SENSOR_CONNECTION_ONLINE_BG);
    color: var(--SENSOR_CONNECTION_ONLINE_COLOR);
}

.xploo-sensor-connection-indicator.offline {
    background: var(--SENSOR_CONNECTION_OFFLINE_BG);
    color: var(--SENSOR_CONNECTION_OFFLINE_COLOR);
}

.xploo-sensor-connection-indicator.slow {
    background: var(--SENSOR_CONNECTION_SLOW_BG);
    color: var(--SENSOR_CONNECTION_SLOW_COLOR);
}

.xploo-sensor-connection-indicator i {
    font-size: var(--SENSOR_CONNECTION_ICON_SIZE);
}

/*
###############################################################################################################################################################
SENSOR STATUS BADGES
###############################################################################################################################################################
*/

.xploo-sensor-status-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--SENSOR_STATUS_BADGE_GAP);
    padding: var(--SENSOR_STATUS_BADGE_PADDING);
    border-radius: var(--SENSOR_STATUS_BADGE_RADIUS);
    font-size: var(--SENSOR_STATUS_BADGE_FONT_SIZE);
    font-weight: var(--SENSOR_STATUS_BADGE_FONT_WEIGHT);
    margin: var(--SENSOR_STATUS_BADGE_MARGIN);
}

.xploo-sensor-status-badge.available {
    background: var(--SENSOR_STATUS_AVAILABLE_BG);
    color: var(--SENSOR_STATUS_AVAILABLE_COLOR);
}

.xploo-sensor-status-badge.denied {
    background: var(--SENSOR_STATUS_DENIED_BG);
    color: var(--SENSOR_STATUS_DENIED_COLOR);
}

.xploo-sensor-status-badge.unavailable {
    background: var(--SENSOR_STATUS_UNAVAILABLE_BG);
    color: var(--SENSOR_STATUS_UNAVAILABLE_COLOR);
}

/*
###############################################################################################################################################################
ANIMATIONS
###############################################################################################################################################################
*/

@keyframes sensorFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes sensorModalScaleIn {
    from {
        opacity: 0;
        transform: scale(0.7) translateY(30px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes sensorPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

@keyframes sensorShake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

/*
###############################################################################################################################################################
RESPONSIVE
###############################################################################################################################################################
*/

@media (max-width: 768px) {
    .xploo-sensor-modal-content {
        max-width: var(--SENSOR_MODAL_MOBILE_MAX_WIDTH);
        padding: var(--SENSOR_MODAL_MOBILE_PADDING);
    }

    .xploo-sensor-modal-icon {
        font-size: var(--SENSOR_MODAL_ICON_SIZE_MOBILE);
    }

    .xploo-sensor-modal-title {
        font-size: var(--SENSOR_MODAL_TITLE_SIZE_MOBILE);
    }

    .xploo-sensor-warning-message {
        font-size: var(--SENSOR_WARNING_MESSAGE_FONT_SIZE_MOBILE);
    }

    .xploo-sensor-action-btn {
        padding: var(--SENSOR_ACTION_BTN_PADDING_MOBILE);
        font-size: var(--SENSOR_ACTION_BTN_FONT_SIZE_MOBILE);
    }
}

/*
###############################################################################################################################################################
UTILITY CLASSES
###############################################################################################################################################################
*/

/* Font Awesome Icons Support */
.xploo-sensor-modal-content .fas,
.xploo-sensor-modal-content .fab {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands" !important;
    font-weight: 900;
}

/* Box Sizing Reset */
.xploo-sensor-modal-content * {
    box-sizing: border-box;
}
