/* ==========================================
   responsive.css — ST-POS Responsive Styles
   ========================================== */

/* ---- Tablet ---- */
@media (max-width: 991.98px) {
    .st-hero { padding: 64px 0 56px; }
    .st-section { padding: 52px 0; }
    .st-navbar .nav-link { padding: .6rem 1rem !important; }
    .st-navbar .btn-st-primary { margin-top: .5rem; width: 100%; text-align: center; }
}

/* ---- Mobile ---- */
@media (max-width: 767.98px) {
    .st-hero { padding: 48px 0 40px; text-align: center; }
    .st-hero .lead { margin: 0 auto; }
    .st-hero .hero-badges { justify-content: center; }
    .st-hero .d-flex.gap-3 { justify-content: center; flex-wrap: wrap; }

    .st-section { padding: 40px 0; }
    .st-section-title { font-size: 1.5rem; }

    .auth-card { padding: 2rem 1.25rem; }

    .st-form-card { padding: 1.5rem 1rem; }

    .pricing-card { margin-bottom: 1rem; }

    .st-table { font-size: .82rem; }
    .st-table th, .st-table td { padding: .5rem .6rem; }

    .wa-float { bottom: 16px; right: 16px; width: 48px; height: 48px; font-size: 1.4rem; }
    
    .footer-links, .footer-contact { font-size: .85rem; }

    .stat-card { flex-direction: column; text-align: center; }
    .stat-card .stat-icon { margin: 0 auto; }
}

/* ---- Small Mobile ---- */
@media (max-width: 480px) {
    .st-hero h1 { font-size: 1.65rem; }
    .btn-st-primary, .btn-st-outline { width: 100%; }
}