/* ============================================
   MOBILE PAYMENT PAGE - MATCH HOME PAGE SPACING
   Match spacing between navbar/menu and content
   ============================================ */

@media (max-width: 767px) {
    
    /* Match home page spacing - header */
    .main-header {
        margin-bottom: 0 !important;
        padding-bottom: 15px !important;
    }
    
    /* Match home page - no extra margin between header and navbar */
    .main-header + .navbar,
    .main-header ~ .navbar {
        margin-top: 0 !important;
        padding-top: 0 !important;
        margin-bottom: 0 !important;
    }
    
    
    /* Match home page - navbar after marquee-box - same spacing */
    .navbar {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    
    /* Match home page - marquee-box spacing */
    .marquee-box {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    
    /* Match home page - main-content after navbar/hero - EXACT MATCH */
    .navbar + .main-content,
    .navbar ~ .main-content,
    .marquee-box + .main-content,
    .hero-slider + .main-content {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    
    /* Match home page - container spacing */
    .navbar + .main-content > .container,
    .navbar ~ .main-content > .container,
    .main-content > .container {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    
    /* Banner section spacing - match home page hero-slider exactly */
    /* hero-slider has: margin-top: 0, margin-bottom: clamp(15px, 3vw, 20px) */
    .main-content > div:first-child,
    .main-content > div[style*="width: 100%"]:first-child {
        margin-top: 0 !important;
        margin-bottom: clamp(15px, 3vw, 20px) !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    
    /* First section after banner - match home page spacing */
    .main-content > .container {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    
    /* Payment Methods Introduction section - match home page first section */
    .main-content > .container > div:first-child {
        margin-top: 0 !important;
        padding-top: 0 !important;
        margin-bottom: 20px !important;
    }
    
    /* All sections in container - reduce margin bottom to match home */
    .main-content .container > div {
        margin-bottom: 20px !important;
    }
    
    /* Payment Options Grid - reduce gap and padding */
    .main-content div[style*="grid-template-columns"] {
        gap: 20px !important;
        margin-bottom: 20px !important;
    }
    
    /* Payment cards - reduce padding */
    .main-content div[style*="padding: 40px"] {
        padding: 20px 15px !important;
    }
    
    /* Payment Methods Introduction - reduce padding */
    .main-content div[style*="padding: 50px 40px"] {
        padding: 25px 20px !important;
        margin-bottom: 20px !important;
    }
}

@media (max-width: 480px) {
    /* Match home page spacing (small screens) */
    .main-header {
        padding-bottom: 12px !important;
    }
    
    /* Match home page - no extra margin */
    .main-header + .navbar,
    .main-header ~ .navbar {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    
    .navbar + .main-content,
    .navbar ~ .main-content {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    
    /* Banner section - match home page hero-slider exactly */
    .main-content > div:first-child,
    .main-content > div[style*="width: 100%"]:first-child {
        margin-top: 0 !important;
        margin-bottom: clamp(15px, 3vw, 20px) !important;
    }
    
    /* Payment Methods Introduction - match home page */
    .main-content > .container > div:first-child {
        margin-top: 0 !important;
        padding-top: 0 !important;
        margin-bottom: 15px !important;
    }
    
    /* Payment cards - even smaller padding */
    .main-content div[style*="padding: 40px"],
    .main-content div[style*="padding: 50px"] {
        padding: 18px 12px !important;
    }
    
    /* Grid gap - smaller */
    .main-content div[style*="grid-template-columns"] {
        gap: 15px !important;
        margin-bottom: 15px !important;
    }
    
    /* All sections - smaller margin */
    .main-content .container > div {
        margin-bottom: 15px !important;
    }
}