/* Google Fonts Import for Inter */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* TextBoxem Mobile Styles */
@media (max-width: 768px) {
    .textboxem-widget {
        padding: 0; /* Removed all padding for full width */
        margin: 0;
        min-height: auto;
        font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    }
    
    .textboxem-container {
        padding: 0; /* Completely removed padding for full width */
        margin: 0; /* Removed margin for full width */
        border-radius: 0; /* Removed border radius for full width */
        max-width: 100%; /* Full width */
        width: 100%; /* Full width */
        text-align: left; /* Force left alignment */
        font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    }

    .textboxem-header-section {
        padding: 12px 16px; /* Proper padding inside header */
        border-radius: 20px; /* Rounded header */
        margin: 8px 12px 8px 12px; /* Small margins for rounded effect */
        width: calc(100% - 24px); /* Full width minus margins */
        position: relative;
        box-sizing: border-box;
        text-align: left; /* Force left alignment */
        font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    }

    .textboxem-main-title {
        font-size: 28px; /* Increased from 22px to 28px */
        gap: 8px; /* Increased from 4px for better spacing */
        flex-direction: row; /* Changed to row for horizontal layout with trophy */
        line-height: 1.1; /* Slightly increased for readability */
        padding: 0; /* Removed padding */
        width: 100%;
        text-align: center !important; /* Center alignment for header title */
        justify-content: center; /* Center alignment for flex layout */
        align-items: center; /* Center align vertically only */
        display: flex; /* Ensure flex display */
        white-space: nowrap; /* Prevent text wrapping */
        overflow: hidden; /* Handle overflow */
        text-overflow: ellipsis; /* Add ellipsis if too long */
        font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
        font-weight: 600; /* Semi-bold for better visibility */
    }

    .textboxem-trophy-icon {
        font-size: 28px; /* Increased from 22px to 28px */
        flex-shrink: 0; /* Prevent icon from shrinking */
    }

    .textboxem-color-divider {
        margin: 6px 12px; /* Side margins to match header */
        width: calc(100% - 24px); /* Full width minus margins */
        position: relative;
    }

    .textboxem-section-title {
        font-size: 22px; /* Increased from 18px to 22px */
        margin-bottom: 8px; /* Slightly increased */
        padding: 8px 16px; /* Proper padding for full width */
        border-radius: 0; /* Removed border radius for full width */
        margin-left: 0; /* Removed negative margins */
        margin-right: 0; /* Removed negative margins */
        width: 100%; /* Full width */
        position: relative;
        text-align: left !important; /* Force left alignment with !important */
        white-space: nowrap; /* Prevent text wrapping */
        overflow: hidden; /* Handle overflow */
        text-overflow: ellipsis; /* Add ellipsis if too long */
        box-sizing: border-box;
        font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
        font-weight: 600; /* Semi-bold for section titles */
    }

    .textboxem-content,
    .textboxem-main-content {
        font-size: 16px; /* Increased from 14px to 16px */
        margin-bottom: 8px; /* Slightly increased */
        text-align: left !important; /* Force left alignment with !important */
        padding: 0 16px; /* Proper side padding for readability */
        margin-left: 0; /* Removed negative margins */
        margin-right: 0; /* Removed negative margins */
        width: 100%; /* Full width */
        position: relative;
        max-width: none; /* Remove max-width constraints for full usage */
        box-sizing: border-box;
        font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    }
    
    /* Mobile WYSIWYG Content - Full width with larger fonts */
    .textboxem-content h1, .textboxem-main-content h1 { 
        font-size: 24px; /* Increased from 20px to 24px */
        margin-bottom: 6px; /* Slightly increased */
        line-height: 1.2; /* Better readability */
        text-align: left !important; /* Force left alignment with !important */
        padding: 0; /* No padding for full width */
        white-space: nowrap; /* Prevent text wrapping */
        overflow: hidden; /* Handle overflow */
        text-overflow: ellipsis; /* Add ellipsis if too long */
        font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
        font-weight: 600; /* Semi-bold for headings */
    }
    .textboxem-content h2, .textboxem-main-content h2 { 
        font-size: 20px; /* Increased from 17px to 20px */
        margin-bottom: 6px; /* Slightly increased */
        line-height: 1.2; /* Better readability */
        text-align: left !important; /* Force left alignment with !important */
        padding: 0; /* No padding for full width */
        white-space: nowrap; /* Prevent text wrapping */
        overflow: hidden; /* Handle overflow */
        text-overflow: ellipsis; /* Add ellipsis if too long */
        font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
        font-weight: 600; /* Semi-bold for headings */
    }
    .textboxem-content h3, .textboxem-main-content h3 { 
        font-size: 18px; /* Increased from 15px to 18px */
        margin-bottom: 5px; /* Slightly increased */
        line-height: 1.2; /* Better readability */
        text-align: left !important; /* Force left alignment with !important */
        padding: 0; /* No padding for full width */
        white-space: nowrap; /* Prevent text wrapping */
        overflow: hidden; /* Handle overflow */
        text-overflow: ellipsis; /* Add ellipsis if too long */
        font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
        font-weight: 500; /* Medium weight for H3 */
    }
    .textboxem-content h4, .textboxem-main-content h4 { 
        font-size: 16px; /* Increased from 14px to 16px */
        margin-bottom: 4px; /* Slightly increased */
        line-height: 1.2; /* Better readability */
        text-align: left !important; /* Force left alignment with !important */
        padding: 0; /* No padding for full width */
        white-space: nowrap; /* Prevent text wrapping */
        overflow: hidden; /* Handle overflow */
        text-overflow: ellipsis; /* Add ellipsis if too long */
        font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
        font-weight: 500; /* Medium weight for H4 */
    }
    .textboxem-content h5, .textboxem-main-content h5 { 
        font-size: 15px; /* Increased from 13px to 15px */
        margin-bottom: 4px; /* Slightly increased */
        line-height: 1.2; /* Better readability */
        text-align: left !important; /* Force left alignment with !important */
        padding: 0; /* No padding for full width */
        white-space: nowrap; /* Prevent text wrapping */
        overflow: hidden; /* Handle overflow */
        text-overflow: ellipsis; /* Add ellipsis if too long */
        font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
        font-weight: 500; /* Medium weight for H5 */
    }
    .textboxem-content h6, .textboxem-main-content h6 { 
        font-size: 14px; /* Increased from 12px to 14px */
        margin-bottom: 3px; /* Slightly increased */
        line-height: 1.2; /* Better readability */
        text-align: left !important; /* Force left alignment with !important */
        padding: 0; /* No padding for full width */
        white-space: nowrap; /* Prevent text wrapping */
        overflow: hidden; /* Handle overflow */
        text-overflow: ellipsis; /* Add ellipsis if too long */
        font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
        font-weight: 500; /* Medium weight for H6 */
    }
    
    .textboxem-content p,
    .textboxem-main-content p {
        font-size: 16px; /* Increased from 14px to 16px */
        margin-bottom: 6px; /* Slightly increased */
        line-height: 1.4; /* Better readability */
        text-align: left !important; /* Force left alignment with !important */
        padding: 0; /* No padding for full width */
        max-width: none; /* Remove width constraints */
        word-wrap: break-word; /* Allow long words to break */
        overflow-wrap: break-word; /* Modern property for word breaking */
        font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
        font-weight: 400; /* Regular weight for paragraphs */
    }

    /* Lists and other content elements full width */
    .textboxem-content ul, .textboxem-main-content ul,
    .textboxem-content ol, .textboxem-main-content ol {
        padding-left: 16px; /* Minimal indentation for goldilocks zone */
        margin-bottom: 6px; /* Slightly increased */
        text-align: left !important; /* Force left alignment */
        font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    }

    .textboxem-content li, .textboxem-main-content li {
        margin-bottom: 3px; /* Slightly increased */
        line-height: 1.4; /* Better readability */
        text-align: left !important; /* Force left alignment */
        font-size: 16px; /* Same as paragraph size */
        word-wrap: break-word; /* Allow long words to break */
        overflow-wrap: break-word; /* Modern property for word breaking */
        font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
        font-weight: 400; /* Regular weight for list items */
    }

    .textboxem-diamond-divider {
        margin: 8px 12px; /* Side margins to match header */
        width: calc(100% - 24px); /* Full width minus margins */
        position: relative;
    }

    .textboxem-content-section {
        margin-bottom: 10px; /* Slightly increased */
        padding: 0; /* No padding for full width */
        text-align: left !important; /* Force left alignment */
        font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    }
}

/* Ultra Mobile Dividers */
@media (max-width: 480px) {
    .textboxem-color-divider {
        margin: 4px 8px; /* Reduced side margins for smaller screens */
        width: calc(100% - 16px); /* Full width minus smaller margins */
    }
    
    .textboxem-diamond-divider {
        margin: 6px 8px; /* Reduced side margins for smaller screens */
        width: calc(100% - 16px); /* Full width minus smaller margins */
    }
}

/* Ultra Mobile (Small Phones) - Larger fonts for small screens */
@media (max-width: 480px) {
    .textboxem-container {
        padding: 0; /* Completely removed padding for full width */
        border-radius: 0; /* Full width, no radius */
        text-align: left !important; /* Force left alignment */
        font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    }

    .textboxem-header-section {
        padding: 10px 12px; /* Reduced padding for smaller screens */
        border-radius: 16px; /* Smaller rounded corners */
        margin: 6px 8px 6px 8px; /* Smaller margins */
        width: calc(100% - 16px); /* Full width minus smaller margins */
        position: relative;
        box-sizing: border-box;
        text-align: left !important; /* Force left alignment */
        font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    }

    .textboxem-main-title {
        font-size: 24px; /* Increased from 18px to 24px */
        gap: 6px; /* Reduced gap for smaller screens */
        padding: 0;
        width: 100%;
        text-align: center !important; /* Center alignment for header title */
        line-height: 1.0; /* Tight line height */
        flex-direction: row; /* Keep horizontal layout */
        justify-content: center; /* Center alignment for flex layout */
        align-items: center; /* Center align vertically only */
        display: flex; /* Ensure flex display */
        white-space: nowrap; /* Prevent text wrapping */
        overflow: hidden; /* Handle overflow */
        text-overflow: ellipsis; /* Add ellipsis if too long */
        font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
        font-weight: 600; /* Semi-bold for better visibility */
    }

    .textboxem-trophy-icon {
        font-size: 24px; /* Increased from 18px to 24px */
        flex-shrink: 0; /* Prevent icon from shrinking */
    }

    .textboxem-section-title {
        font-size: 18px; /* Increased from 16px to 18px */
        margin-bottom: 6px; /* Slightly increased */
        padding: 6px 12px; /* Proper padding for smaller screens */
        border-radius: 0; /* Full width, no radius */
        margin-left: 0; /* Full width */
        margin-right: 0; /* Full width */
        width: 100%; /* Full width */
        position: relative;
        text-align: left !important; /* Force left alignment */
        white-space: nowrap; /* Prevent text wrapping */
        overflow: hidden; /* Handle overflow */
        text-overflow: ellipsis; /* Add ellipsis if too long */
        box-sizing: border-box;
        font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
        font-weight: 600; /* Semi-bold for section titles */
    }

    .textboxem-content,
    .textboxem-main-content {
        font-size: 15px; /* Increased from 13px to 15px */
        margin-bottom: 6px; /* Slightly increased */
        text-align: left !important; /* Force left alignment */
        padding: 0 12px; /* Proper side padding for smaller screens */
        margin-left: 0; /* Full width */
        margin-right: 0; /* Full width */
        width: 100%; /* Full width */
        position: relative;
        line-height: 1.3; /* Better readability */
        max-width: none; /* Remove width constraints */
        box-sizing: border-box;
        font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    }
    
    /* Ultra Mobile WYSIWYG Content - Larger fonts */
    .textboxem-content h1, .textboxem-main-content h1 { 
        font-size: 22px; /* Increased from 18px to 22px */
        margin-bottom: 5px; /* Slightly increased */
        line-height: 1.1;
        text-align: left !important; /* Force left alignment */
        padding: 0; /* No padding for full width */
        white-space: nowrap; /* Prevent text wrapping */
        overflow: hidden; /* Handle overflow */
        text-overflow: ellipsis; /* Add ellipsis if too long */
        font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
        font-weight: 600; /* Semi-bold for headings */
    }
    .textboxem-content h2, .textboxem-main-content h2 { 
        font-size: 18px; /* Increased from 15px to 18px */
        margin-bottom: 5px; /* Slightly increased */
        line-height: 1.1;
        text-align: left !important; /* Force left alignment */
        padding: 0; /* No padding for full width */
        white-space: nowrap; /* Prevent text wrapping */
        overflow: hidden; /* Handle overflow */
        text-overflow: ellipsis; /* Add ellipsis if too long */
        font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
        font-weight: 600; /* Semi-bold for headings */
    }
    .textboxem-content h3, .textboxem-main-content h3 { 
        font-size: 16px; /* Increased from 14px to 16px */
        margin-bottom: 4px; /* Slightly increased */
        line-height: 1.1;
        text-align: left !important; /* Force left alignment */
        padding: 0; /* No padding for full width */
        white-space: nowrap; /* Prevent text wrapping */
        overflow: hidden; /* Handle overflow */
        text-overflow: ellipsis; /* Add ellipsis if too long */
        font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
        font-weight: 500; /* Medium weight for H3 */
    }
    .textboxem-content h4, .textboxem-main-content h4 { 
        font-size: 15px; /* Increased from 13px to 15px */
        margin-bottom: 4px; /* Slightly increased */
        line-height: 1.1;
        text-align: left !important; /* Force left alignment */
        padding: 0; /* No padding for full width */
        white-space: nowrap; /* Prevent text wrapping */
        overflow: hidden; /* Handle overflow */
        text-overflow: ellipsis; /* Add ellipsis if too long */
        font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
        font-weight: 500; /* Medium weight for H4 */
    }
    .textboxem-content h5, .textboxem-main-content h5 { 
        font-size: 14px; /* Increased from 12px to 14px */
        margin-bottom: 3px; /* Slightly increased */
        line-height: 1.1;
        text-align: left !important; /* Force left alignment */
        padding: 0; /* No padding for full width */
        white-space: nowrap; /* Prevent text wrapping */
        overflow: hidden; /* Handle overflow */
        text-overflow: ellipsis; /* Add ellipsis if too long */
        font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
        font-weight: 500; /* Medium weight for H5 */
    }
    .textboxem-content h6, .textboxem-main-content h6 { 
        font-size: 13px; /* Increased from 11px to 13px */
        margin-bottom: 3px; /* Slightly increased */
        line-height: 1.1;
        text-align: left !important; /* Force left alignment */
        padding: 0; /* No padding for full width */
        white-space: nowrap; /* Prevent text wrapping */
        overflow: hidden; /* Handle overflow */
        text-overflow: ellipsis; /* Add ellipsis if too long */
        font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
        font-weight: 500; /* Medium weight for H6 */
    }
    
    .textboxem-content p,
    .textboxem-main-content p {
        font-size: 15px; /* Increased from 13px to 15px */
        margin-bottom: 5px; /* Slightly increased */
        line-height: 1.3; /* Better readability */
        text-align: left !important; /* Force left alignment */
        padding: 0; /* No padding for full width */
        max-width: none; /* Remove width constraints */
        word-wrap: break-word; /* Allow long words to break */
        overflow-wrap: break-word; /* Modern property for word breaking */
        font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
        font-weight: 400; /* Regular weight for paragraphs */
    }

    /* Ultra mobile lists full width with larger fonts */
    .textboxem-content ul, .textboxem-main-content ul,
    .textboxem-content ol, .textboxem-main-content ol {
        padding-left: 12px; /* Minimal indentation for small screens */
        margin-bottom: 5px; /* Slightly increased */
        text-align: left !important; /* Force left alignment */
        font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    }

    .textboxem-content li, .textboxem-main-content li {
        margin-bottom: 2px; /* Slightly increased */
        line-height: 1.3; /* Better readability */
        text-align: left !important; /* Force left alignment */
        font-size: 15px; /* Increased font size */
        word-wrap: break-word; /* Allow long words to break */
        overflow-wrap: break-word; /* Modern property for word breaking */
        font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
        font-weight: 400; /* Regular weight for list items */
    }
    
    .textboxem-content-section {
        margin-bottom: 8px; /* Slightly increased */
        padding: 0; /* No padding for full width */
        text-align: left !important; /* Force left alignment */
        font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    }
}

/* Mobile App-like Touch Optimizations */
@media (max-width: 768px) {
    .textboxem-widget {
        -webkit-tap-highlight-color: transparent;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    
    .textboxem-content {
        -webkit-user-select: text;
        -moz-user-select: text;
        -ms-user-select: text;
        user-select: text;
    }
    
    /* Mobile Scroll Optimization */
    .textboxem-container {
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
    }
    
    /* Mobile Performance */
    .textboxem-widget * {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
    
    /* Reduced Motion for Mobile Battery */
    @media (prefers-reduced-motion: reduce) {
        .textboxem-widget *,
        .textboxem-widget *::before,
        .textboxem-widget *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
    }
}

/* Landscape Orientation */
@media (max-width: 768px) and (orientation: landscape) {
    .textboxem-main-title {
        flex-direction: row;
        font-size: 20px;
        justify-content: center; /* Center alignment in landscape too */
        text-align: center !important; /* Center alignment for header title in landscape */
    }
    
    .textboxem-container {
        padding: 0;
    }
    
    .textboxem-header-section {
        padding: 10px 16px;
    }
}

/* High DPI Mobile Displays */
@media (max-width: 768px) and (-webkit-min-device-pixel-ratio: 2) {
    .textboxem-container::before {
        height: 1px;
    }
    
    .textboxem-color-divider {
        height: 2px;
    }
}

/* iOS Specific Optimizations */
@supports (-webkit-appearance: none) {
    @media (max-width: 768px) {
        .textboxem-container {
            -webkit-backdrop-filter: blur(40px);
            backdrop-filter: blur(40px);
        }
    }
}