/* ========================== Button Responsive Enhancements ========================== */\n\n/* Mobile-first responsive button system */\n\n/* Base mobile styles (320px and up) */\n@media (min-width: 320px) {\n    .btn-system {\n        font-size: 0.9rem;\n        padding: 0.75rem 1.25rem;\n        min-height: 44px;\n    }\n    \n    .btn-system-sm {\n        font-size: 0.8rem;\n        padding: 0.5rem 1rem;\n        min-height: 36px;\n    }\n    \n    .btn-system-lg {\n        font-size: 1rem;\n        padding: 1rem 1.75rem;\n        min-height: 48px;\n    }\n}\n\n/* Small mobile devices (375px and up) */\n@media (min-width: 375px) {\n    .btn-system {\n        font-size: 0.95rem;\n        padding: 0.8rem 1.4rem;\n    }\n    \n    .btn-system-lg {\n        font-size: 1.1rem;\n        padding: 1.1rem 2rem;\n        min-height: 52px;\n    }\n}\n\n/* Large mobile devices (414px and up) */\n@media (min-width: 414px) {\n    .btn-system {\n        font-size: 1rem;\n        padding: 0.875rem 1.5rem;\n        min-height: 48px;\n    }\n    \n    .btn-system-lg {\n        font-size: 1.125rem;\n        padding: 1.125rem 2rem;\n        min-height: 56px;\n    }\n    \n    .btn-system-xl {\n        font-size: 1.25rem;\n        padding: 1.25rem 2.25rem;\n        min-height: 60px;\n    }\n}\n\n/* Tablet portrait (768px and up) */\n@media (min-width: 768px) {\n    .btn-system {\n        font-size: 1rem;\n        padding: 0.75rem 1.5rem;\n        min-height: 44px;\n    }\n    \n    .btn-system-sm {\n        font-size: 0.875rem;\n        padding: 0.5rem 1rem;\n        min-height: 36px;\n    }\n    \n    .btn-system-lg {\n        font-size: 1.125rem;\n        padding: 1rem 2rem;\n        min-height: 52px;\n    }\n    \n    .btn-system-xl {\n        font-size: 1.25rem;\n        padding: 1.25rem 2.5rem;\n        min-height: 60px;\n    }\n    \n    /* Tablet specific button groups */\n    .btn-system-group-tablet-stack {\n        flex-direction: column;\n    }\n    \n    .btn-system-group-tablet-stack .btn-system {\n        margin-right: 0;\n        margin-bottom: -1px;\n        border-radius: 0.5rem;\n    }\n    \n    .btn-system-group-tablet-stack .btn-system:not(:first-child) {\n        border-top-left-radius: 0;\n        border-top-right-radius: 0;\n    }\n    \n    .btn-system-group-tablet-stack .btn-system:not(:last-child) {\n        border-bottom-left-radius: 0;\n        border-bottom-right-radius: 0;\n    }\n}\n\n/* Desktop (992px and up) */\n@media (min-width: 992px) {\n    .btn-system {\n        font-size: 1rem;\n        padding: 0.75rem 1.5rem;\n        min-height: 44px;\n    }\n    \n    /* Desktop hover effects */\n    .btn-system:hover {\n        transform: translateY(-1px);\n    }\n    \n    .btn-system:active {\n        transform: translateY(0);\n    }\n    \n    /* Desktop specific animations */\n    .btn-system-desktop-glow:hover {\n        box-shadow: 0 0 20px rgba(0, 123, 255, 0.4);\n    }\n}\n\n/* Large desktop (1200px and up) */\n@media (min-width: 1200px) {\n    .btn-system-xl {\n        font-size: 1.375rem;\n        padding: 1.375rem 2.75rem;\n        min-height: 64px;\n    }\n}\n\n/* ========================== Orientation-based Styles ========================== */\n\n/* Portrait orientation */\n@media (orientation: portrait) {\n    .btn-system-portrait-stack .btn-system {\n        display: block;\n        width: 100%;\n        margin-bottom: 0.75rem;\n    }\n    \n    .btn-system-portrait-stack .btn-system:last-child {\n        margin-bottom: 0;\n    }\n    \n    /* Adjust FAB position in portrait */\n    .btn-system-fab {\n        bottom: 1.5rem;\n        right: 1.5rem;\n    }\n}\n\n/* Landscape orientation */\n@media (orientation: landscape) {\n    .btn-system-landscape-inline .btn-system {\n        display: inline-flex;\n        margin-right: 0.75rem;\n        margin-bottom: 0.5rem;\n    }\n    \n    .btn-system-landscape-inline .btn-system:last-child {\n        margin-right: 0;\n    }\n    \n    /* Adjust FAB position in landscape */\n    .btn-system-fab {\n        bottom: 1rem;\n        right: 1rem;\n    }\n}\n\n/* ========================== Device-specific Optimizations ========================== */\n\n/* iPhone SE and similar small screens */\n@media (max-width: 375px) and (max-height: 667px) {\n    .btn-system {\n        font-size: 0.9rem;\n        padding: 0.7rem 1.2rem;\n        min-height: 42px;\n    }\n    \n    .btn-system-sm {\n        font-size: 0.8rem;\n        padding: 0.5rem 0.9rem;\n        min-height: 36px;\n    }\n    \n    .btn-system-fab {\n        width: 44px;\n        height: 44px;\n        bottom: 1rem;\n        right: 1rem;\n    }\n}\n\n/* iPhone 12/13/14 and similar */\n@media (min-width: 390px) and (max-width: 428px) {\n    .btn-system {\n        font-size: 1rem;\n        padding: 0.875rem 1.5rem;\n        min-height: 48px;\n    }\n    \n    .btn-system-lg {\n        font-size: 1.125rem;\n        padding: 1.125rem 2rem;\n        min-height: 54px;\n    }\n}\n\n/* iPad and tablet devices */\n@media (min-width: 768px) and (max-width: 1024px) {\n    .btn-system {\n        font-size: 1.05rem;\n        padding: 0.875rem 1.75rem;\n        min-height: 48px;\n    }\n    \n    .btn-system-lg {\n        font-size: 1.2rem;\n        padding: 1.125rem 2.25rem;\n        min-height: 56px;\n    }\n    \n    .btn-system-fab {\n        width: 60px;\n        height: 60px;\n        bottom: 2rem;\n        right: 2rem;\n    }\n}\n\n/* ========================== Accessibility Enhancements ========================== */\n\n/* High contrast mode */\n@media (prefers-contrast: high) {\n    .btn-system {\n        border-width: 2px;\n        font-weight: 600;\n    }\n    \n    .btn-system:focus {\n        outline: 3px solid #007bff;\n        outline-offset: 3px;\n    }\n}\n\n/* Reduced motion preferences */\n@media (prefers-reduced-motion: reduce) {\n    .btn-system {\n        transition: none;\n    }\n    \n    .btn-system:hover {\n        transform: none;\n    }\n    \n    .btn-system-bounce:hover,\n    .btn-system-pulse:hover {\n        animation: none;\n    }\n}\n\n/* Large text preferences */\n@media (prefers-reduced-data: reduce) {\n    .btn-system {\n        background-image: none;\n        background: solid;\n    }\n}\n\n/* ========================== Touch Device Optimizations ========================== */\n\n/* Touch devices */\n@media (hover: none) and (pointer: coarse) {\n    .btn-system {\n        min-height: 48px;\n        padding: 0.875rem 1.5rem;\n    }\n    \n    .btn-system-sm {\n        min-height: 44px;\n        padding: 0.75rem 1.25rem;\n    }\n    \n    .btn-system-lg {\n        min-height: 56px;\n        padding: 1.125rem 2rem;\n    }\n    \n    .btn-system-xl {\n        min-height: 64px;\n        padding: 1.375rem 2.5rem;\n    }\n    \n    /* Remove hover effects on touch devices */\n    .btn-system:hover {\n        transform: none;\n        box-shadow: inherit;\n    }\n    \n    /* Add touch feedback */\n    .btn-system:active {\n        transform: scale(0.98);\n        transition: transform 0.1s ease;\n    }\n    \n    /* Touch-friendly spacing */\n    .btn-system + .btn-system {\n        margin-left: 0.75rem;\n    }\n    \n    .btn-system-group .btn-system + .btn-system {\n        margin-left: 0;\n    }\n}\n\n/* ========================== Responsive Utilities ========================== */\n\n/* Hide/show buttons based on screen size */\n.btn-system-mobile-only {\n    display: none;\n}\n\n.btn-system-desktop-only {\n    display: inline-flex;\n}\n\n@media (max-width: 767.98px) {\n    .btn-system-mobile-only {\n        display: inline-flex;\n    }\n    \n    .btn-system-desktop-only {\n        display: none;\n    }\n}\n\n/* Responsive button text */\n.btn-system-responsive-text .btn-text-full {\n    display: inline;\n}\n\n.btn-system-responsive-text .btn-text-short {\n    display: none;\n}\n\n@media (max-width: 575.98px) {\n    .btn-system-responsive-text .btn-text-full {\n        display: none;\n    }\n    \n    .btn-system-responsive-text .btn-text-short {\n        display: inline;\n    }\n}\n\n/* ========================== Container Queries (Future-proof) ========================== */\n\n/* When container queries are supported */\n@supports (container-type: inline-size) {\n    .btn-container {\n        container-type: inline-size;\n    }\n    \n    @container (max-width: 400px) {\n        .btn-system {\n            font-size: 0.9rem;\n            padding: 0.7rem 1.2rem;\n        }\n    }\n    \n    @container (min-width: 600px) {\n        .btn-system {\n            font-size: 1.1rem;\n            padding: 0.9rem 1.8rem;\n        }\n    }\n}\n\n/* ========================== Print Styles ========================== */\n\n@media print {\n    .btn-system {\n        background: transparent !important;\n        color: #000 !important;\n        border: 2px solid #000 !important;\n        box-shadow: none !important;\n        text-decoration: none !important;\n    }\n    \n    .btn-system-fab {\n        display: none !important;\n    }\n    \n    .btn-system::after {\n        content: \" [\" attr(title) \"]\";\n        font-size: 0.8em;\n    }\n}