/* public_html/shared/css/tablet.css */

/* Styles specifically for tablet portrait view */
/* Apply these styles when the body has a 'kiosk-mode' class and is in portrait */

@media (orientation: portrait) and (max-width: 800px) { /* Adjust max-width as needed for your target tablets */
    body.kiosk-mode {
        font-size: 18px; /* Slightly larger base font for readability */
    }

    h1 { font-size: 2.2em; }
    h2 { font-size: 1.8em; }
    h3 { font-size: 1.5em; }

    button, .button {
        padding: 15px 30px; /* Larger tap targets */
        font-size: 1.2em;
    }

    .container {
        width: 100%; /* Full width for portrait kiosk */
        padding: 15px;
    }

    /* Example: Make item cards in menu more touch-friendly */
    .menu-item-card { /* You'll define this class in your menu CSS */
        padding: 20px;
        margin-bottom: 15px;
    }

    .menu-item-card .item-name {
        font-size: 1.4em;
    }

    .menu-item-card .item-price {
        font-size: 1.3em;
    }

    .menu-item-card .add-to-cart-btn {
        padding: 12px 20px;
        font-size: 1.1em;
    }

    /* Checkout specific adjustments */
    .checkout-summary { /* Define in checkout CSS */
        font-size: 1.1em;
    }

    .payment-option-button { /* Define in checkout options CSS */
        padding: 25px;
        font-size: 1.4em;
        margin: 10px 0;
    }

    /* Ensure modals are well-sized for portrait */
    .modal-content {
        width: 90%;
        max-width: 450px; /* Adjust if needed */
        padding: 25px;
    }
}

/* Further specific overrides for very narrow tablets if needed */
@media (orientation: portrait) and (max-width: 600px) {
    body.kiosk-mode {
        font-size: 17px;
    }
    h1 { font-size: 2em; }
    /* Add more specific overrides if necessary */
}