/* VPS Page Mobile Optimizations */

@media (max-width: 768px) {
    /* Two column layout becomes single column */
    .grid.grid-cols-1.md\:grid-cols-2,
    [class*="md:grid-cols-2"] {
        grid-template-columns: 1fr !important;
    }
    
    /* Configuration dropdowns */
    #tier-base,
    #tier-ram,
    #tier-storage,
    #tier-os {
        font-size: 14px !important;
        padding: 10px 36px 10px 10px !important;
        min-height: 44px;
    }
    
    /* Config summary card */
    #config-resources {
        font-size: 14px !important;
        line-height: 1.3 !important;
    }
    
    #config-summary {
        font-size: 12px !important;
        line-height: 1.3 !important;
    }
    
    #config-price {
        font-size: 13px !important;
        line-height: 1.3 !important;
    }
    
    /* Package grid spacing */
    #package-grid {
        gap: 8px !important;
    }
    
    /* Tier grid spacing */
    #tier-grid {
        gap: 8px !important;
    }
    
    /* Category headers */
    .category-header {
        margin-top: 20px !important;
        margin-bottom: 12px !important;
    }
    
    .category-header h3 {
        font-size: 16px !important;
        line-height: 1.2 !important;
    }
    
    /* Category lines */
    .category-line-left,
    .category-line-right {
        height: 1px !important;
    }
    
    /* Better form labels */
    label {
        font-size: 13px !important;
        margin-bottom: 4px;
        display: block;
        line-height: 1.3;
    }
    
    /* Checkout button */
    #btn-checkout {
        padding: 14px 18px !important;
        font-size: 15px !important;
    }
    
    /* Button icons smaller */
    #btn-checkout i {
        font-size: 14px;
    }
    
    /* Capacity error message */
    #config-capacity-error {
        font-size: 12px !important;
        padding: 10px !important;
        line-height: 1.4 !important;
    }
    
    /* Image placeholders on mobile */
    .product-image-placeholder {
        height: 100px;
        font-size: 36px;
    }
    
    .h-48 {
        height: 100px;
    }
    
    /* Reduce margins on mobile */
    .mt-6 {
        margin-top: 16px !important;
    }
    
    .mb-6 {
        margin-bottom: 16px !important;
    }
    
    .mt-4 {
        margin-top: 12px !important;
    }
    
    .mb-4 {
        margin-bottom: 10px !important;
    }
    
    .mt-2 {
        margin-top: 6px !important;
    }
    
    .mb-2 {
        margin-bottom: 6px !important;
    }
    
    /* Glass effect cards less padding */
    .glass-effect-dark {
        padding: 12px !important;
    }
    
    /* Product info padding */
    .product-info {
        padding: 14px !important;
    }
    
    /* Border radius adjustments */
    .rounded-xl {
        border-radius: 12px !important;
    }
    
    .rounded-2xl {
        border-radius: 14px !important;
    }
    
    /* Footer on mobile */
    .footer-grid {
        gap: 20px !important;
    }
    
    footer .p-8 {
        padding: 20px !important;
    }
}

/* Extra small phones */
@media (max-width: 375px) {
    .package-card .text-sm {
        font-size: 13px !important;
    }
    
    .package-card .text-xs {
        font-size: 10px !important;
    }
    
    .package-card .font-bold {
        font-size: 12px !important;
    }
    
    .package-card,
    .tier-card {
        padding: 8px !important;
    }
    
    .btn-primary {
        font-size: 14px !important;
        padding: 12px 14px !important;
    }
    
    #config-resources {
        font-size: 13px !important;
    }
    
    #config-summary {
        font-size: 11px !important;
    }
    
    #config-price {
        font-size: 12px !important;
    }
    
    .category-header h3 {
        font-size: 15px !important;
    }
    
    label {
        font-size: 12px !important;
    }
}