@media (max-width: 700px) {
    .shipping-container {
        flex-direction: column;
        width: 100%;
        align-items: stretch;
    }
    .warning-box {
        margin-left: 0;
        margin-left: 0px !important;
        max-width: none !important;
        margin-top: 15px;
        max-width: none;
        width: 100%;
        box-sizing: border-box;
    }

    /* New mobile table styles */
    table {
        font-size: 14px;
    }

    th, td {
        padding: 8px 4px;
    }

    .quantity-cell {
        flex-direction: column;
        gap: 5px;
        font-size: 12px;
    }

    .quantity-control {
        width: 100%;
        justify-content: center;
    }

    #floatingTotal {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }

    #floatingTotal button {
        width: 100%;
    }

    #floatingTotal h3 {
        font-size: 16px;
    }

    #totalSection {
        padding: 15px;
        margin: 10px;
        max-width: calc(95vw - 20px);  /* Reduced from 100vw to 95vw */
        margin: 10px auto;
        padding: 10px;
    }
    
    .payment-box, .countdown-box {
        padding: 10px;
        margin: 10px 0;
        width: 100%;
        box-sizing: border-box;
    }
    
    #cryptoPayAmount {
        font-size: 1em;
        letter-spacing: 1px;
    }
    
    .order-note {
        margin-top: 15px;
        padding: 8px;
    }
    
    #orderDetails {
        font-size: 0.9em;
    }
}

@media (max-width: 700px) {
    table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    #totalSection {
        padding: 10px;
        font-size: 0.9em;
        margin: 5px;
        max-width: calc(95vw - 10px);  /* Reduced from 100vw to 95vw */
        margin: 5px auto;
        padding: 8px;
    }
    
    .payment-box, .countdown-box {
        margin: 8px 0;
    }
    
    #cryptoPayAmount {
        font-size: 0.9em;
        letter-spacing: 0;
        word-break: break-all;
    }
    
    #cryptoAddress {
        font-size: 12px;
        padding: 8px;
        width: 100%;
        box-sizing: border-box;
        padding: 10px;
    }
    
    .order-note {
        font-size: 0.8em;
    }
    
    #orderDetails {
        font-size: 0.8em;
    }
}

@media (max-width: 700px) {

    /* Adjust remaining columns */
    .quantity-cell {
        flex-direction: column;
        gap: 5px;
        font-size: 12px;
    }

    /* Make quantity controls more prominent */
    .quantity-control {
        width: 100%;
        justify-content: center;
        padding: 5px 0;
    }

    /* Add a running total at the bottom instead */
    #floatingTotal {
        background: white;
        padding: 15px;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
    }

    table {
        width: 100%;
        display: block;
    }

    thead {
        display: none;  /* Hide headers on mobile */
    }

    tbody {
        display: block;
        width: 100%;
    }

    tr {
        display: block;
        margin-bottom: 15px;
        border: 1px solid #814d85;
        padding: 10px;
        background: rgba(92, 55, 95, 0.1);
    }

    td {
        display: block;
        border: none !important; /* Force remove borders */
        border-bottom: none !important; /* Ensure no bottom border */
        padding: 5px 0;
        text-align: left;
        position: relative;
    }

    /* Remove borders from summary table in order confirmation */
    .summary-table td,
    .summary-table th,
    .summar-table tr {
        border: none !important;
        font-size: 1.1em;
    }

    .summary-table tr:last-child {
        border-bottom: none;
    }

    /* Make product name bold */
    td:first-child {
        font-weight: bold;
        font-size: 1.3em;
        color: #ff69b4;
        padding-bottom: 10px;
    }

    /* Stack quantity controls */
    .quantity-cell {
        font-size: 1.2em;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        padding: 10px 0;
    }

    .quantity-control {
        min-width: 100px;
        margin: 0 auto;  /* Center horizontally */
    }

    /* Center the vial text */
    .quantity-cell::after {
        content: attr(data-amount);
        display: block;
        margin-top: 5px;
        font-size: 0.9em;
        color: #cccbcb;
        text-align: center;
        width: 100%;
    }
    .order-button {
        margin-right: 0px !important;
    }
    
}

/* Further optimize for very small screens */
@media (max-width: 700px) {
    tr {
        margin: 10px 0;
        padding: 8px;
    }

    .order-form {
        margin: 0px;
    }

    .quantity-cell {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    #container {
        padding: 0;
        margin: 0;
    }

    main {
        padding: 10px;
    }

    .shipping-container {
        margin: 10px 0;
    }

    #shippingSection {
        padding: 10px;
        margin: 5px 0;
    }

    .order-button {
        margin-right: 0px !important;
    }

    .warning-box {
        margin: 10px 0;
        margin-left: 0px !important;
        max-width: none !important;
        padding: 12px;
        width: 100%;
        box-sizing: border-box;
        font-size: 0.9em;
    }

    input[type="text"],
    input[type="email"],
    textarea {
        padding: 10px;
        font-size: 14px;
    }

    tr {
        margin: 8px 0;
        padding: 8px;
    }

    .quantity-cell {
        padding: 5px 0;
    }

    .crypto-buttons,
    .region-buttons {
        flex-direction: column;
        gap: 5px;
        width: 100%;
    }

    .crypto-button,
    .region-button {
        flex: 1 1 auto;
        min-width: max-content;
        margin: 2px 0;
    }

    #shippingRegion,
    #cryptoSelection {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
        padding: 10px;
    }
}