/**
 * Biglietteria - Stili Tablet
 * Breakpoint: 769px - 1024px
 * ============================================================================
 */

/* Tablet orizzontale (769px - 1024px) */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    
    .width-container-pro {
        width: 100% !important;
    }
}

/* Tablet/Desktop (min-width: 769px) */
@media screen and (min-width: 769px) {
    .bg-switch-form-msg-desktop {
        background: rgba(66, 153, 225, 0.05) !important;
        padding: 10px !important;
        border-radius: 4px !important;
        border: 1px solid rgba(66, 153, 225, 0.2) !important;
    }
}

/* Admin tablet (max-width: 782px) */
@media screen and (max-width: 782px) {
    .width-container-pro {
        width: 100% !important;
    }
    .wrap {
        clear: both;
        margin: 0;
    }
    .bg-summary-grid {
        grid-template-columns: 1fr;
    }
    .bg-summary-item {
        padding: 8px;
    }
    
    .widefat .bg-controls {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: center;
    }
    .widefat .bg-controls .button {
        min-width: 44px;
        min-height: 44px;
    }
    
    .bg-report-selector {
        gap: 12px;
    }
    .report-by-date,
    .report-by-customer,
    .report-by-event {
        min-width: unset;
        padding: 15px;
    }
    
    .bg-sales-report th,
    .bg-sales-report td {
        padding: 8px;
    }

    .auto-fold #wpcontent {
        padding-left: 0px;
    }
    .postbox .inside h2, .wrap [class$="icon32"] + h2, .wrap h1, .wrap > h2:first-child {
        margin: 0;
        padding: 9px 9px 4px;
    }
}

/* Tablet/Smartphone grande (max-width: 960px) */
@media screen and (max-width: 960px) {
    
    .bg-sales-report {
        display: table;
        width: auto;
    }
    .report-by-event table,
    .report-by-date table {
        display: table;
        width: auto;
    }
    
    .biglietteria img,
    .biglietteria iframe {
        max-width: 100%;
        height: auto;
    }
}

/* Carrello tablet (760px - 1024px) */
@media only screen and (max-width: 760px),
       (min-device-width: 768px) and (max-device-width: 1024px) {
    
    .bg_cart table,
    .bg_cart thead,
    .bg_cart tbody,
    .bg_cart th,
    .bg_cart td,
    .bg_cart tr,
    .bg_cart caption {
        display: block;
    }
    
    .bg_cart thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }
    
    .bg_cart tr {
        border: 1px solid #444;
        margin-bottom: 15px;
        border-radius: 5px;
        background-color: #373737;
        overflow: hidden;
    }
    
    .bg_cart td{
        border: none;
        border-bottom: 1px solid #444;
        position: relative;
        padding: 40px 10px 10px !important;
        text-align: center;
    }

    .bg_cart th {
        border: none;
        border-bottom: 1px solid #444;
        position: relative;
        padding: 40px 10px 10px !important;
        text-align: center;
    }
    
    .bg_cart td:before,
    .bg_cart th:before {
        position: absolute;
        top: 10px;
        left: 0;
        width: 100%;
        text-align: center;
        font-weight: bold;
        font-size: 13px;
        color: #aaa;
    }
    
    .bg_cart th:nth-of-type(1):before {
        content: "Evento";
    }
    
    .bg_cart td:nth-of-type(1):before {
        content: "";
    }
    
    .bg_cart td:nth-of-type(2):before {
        content: "";
    }

    .bg_cart .bg-inherited-referral-row,
    .bg_cart .bg-inherited-referral-row td,
    .bg_cart tr.bg-inherited-referral-row,
    .bg_cart tr.bg-inherited-referral-row td {
        padding: 0 !important;
        background: transparent !important;
        background-color: transparent !important;
        border: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        margin: 0 !important;
    }
    
    .bg_cart .bg-inherited-referral-row td:before {
        display: none !important;
        content: "" !important;
    }
    
    .bg-cart-table .bg-inherited-referral-row {
        background: transparent !important;
    }

    .bg_cart, .bg-after-cart, .bg-payment-form {
        width: 95%;
        margin: auto;
    }

    .bg_cart .bg-controls {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 15px;
        padding: 10px 0;
    }
    
    .bg_cart .bg-controls button {
        width: 40px;
        height: 40px;
        font-size: 20px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #515151;
        color: white;
        border: none;
        cursor: pointer;
    }
    
    .bg_cart td input[type="number"],
    .bg_cart td .input-text {
        width: 60px;
        height: 40px;
        font-size: 18px;
        text-align: center;
        border-radius: 4px;
        border: 1px solid #444;
        background-color: #2c2c2c;
        color: white;
    }

    .info_extra {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
        margin-top: 20px;
    }
    
    .box_posti_vicino, 
    .box_additional, 
    .box_promo {
        padding: 15px;
        margin-bottom: 15px;
        box-sizing: border-box;
        width: 100%;
        border-radius: 4px;
    }

    .bg-cart-buttons {
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 15px;
        margin-top: 20px;
    }
    
    .bg-cart-buttons a.button,
    .bg-cart-buttons .bg-clear-cart-button,
    .bg-cart-buttons .bg-goto-cart-button {
        flex: 1 1 45%;
        min-width: 45%;
        max-width: none;
        margin: 5px;
        padding: 15px;
        border-radius: 4px;
        height: auto;
        font-size: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .gateway-selector ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
        padding: 0;
        margin: 15px 0;
        list-style: none;
    }
    
    .gateway-selector li {
        flex: 1 1 45%;
        min-width: 45%;
        margin: 5px;
    }
    
    .gateway-selector a {
        display: block;
        width: 100%;
        box-sizing: border-box;
        text-align: center;
        padding: 15px;
        font-size: 16px;
        border-radius: 4px;
    }

    #bg_promo {
        width: 100%;
        max-width: 300px;
        margin-bottom: 10px;
    }

    .box_promo #bg_promo_verifier {
        padding: 10px 15px;
        margin-top: 10px;
        width: auto;
        font-size: 14px;
        background-color: #515151;
        border: none;
        color: white;
        border-radius: 4px;
        cursor: pointer;
    }

    .bg_cart th[scope="row"] {
        padding: 40px 10px 15px !important;
        font-size: 18px;
        text-align: center;
        background-color: #222;
        color: white;
        border-bottom: 1px solid #444;
    }
    
    .bg_cart th .bg-datetime {
        display: block;
        margin-top: 5px;
        font-size: 14px;
        color: #aaa;
    }
}

/* ============================================================================
 * CARRELLO MODERNO - TABLET
 * ============================================================================ */

/* Carrello moderno tablet (601px - 900px) */
@media (min-width: 601px) and (max-width: 900px) {
    .bg-cart-modern {
        max-width: 95%;
        margin: 0 auto;
    }
    
    .bg-cart-tickets-box {
        border-radius: 10px;
    }
    
    .bg-cart-event-header {
        gap: 15px;
        padding: 15px;
    }
    
    .bg-cart-event-image {
        height: 90px;
    }
    
    .bg-cart-tickets-header {
        grid-template-columns: 1fr 1fr 1.5fr;
    }
    
    .bg-cart-ticket-row {
        grid-template-columns: 1fr 1fr 1.5fr;
        padding: 10px 15px;
    }
    
    .bg-cart-col-label {
        font-size: 0.9em;
        padding: 10px 0 0 15px;
    }
    
    .bg-cart-col-price {
        padding: 0 15px;
    }
    
    .bg-cart-buttons {
        flex-wrap: wrap;
        gap: 10px;
    }
    
    .bg-cart-buttons a.button,
    .bg-cart-buttons .bg-clear-cart-button,
    .bg-cart-buttons .bg-goto-cart-button {
        flex: 1 1 45%;
        max-width: 48%;
    }
}

/* Carrello moderno tablet orizzontale (901px - 1024px) */
@media (min-width: 901px) and (max-width: 1024px) {
    .bg-cart-modern {
        max-width: 90%;
        margin: 0 auto;
    }
    
    .bg-cart-ticket-row {
        grid-template-columns: 1fr 1fr 2fr;
    }
    
    .bg-cart-col-price {
        padding: 0 20px;
    }
}

/* ============================================================================
 * STILI ESTRATTI DA ALTRI FILE CSS
 * ============================================================================ */

/* -------------------------------------------------------------------------
 * Da bg-cart.css - Event info layout (min-width: 768px)
 * ------------------------------------------------------------------------- */
@media screen and (min-width: 768px) {
    .bg-event-info {
        align-items: flex-start;
        display: flex;
        flex-wrap: nowrap;
    }
    
    .bg-event-main {
        flex: 1;
        margin-bottom: 0;
        margin-right: 20px;
        max-width: 60%;
    }

    .bg-tickets-container {
        border-left: 1px solid #444444;
        border-top: none;
        flex: 0 0 35%;
        margin-left: 0;
        margin-top: 0;
        padding-left: 20px;
        padding-top: 0;
        width: auto;
    }

    .bg-ticket-row {
        align-items: center;
        flex-direction: row;
        justify-content: space-between;
        padding: 12px 0;
    }
    
    .bg-ticket-type {
        flex: 0 0 20%;
        font-size: 1em;
        margin-bottom: 0;
    }
    
    .bg-ticket-details {
        flex: 1;
        margin-bottom: 0;
        padding-right: 10px;
    }
    
    .bg-ticket-buttons {
        flex: 0 0 120px;
        text-align: right;
        width: auto;
    }
    
    .bg-update-buttons {
        justify-content: flex-end;
    }
}

/* Da bg-cart.css - Three columns layout (max-width: 900px) */
@media (max-width: 900px) {
    .bg-tokens-discounts-row.bg-three-columns {
        flex-direction: column;
    }
    
    .bg-tokens-discounts-row.bg-three-columns > .bg-level-discount-section,
    .bg-tokens-discounts-row.bg-three-columns > .bg-tokens-section,
    .bg-tokens-discounts-row.bg-three-columns > .bg-total-discounts-summary {
        min-width: 100%;
    }
}

/* -------------------------------------------------------------------------
 * Da bg-loyalty.css - Tokens slider tablet (768px - 600px)
 * ------------------------------------------------------------------------- */
@media (max-width: 768px) and (min-width: 601px) {
    .bg-tokens-slider-container {
        gap: 15px;
    }
}

/* Da bg-loyalty.css - Three columns layout (max-width: 900px) */
@media (max-width: 900px) {
    .bg-tokens-discounts-row.bg-three-columns {
        flex-direction: column;
    }
    
    .bg-tokens-discounts-row.bg-three-columns > .bg-level-discount-section,
    .bg-tokens-discounts-row.bg-three-columns > .bg-tokens-section,
    .bg-tokens-discounts-row.bg-three-columns > .bg-total-discounts-summary {
        min-width: 100%;
    }
}

/* -------------------------------------------------------------------------
 * Da bg-myaccount.css - Scroll orizzontale tabella (960px - 721px)
 * ------------------------------------------------------------------------- */
@media (max-width: 960px) and (min-width: 721px) {
    .woocommerce-account .bg-myaccount-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .woocommerce-account .bg-myaccount-wrap table.my_account_orders {
        min-width: 720px; 
    }
}

/* Da bg-myaccount.css - Shop table mobile (max-width: 782px) */
@media (max-width: 782px) {
    .woocommerce-account .bg-myaccount-wrap { background: transparent; }
    .woocommerce-account .bg-myaccount-wrap table.shop_table {
        background: transparent;
        border: 0;
        box-shadow: none;
    }
    .woocommerce-account .bg-myaccount-wrap table.shop_table tbody { background: transparent; border: 0; box-shadow: none; }
    .woocommerce-account .bg-myaccount-wrap table.shop_table td { border: 0; background: transparent; }
    .woocommerce-account .bg-myaccount-wrap table.shop_table tr {
        margin-bottom: 16px;
        padding: 12px;
        border: 1px solid #2a2f36;
        border-radius: 10px;
        background: #1e2227;
        box-shadow: 0 2px 6px rgba(0,0,0,0.15);
        box-sizing: border-box;
    }
    .woocommerce-account .bg-myaccount-wrap table.shop_table tr:last-child { margin-bottom: 0; }
}