/**
 * DME Token Ecosystem - Core Variables
 * Centralized location for all site variables to ensure consistency
 */

:root {
    --dme-primary: #8bc53f; /* Green */
    --dme-secondary: #333333; /* Black/dark gray */
    --dme-accent: #8bc53f; /* Green from DME-T logo */
    --dme-dark: #121212;
    --dme-gray: #6c757d;
    --dme-medium-gray: #555555;
    --dme-light-gray: #f2f2f2;
    --dme-text-color: #333333; /* Text color */
    --dme-border-radius: 6px;
    --dme-box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
}

/* Mobile Viewport Lock - Prevent zooming and horizontal scrolling */
html, body {
    overflow-x: hidden;
}

/* Prevent touch manipulation on mobile */
html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    touch-action: manipulation;
}

/* Allow text selection for readable content */
p, span, h1, h2, h3, h4, h5, h6, div.text-content, .description, .info-text {
    -webkit-user-select: text;
    user-select: text;
}

/* Mobile-specific constraints */
@media (max-width: 768px) {
    /* Prevent touch behaviors that cause zoom */
    body {
        touch-action: manipulation;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: transparent;
    }
    
    /* Fix oversized payment icons on mobile */
    .payment-icon, .payment-icons img, .payment-method img {
        max-width: 40px !important;
        max-height: 25px !important;
        object-fit: contain !important;
    }
    
    /* Specific fixes for common payment icon containers */
    .payment-logos img, .accepted-payments img, .payment-options img {
        max-width: 35px !important;
        max-height: 22px !important;
        margin: 2px !important;
    }
    
    /* Payment icons standard sizing on mobile */
    .card-logos img, .credit-card-logos img, 
    img[src*="credit-card-logos"], img[alt*="Credit Card"],
    .dme-payment-option img[src*="credit-card-logos"],
    .payment-logo.priority-payment {
        width: 50px !important;
        height: auto !important;
        margin: 4px !important;
        border: none !important;
        padding: 0 !important;
        background: none !important;
    }
    
    /* Payment buttons standard sizing on mobile */
    .dme-payment-option-icon img {
        width: 50px !important;
        height: auto !important;
        border: none !important;
        padding: 0 !important;
    }
}