/* Legacy Enhanced - Mobile Specific Styles */
/* Optimized mobile layout for horizontal cards */

/* Mobile container adjustments */
@media (max-width: 768px) {
    .wcas-legacy-container {
        gap: 12px !important;
        padding: 0 4px !important;
    }
    
    /* Mobile card wrapper - consistent height */
    .wcas-legacy-mobile {
        margin: 0 0 12px 0 !important;
        max-width: 100% !important;
        min-height: 140px !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    /* Mobile summary container - consistent height */
    .wcas-mobile-summary {
        border-radius: 6px !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        min-height: 140px !important;
    }
    
    .wcas-mobile-summary:hover {
        box-shadow: 0 2px 6px rgba(0,0,0,0.15) !important;
    }
    
    /* Mobile header section - Image + Info */
    .wcas-mobile-header {
        min-height: 90px !important;
        align-items: stretch !important;
        flex: 1 !important;
        display: flex !important;
    }
    
    /* Mobile thumbnail adjustments */
    .wcas-mobile-thumbnail {
        width: 80px !important;
        min-width: 80px !important;
        padding: 8px !important;
        border-right: 1px solid #f0f0f0 !important;
    }
    
    .wcas-mobile-thumbnail img {
        width: 60px !important;
        height: 60px !important;
        border-radius: 4px !important;
    }
    
    /* Mobile info section */
    .wcas-mobile-info {
        /* padding: 10px 12px !important; - removed for tighter layout */
        flex: 1 !important;
    }
    
    .wcas-mobile-title {
        font-size: 13px !important;
        line-height: 1.3 !important;
        margin-bottom: 4px !important;
        width: 240px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
    
    .wcas-mobile-edit-hint {
        font-size: 10px !important;
        margin-left: 6px !important;
    }
    
    .wcas-mobile-description {
        font-size: 11px !important;
        line-height: 1.3 !important;
        -webkit-line-clamp: 2 !important;
    }
    
    .wcas-mobile-current-info,
    .wcas-mobile-status {
        font-size: 10px !important;
        margin-top: 2px !important;
        width: 200px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
    
    /* Mobile actions section */
    .wcas-mobile-actions {
        padding: 8px !important;
        gap: 6px !important;
        border-top: 1px solid #f0f0f0 !important;
        flex-shrink: 0 !important;
        min-height: 50px !important;
    }
    
    /* Mobile buttons - stacked in columns */
    .wcas-mobile-btn {
        flex: 1 !important;
        padding: 6px 8px !important;
        font-size: 11px !important;
        border-radius: 3px !important;
        min-height: 40px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        transition: all 0.2s ease !important;
        cursor: pointer !important;
        border: 1px solid #d2d8e0 !important;
        background: #fff !important;
        color: #273376 !important;
    }
    
    .wcas-mobile-btn:hover {
        transform: translateY(-1px) !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    }
    
    .wcas-mobile-btn:active {
        transform: translateY(0) !important;
    }
    
    .wcas-mobile-btn-text {
        font-size: 10px !important;
        font-weight: 500 !important;
        line-height: 1.2 !important;
    }
    
    .wcas-mobile-btn-price {
        font-size: 11px !important;
        font-weight: 600 !important;
        margin-top: 1px !important;
    }
    
    /* Mobile existing controls */
    .wcas-mobile-existing-controls {
        padding: 6px 8px !important;
        gap: 4px !important;
        border-top: 1px solid #f0f0f0 !important;
    }
    
    .wcas-mobile-btn-edit,
    .wcas-mobile-btn-remove {
        flex: 1 !important;
        padding: 4px 8px !important;
        font-size: 10px !important;
        min-height: 28px !important;
        border-radius: 2px !important;
    }
    
    /* Mobile edit panel */
    .wcas-mobile-edit-panel {
        border-radius: 0 0 6px 6px !important;
        padding: 10px !important;
    }
    
    .wcas-mobile-edit-content {
        gap: 12px !important;
    }
    
    /* Mobile quantity controls */
    .wcas-mobile-edit-quantity label {
        font-size: 11px !important;
        text-align: center !important;
    }
    
    .wcas-mobile-qty-btn {
        width: 32px !important;
        height: 32px !important;
        font-size: 16px !important;
        border-radius: 4px !important;
    }
    
    .wcas-mobile-qty-input {
        width: 60px !important;
        padding: 6px !important;
        font-size: 14px !important;
        border-radius: 4px !important;
    }
    
    /* Mobile select controls */
    .wcas-mobile-variation-select,
    .wcas-mobile-frequency-select {
        padding: 8px !important;
        font-size: 13px !important;
        border-radius: 4px !important;
    }
    
    /* Mobile save/cancel buttons */
    .wcas-mobile-btn-save,
    .wcas-mobile-btn-cancel {
        padding: 10px !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        border-radius: 4px !important;
        min-height: 44px !important;
    }
}

/* Very small mobile screens - stack everything vertically */
@media (max-width: 480px) {
    .wcas-legacy-container {
        padding: 0 2px !important;
    }
    
    /* Ultra-mobile header stays horizontal */
    .wcas-mobile-header {
        flex-direction: row !important;
        min-height: auto !important;
    }
    
    .wcas-mobile-thumbnail {
        /* width: 100% !important; - removed to keep horizontal layout */
        min-width: auto !important;
        border-right: none !important;
        border-bottom: 1px solid #f0f0f0 !important;
        justify-content: flex-start !important;
        padding: 12px !important;
    }
    
    .wcas-mobile-thumbnail img {
        width: 80px !important;
        height: 80px !important;
        margin-right: 12px !important;
        object-fit: contain !important;
    }
    
    .wcas-mobile-info {
        padding: 12px !important;
        flex: 1 !important;
    }
    
    .wcas-mobile-title {
        font-size: 14px !important;
        margin-bottom: 6px !important;
    }
    
    .wcas-mobile-description {
        font-size: 12px !important;
        -webkit-line-clamp: 3 !important;
    }
    
    /* Ultra-mobile buttons remain side by side but larger */
    .wcas-mobile-actions {
        padding: 10px !important;
        gap: 8px !important;
    }
    
    .wcas-mobile-btn {
        min-height: 44px !important;
        padding: 8px !important;
    }
    
    .wcas-mobile-btn-text {
        font-size: 11px !important;
    }
    
    .wcas-mobile-btn-price {
        font-size: 12px !important;
        margin-top: 2px !important;
    }
    
    /* Ultra-mobile edit controls */
    .wcas-mobile-existing-controls {
        padding: 8px 10px !important;
        gap: 6px !important;
    }
    
    .wcas-mobile-btn-edit,
    .wcas-mobile-btn-remove {
        padding: 6px 10px !important;
        font-size: 11px !important;
        min-height: 32px !important;
    }
    
    .wcas-mobile-edit-panel {
        padding: 12px !important;
    }
    
    .wcas-mobile-edit-content {
        gap: 16px !important;
    }
    
    .wcas-mobile-qty-btn {
        width: 36px !important;
        height: 36px !important;
    }
    
    .wcas-mobile-qty-input {
        width: 70px !important;
        padding: 8px !important;
        font-size: 16px !important;
    }
    
    .wcas-mobile-btn-save,
    .wcas-mobile-btn-cancel {
        min-height: 48px !important;
        font-size: 14px !important;
    }
}

/* Touch-friendly hover states for mobile */
@media (hover: none) and (pointer: coarse) {
    .wcas-mobile-btn:hover,
    .wcas-mobile-qty-btn:hover,
    .wcas-mobile-btn-edit:hover,
    .wcas-mobile-btn-remove:hover {
        transform: none !important;
        box-shadow: none !important;
    }
    
    .wcas-mobile-btn:active {
        background-color: rgba(0,0,0,0.05) !important;
        transform: scale(0.98) !important;
    }
    
    .wcas-btn-onetime.wcas-mobile-btn:active {
        background-color: #f8f9fa !important;
    }
    
    .wcas-btn-subscribe.wcas-mobile-btn:active {
        background-color: #1e2a5f !important;
    }
}

/* Loading states for mobile */
.wcas-legacy-mobile[data-loading="true"] {
    opacity: 0.7 !important;
    pointer-events: none !important;
}

/* Ensure mobile buttons are always clickable unless parent is loading */
.wcas-mobile-btn {
    pointer-events: auto !important;
}

.wcas-legacy-mobile[data-loading="true"] .wcas-mobile-btn {
    pointer-events: none !important;
}

.wcas-legacy-mobile[data-loading="true"]::after {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 24px !important;
    height: 24px !important;
    margin: -12px 0 0 -12px !important;
    border: 2px solid #f3f3f3 !important;
    border-top: 2px solid #273376 !important;
    border-radius: 50% !important;
    animation: spin 1s linear infinite !important;
    z-index: 10 !important;
}

/* Accessibility improvements for mobile */
@media (max-width: 768px) {
    .wcas-mobile-btn:focus,
    .wcas-mobile-qty-btn:focus,
    .wcas-mobile-btn-edit:focus,
    .wcas-mobile-btn-remove:focus,
    .wcas-mobile-btn-save:focus,
    .wcas-mobile-btn-cancel:focus {
        outline: 2px solid #007cba !important;
        outline-offset: 2px !important;
    }
    
    .wcas-mobile-variation-select:focus,
    .wcas-mobile-frequency-select:focus,
    .wcas-mobile-qty-input:focus {
        outline: 2px solid #007cba !important;
        outline-offset: 1px !important;
        border-color: #007cba !important;
    }
}