<?php
/**
 * GT BOGO Mobile Optimizer — Device CSS Variables
 * Template: outputs <style> block with CSS custom properties.
 * Variables passed from GT_BOGO_Mobile_Optimizer::output_device_css_vars()
 *   $device, $network, $touch, $reduce, $intensity
 */
if ( ! defined( 'ABSPATH' ) ) exit;
?>
<style id="gt-bogo-mobile-vars">
    :root {
        --gt-bogo-device-class: "<?php echo esc_attr( $device ); ?>";
        --gt-bogo-network-class: "<?php echo esc_attr( $network ); ?>";
        --gt-bogo-touch-min: <?php echo (int) $touch; ?>px;
        --gt-bogo-reduce-motion: <?php echo (int) $reduce; ?>;
        --gt-bogo-intensity-cap: <?php echo number_format( (float) $intensity, 2, '.', '' ); ?>;
    }
    <?php if ( $reduce === '1' ) : ?>
    .gt-bogo-superpower * {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
    <?php endif; ?>
    <?php if ( $device === 'phone' ) : ?>
    .gt-bogo-superpower button,
    .gt-bogo-superpower a.button,
    .gt-bogo-superpower [role="button"] {
        min-height: <?php echo (int) $touch; ?>px;
        min-width: <?php echo (int) $touch; ?>px;
        padding-block: 12px;
    }
    .gt-bogo-superpower--modal-on-mobile-as-sheet {
        position: fixed !important;
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 12px 12px 0 0 !important;
        transform: none !important;
    }
    <?php endif; ?>
</style>
