/* ===================================================
   CENTERING STANDARD - Applied to ALL pages
   Standards: max-width 1200px, margin 0 auto, symmetric padding
   Breakpoints: 360px (mobile) → 2560px (ultra-wide)
   =================================================== */

/* ============================================
   CONTAINER STANDARDIZATION
   ============================================ */

/* Standard container for all pages with header */
.main-container,
.dashboard-container,
.container,
.faq-container,
.plans-container,
.page-container,
.content-container,
.affiliate-container,
.analytics-container,
.addons-container,
.api-container,
.hub-container,
.invoices-container,
.support-container,
.payment-container,
.hublfree-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: clamp(16px, 3%, 32px) 24px;
    box-sizing: border-box;
    width: 100%;
}

/* Main content wrapper */
.main-content {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    height: auto !important;
    padding: clamp(12px, 2%, 20px) 0 40px 0 !important;
    min-height: calc(100vh - 200px);
    box-sizing: border-box;
}

/* ============================================
   ERROR & AUTH PAGES (Full-screen centered)
   ============================================ */

.error-container,
.login-container,
.register-container,
.auth-container {
    max-width: 700px;
    width: 100%;
    margin: 0 auto;
    padding: 40px 24px;
    box-sizing: border-box;
}

.login-container {
    max-width: 440px;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

/* Tablet (768px and below) */
@media (max-width: 768px) {
    .main-container,
    .dashboard-container,
    .container,
    .faq-container,
    .plans-container,
    .page-container,
    .content-container,
    .affiliate-container,
    .analytics-container,
    .addons-container,
    .api-container,
    .hub-container,
    .invoices-container,
    .support-container,
    .payment-container,
    .hublfree-container {
        padding: clamp(12px, 2.5%, 20px) 16px;
    }

    .main-content {
        padding: 20px 0 30px 0;
    }

    .error-container,
    .auth-container {
        padding: 40px 20px;
    }

    .login-container {
        padding: 30px 20px;
    }
}

/* Mobile (480px and below) */
@media (max-width: 480px) {
    .main-container,
    .dashboard-container,
    .container,
    .faq-container,
    .plans-container,
    .page-container,
    .content-container,
    .affiliate-container,
    .analytics-container,
    .addons-container,
    .api-container,
    .hub-container,
    .invoices-container,
    .support-container,
    .payment-container,
    .hublfree-container {
        padding: clamp(12px, 2%, 16px) 12px;
    }

    .main-content {
        padding: 16px 0 24px 0;
    }

    .error-container,
    .auth-container {
        padding: 30px 16px;
    }

    .login-container {
        padding: 24px 16px;
    }
}

/* Desktop (1024px and above) */
@media (min-width: 1024px) {
    .main-container,
    .dashboard-container,
    .container,
    .faq-container,
    .plans-container,
    .page-container,
    .content-container,
    .affiliate-container,
    .analytics-container,
    .addons-container,
    .api-container,
    .hub-container,
    .invoices-container,
    .support-container,
    .payment-container,
    .hublfree-container {
        padding: clamp(20px, 3%, 32px) 24px;
    }
}

/* Ultra-wide screens (1920px and above) */
@media (min-width: 1920px) {
    .main-container,
    .dashboard-container,
    .container,
    .faq-container,
    .plans-container,
    .page-container,
    .content-container,
    .affiliate-container,
    .analytics-container,
    .addons-container,
    .api-container,
    .hub-container,
    .invoices-container,
    .support-container,
    .payment-container,
    .hublfree-container {
        padding: clamp(24px, 3%, 40px) 32px;
    }
}

/* ============================================
   NO HORIZONTAL SCROLLBAR GUARANTEE
   ============================================ */

* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    overflow-x: hidden;
}

/* ============================================
   NESTED CONTAINERS (Inside main containers)
   ============================================ */

/* Sections inside containers should not overflow */
.hero-section,
.section,
.card-grid,
.plans-grid,
.content-grid,
.stats-grid,
.dashboard-grid {
    width: 100%;
    box-sizing: border-box;
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #3b82f6;
    color: white;
    padding: 8px;
    text-decoration: none;
    z-index: 100;
    border-radius: 0 0 4px 0;
    font-size: 14px;
}

.skip-link:focus {
    top: 0;
}