/* Mobile Product Page Layout Optimization - Phone View Reordering */

@media (max-width: 767px) {
    /* Hide the desktop grid layout on mobile and use flexbox for proper ordering */
    .grid.grid-cols-6.gap-6 {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
    }
    
    /* Main content area - description and keywords section */
    .col-span-full.md\:col-span-4 {
        order: 1 !important;
        width: 100% !important;
    }
    
    /* Right sidebar content */
    .col-span-full.md\:col-span-2 {
        order: 2 !important;
        width: 100% !important;
    }
    
    /* Mobile-specific reordering within the main content */
    .col-span-full.md\:col-span-4 .bg-white.p-4 {
        display: flex !important;
        flex-direction: column !important;
    }
    
    /* PDF viewer container - move to position 1 */
    #pdf-main-container {
        order: 1 !important;
        margin-bottom: 1rem !important;
    }
    
    /* Description section - position 2 */
    .col-span-full.md\:col-span-4 .bg-white.p-4 > div:has(h3) {
        order: 2 !important;
        margin-bottom: 1rem !important;
    }
    
    /* Target description and keywords specifically */
    .col-span-full.md\:col-span-4 .bg-white.p-4 > div > h3 {
        font-weight: 600 !important;
        color: #4B5563 !important;
        padding: 0.5rem 0 !important;
        margin-bottom: 0.5rem !important;
    }
    
    /* Mobile sidebar reordering */
    .col-span-full.md\:col-span-2 > .border.border-gray-200.p-4.mt-4 {
        display: flex !important;
        flex-direction: column !important;
        margin-top: 0 !important;
        padding: 1rem !important;
    }
    
    /* Exam elaboration title - position 1 in sidebar */
    .col-span-full.md\:col-span-2 .text-lg.font-semibold.mb-2.text-center {
        order: 1 !important;
        font-size: 1.25rem !important;
        font-weight: 600 !important;
        margin-bottom: 1rem !important;
        text-align: center !important;
        color: #1F2937 !important;
    }
    
    /* Price - position 2 in sidebar */
    .col-span-full.md\:col-span-2 .text-3xl.font-bold.mb-2.text-center {
        order: 2 !important;
        font-size: 2rem !important;
        margin-bottom: 1rem !important;
        text-align: center !important;
        color: #059669 !important;
    }
    
    /* Add to cart buttons - position 3 in sidebar */
    .col-span-full.md\:col-span-2 .mb-4.text-center.space-y-2 {
        order: 3 !important;
        margin-bottom: 1.5rem !important;
    }
    
    /* Add to cart button styling */
    .col-span-full.md\:col-span-2 button[id="addToCart"] {
        width: 100% !important;
        padding: 0.875rem 1.25rem !important;
        font-size: 1.1rem !important;
        font-weight: 600 !important;
        border-radius: 0.5rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    /* Feature list - position 4 in sidebar */
    .feature-list {
        order: 4 !important;
        margin-bottom: 1rem !important;
    }
    
    .feature-item {
        display: flex !important;
        align-items: center !important;
        margin-bottom: 0.5rem !important;
        font-size: 0.9rem !important;
    }
    
    .checkmark {
        color: #059669 !important;
        font-weight: bold !important;
        margin-right: 0.5rem !important;
    }
    
    /* Review stars - position 5 in sidebar */
    .col-span-full.md\:col-span-2 .flex.justify-center.items-center.mb-3 {
        order: 5 !important;
        margin-bottom: 1rem !important;
    }
    
    /* Specifications section - position 6 in sidebar */
    .specifications {
        order: 6 !important;
        margin-top: 1rem !important;
        padding-top: 1rem !important;
        border-top: 1px solid #E5E7EB !important;
    }
    
    /* Hide the duplicate specifications in the main content on mobile */
    .col-span-full.md\:col-span-4 .specifications {
        display: none !important;
    }
    
    /* Specifications styling */
    .specifications .text-lg.font-semibold.mb-2.text-center {
        font-size: 1.125rem !important;
        font-weight: 600 !important;
        text-align: center !important;
        margin-bottom: 1rem !important;
        color: #1F2937 !important;
    }
    
    .spec-item {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        margin-bottom: 0.5rem !important;
        font-size: 0.875rem !important;
        padding: 0.25rem 0 !important;
    }
    
    .spec-label {
        font-weight: 600 !important;
        color: #374151 !important;
        width: auto !important;
    }
    
    .spec-value {
        color: #6B7280 !important;
        text-align: right !important;
        margin-left: 1rem !important;
    }
    
    /* Mobile recommendations section - move to bottom */
    .col-span-full.md\:col-span-4 .border.border-gray-200.p-4.mt-4 {
        order: 10 !important;
        margin-top: 2rem !important;
    }
}

/* Additional mobile optimizations for very small screens */
@media (max-width: 480px) {
    /* Compact spacing for small phones */
    .col-span-full.md\:col-span-2 > .border.border-gray-200.p-4.mt-4 {
        padding: 0.75rem !important;
    }
    
    .text-lg.font-semibold.mb-2.text-center {
        font-size: 1.1rem !important;
    }
    
    .text-3xl.font-bold.mb-2.text-center {
        font-size: 1.75rem !important;
    }
    
    .spec-item {
        font-size: 0.8rem !important;
    }
    
    .feature-item {
        font-size: 0.85rem !important;
    }
}