/* Bokotel mobile booking step UX fix
   Scope: front booking / reservation / payment pages only.
   Keeps desktop unchanged but makes mobile step flow professional and readable.
*/

@media (max-width: 768px){
    html, body{
        overflow-x:hidden;
        background:#f4f6f8;
    }

    body{
        -webkit-text-size-adjust:100%;
    }

    .container,
    .content,
    #content,
    .main,
    .main-content,
    .page-content,
    .reservation-wrapper,
    .booking-wrapper{
        width:100% !important;
        max-width:100% !important;
        box-sizing:border-box;
    }

    form,
    fieldset,
    table,
    .reservation-details,
    .payment-details,
    .billing-details,
    .reservation-info,
    .checkout-info,
    .shopping-cart,
    .room_item,
    .room-wrapper{
        max-width:100% !important;
        box-sizing:border-box;
    }

    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input[type="number"],
    input[type="date"],
    select,
    textarea{
        width:100% !important;
        max-width:100% !important;
        box-sizing:border-box;
        min-height:38px;
        border:1px solid #cfd8e3;
        border-radius:8px;
        padding:8px 10px;
        background:#fff;
        font-size:14px;
    }

    input[type="submit"],
    input[type="button"],
    button,
    .button,
    .btn,
    a.button{
        min-height:38px;
        border-radius:8px !important;
        padding:8px 12px !important;
        font-weight:700;
        touch-action:manipulation;
    }

    /* Booking step tabs */
    .steps,
    .booking_steps,
    .checkout_steps,
    .reservation_tabs,
    .tabs,
    ul.tabs{
        display:flex !important;
        flex-wrap:nowrap !important;
        gap:4px;
        overflow-x:auto;
        padding:6px !important;
        margin:8px 0 12px !important;
        background:#fff;
        border:1px solid #e5e7eb;
        border-radius:12px;
        box-shadow:0 4px 14px rgba(15,23,42,.06);
        -webkit-overflow-scrolling:touch;
    }

    .steps li,
    .booking_steps li,
    .checkout_steps li,
    .reservation_tabs li,
    .tabs li,
    ul.tabs li{
        list-style:none !important;
        flex:0 0 auto;
        margin:0 !important;
    }

    .steps a,
    .booking_steps a,
    .checkout_steps a,
    .reservation_tabs a,
    .tabs a,
    ul.tabs a{
        display:block;
        white-space:nowrap;
        border-radius:999px;
        padding:8px 11px !important;
        background:#f1f5f9;
        color:#334155 !important;
        font-size:12px;
        font-weight:700;
        text-decoration:none;
    }

    .steps .active a,
    .booking_steps .active a,
    .checkout_steps .active a,
    .reservation_tabs .active a,
    .tabs .active a,
    ul.tabs .active a{
        background:#0ea5e9 !important;
        color:#fff !important;
    }

    /* Cards */
    .billing-details,
    .reservation-details,
    .payment-details,
    .checkout-details,
    .guest-details,
    .reservation-info,
    .booking-info,
    .box,
    .block,
    .widget,
    .side_box,
    .side-block{
        background:#fff !important;
        border:1px solid #e5e7eb !important;
        border-radius:14px !important;
        padding:12px !important;
        margin:10px 0 !important;
        box-shadow:0 5px 16px rgba(15,23,42,.06) !important;
    }

    .billing-details h3,
    .reservation-details h3,
    .payment-details h3,
    .checkout-details h3,
    .guest-details h3{
        font-size:16px !important;
        margin:0 0 10px !important;
        color:#0f172a;
    }

    /* Tables become readable cards */
    .reservation-details table,
    .payment-details table,
    .billing-details table,
    .checkout-details table,
    .shopping-cart table{
        width:100% !important;
        table-layout:auto !important;
        border-collapse:separate !important;
        border-spacing:0 !important;
        overflow:hidden;
        border-radius:10px;
    }

    .reservation-details th,
    .payment-details th,
    .billing-details th,
    .checkout-details th,
    .shopping-cart th{
        font-size:12px !important;
        line-height:1.25;
        padding:8px 6px !important;
        background:#16a34a !important;
        color:#fff !important;
    }

    .reservation-details td,
    .payment-details td,
    .billing-details td,
    .checkout-details td,
    .shopping-cart td{
        font-size:12px !important;
        line-height:1.35;
        padding:7px 6px !important;
        word-break:break-word;
    }

    /* Total rows */
    .subtotal,
    .grand-total,
    .total,
    .cart_total,
    .booking-total{
        font-weight:800 !important;
        color:#0f172a;
    }

    /* Promo/coupon block */
    .promo-code,
    .coupon-code,
    .discount-code{
        display:block;
        padding:10px;
        background:#f8fafc;
        border:1px dashed #cbd5e1;
        border-radius:12px;
        margin-top:10px;
    }

    /* Sidebar account menu from screenshot */
    .my-account,
    .account-menu,
    .side-menu{
        background:#fff !important;
        border:1px solid #e5e7eb !important;
        border-radius:14px !important;
        padding:12px !important;
        margin:10px 0 !important;
        box-shadow:0 5px 16px rgba(15,23,42,.05) !important;
    }

    /* Prevent ugly narrow columns */
    .left_column,
    .right_column,
    .sidebar,
    .main_column,
    .col-left,
    .col-right{
        float:none !important;
        width:100% !important;
        max-width:100% !important;
        margin:0 !important;
        padding-left:0 !important;
        padding-right:0 !important;
    }

    img{
        max-width:100%;
        height:auto;
    }

    /* Footer payment icons */
    footer,
    #footer,
    .footer{
        text-align:center;
    }
}

@media (max-width: 420px){
    .reservation-details th,
    .payment-details th,
    .billing-details th,
    .checkout-details th,
    .shopping-cart th,
    .reservation-details td,
    .payment-details td,
    .billing-details td,
    .checkout-details td,
    .shopping-cart td{
        font-size:11px !important;
        padding:6px 4px !important;
    }

    .steps a,
    .booking_steps a,
    .checkout_steps a,
    .reservation_tabs a,
    .tabs a,
    ul.tabs a{
        font-size:11px;
        padding:7px 9px !important;
    }
}