/* ==========================================================
   JHAPI RESPONSIVE CSS
   Hotel Search + Hotel Card + Booking Review
   Booking Rules + Passenger + Success
   Booking Details + Cancel
========================================================== */


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 991px){

    /* HOTEL CARD */

    .jhapi-hotel-card{
        flex-direction:column;
        gap:24px;
        padding:22px;
    }

    .jhapi-hotel-image{
        width:100%;
        max-width:none;
    }

    .jhapi-hotel-image img{
        width:100%;
        height:280px;
    }

    .jhapi-hotel-content{
        width:100%;
        min-width:0;
    }


    /* CHECK IN / OUT */

    .jhapi-check-times{
        flex-wrap:wrap;
        gap:15px;
    }

    .jhapi-check-times span{
        flex:1 1 200px;
        min-width:0;
    }


    /* ROOM COMBINATION */

    .jhapi-combination-room{
        flex-direction:column;
        align-items:flex-start;
        gap:8px;
    }


    /* BOOKING REVIEW */

    .jhapi-room-review{
        padding:25px;
    }


    /* PASSENGER */

    .jhapi-passenger-stage{
        padding:25px;
    }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 767px){

    /* ------------------------------------------------------
       GLOBAL
    ------------------------------------------------------ */

    .jhapi-hotel-card,
    .jhapi-search-card,
    .jhapi-booking-review,
    .jhapi-booking-rules,
    .jhapi-booking-success,
    .jhapi-booking-details,
    .jhapi-booking-cancelled,
    .jhapi-passenger-stage{
        width:100%;
        max-width:100%;
        box-sizing:border-box;
    }

    .jhapi-hotel-card *,
    .jhapi-search-card *,
    .jhapi-booking-review *,
    .jhapi-booking-rules *,
    .jhapi-booking-success *,
    .jhapi-booking-details *,
    .jhapi-booking-cancelled *,
    .jhapi-passenger-stage *{
        box-sizing:border-box;
    }


    /* ------------------------------------------------------
       HOTEL CARD
    ------------------------------------------------------ */

    .jhapi-hotel-card{
        display:flex;
        flex-direction:column;
        gap:18px;
        padding:16px;
        margin:20px 0;
        border-radius:12px;
    }

    .jhapi-hotel-image{
        width:100%;
        max-width:100%;
        flex:none;
    }

    .jhapi-hotel-image img{
        width:100%;
        height:210px;
        object-fit:cover;
        border-radius:10px;
    }

    .jhapi-hotel-content{
        width:100%;
        min-width:0;
    }

    .jhapi-hotel-title{
        font-size:23px;
        line-height:1.3;
        word-break:break-word;
    }

    .jhapi-address{
        font-size:14px;
        line-height:1.5;
        word-break:break-word;
    }


    /* CHECK-IN / CHECK-OUT */

    .jhapi-check-times{
        display:grid;
        grid-template-columns:1fr;
        gap:10px;
        margin-bottom:20px;
    }

    .jhapi-check-times span{
        width:100%;
        min-width:0;
        padding:11px 13px;
    }


    /* HOTEL ROOM LIST */

    .jhapi-room-list{
        width:100%;
        gap:12px;
    }


    /* ROOM CARD */

    .jhapi-room-card{
        width:100%;
        max-width:100%;
        padding:14px;
        margin:0;
        border-radius:10px;
    }

    .jhapi-room-card h4{
        font-size:17px;
        line-height:1.4;
    }

    .jhapi-room-card p{
        font-size:14px;
        line-height:1.5;
    }


    /* ROOM FOOTER */

    .jhapi-room-footer{
        width:100%;
        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap:15px;
    }

    .jhapi-price-box{
        width:100%;
    }

    .jhapi-price{
        font-size:24px;
    }

    .jhapi-amount{
        font-size:28px;
    }

    .jhapi-book-btn{
        width:100%;
        min-width:0;
        max-width:100%;
        height:48px;
    }


    /* ------------------------------------------------------
       MULTI ROOM COMBINATION
    ------------------------------------------------------ */

    .jhapi-combinations{
        width:100%;
        gap:12px;
    }

    .jhapi-combination-card{
        width:100%;
        padding:14px;
        border-radius:10px;
    }

    .jhapi-combination-head{
        flex-direction:column;
        align-items:flex-start;
        gap:8px;
    }

    .jhapi-combination-rooms{
        width:100%;
    }

    .jhapi-combination-room{
        width:100%;
        display:flex;
        flex-direction:column;
        align-items:flex-start;
        gap:7px;
        padding:12px;
        overflow:hidden;
    }

    .jhapi-combination-room strong{
        width:100%;
        font-size:14px;
        line-height:1.4;
        word-break:break-word;
    }

    .jhapi-combination-room span{
        width:100%;
        font-size:13px;
    }


    /* ------------------------------------------------------
       SEARCH FORM
    ------------------------------------------------------ */

    .jhapi-search-card{
        padding:18px;
        margin-bottom:20px;
        border-radius:12px;
    }

    .jhapi-search-header{
        margin-bottom:18px;
    }

    .jhapi-search-header h2{
        font-size:24px;
        line-height:1.3;
    }

    .jhapi-search-header p{
        font-size:14px;
        line-height:1.5;
    }

    .jhapi-row{
        grid-template-columns:1fr !important;
        gap:14px;
    }

    .jhapi-field input,
    .jhapi-field select{
        height:48px;
        font-size:14px;
        max-width:100%;
    }

    .jhapi-field button{
        width:100%;
        height:48px;
    }


    /* CHILD AGE */

    .jhapi-room-search-card{
        padding:14px;
        margin:10px 0;
    }

    .jhapi-room-search-card .jhapi-child-age-wrapper{
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        width:100%;
        gap:10px;
    }

    .jhapi-room-search-card .jhapi-child-age-wrapper .jhapi-field{
        min-width:0;
        width:100%;
    }


    /* ------------------------------------------------------
       BOOKING REVIEW
    ------------------------------------------------------ */

    .jhapi-booking-review{
        margin:20px 0;
    }

    .jhapi-review-header{
        margin-bottom:20px;
    }

    .jhapi-review-header h2{
        font-size:26px;
        line-height:1.3;
    }

    .jhapi-review-header p{
        font-size:14px;
        line-height:1.5;
    }

    .jhapi-room-review{
        width:100%;
        padding:16px;
        border-radius:12px;
    }

    .jhapi-review-grid{
        grid-template-columns:1fr !important;
        gap:10px;
        margin-bottom:20px;
    }

    .jhapi-review-item{
        width:100%;
        display:flex;
        flex-direction:column;
        align-items:flex-start;
        gap:6px;
        padding:14px;
    }

    .jhapi-review-item span,
    .jhapi-review-item strong{
        width:100%;
        text-align:left;
        word-break:break-word;
    }

    .jhapi-review-item strong{
        font-size:15px;
    }

    .jhapi-review-price{
        margin:20px 0;
        padding:18px 14px;
    }

    .jhapi-review-price h3{
        font-size:30px;
        word-break:break-word;
    }

    .jhapi-room-review > .jhapi-btn{
        width:100%;
        height:52px;
        font-size:15px;
    }


    /* SELECTED ROOMS */

    .jhapi-selected-rooms{
        width:100%;
        overflow:hidden;
    }

    .jhapi-selected-room{
        width:100%;
        display:flex;
        flex-direction:column;
        align-items:flex-start;
        gap:6px;
        padding:12px;
        overflow:hidden;
    }

    .jhapi-selected-room strong,
    .jhapi-selected-room span{
        width:100%;
        word-break:break-word;
    }


    /* ------------------------------------------------------
       BOOKING RULES
    ------------------------------------------------------ */

    .jhapi-booking-rules{
        width:100%;
        margin-top:20px;
        padding:16px;
        border-radius:12px;
    }

    .jhapi-rules-header{
        margin-bottom:20px;
        padding-bottom:15px;
    }

    .jhapi-rules-header h2{
        font-size:25px;
        line-height:1.3;
    }

    .jhapi-rules-header p{
        font-size:14px;
        line-height:1.5;
    }


    /* EXPIRY BOX */

    .jhapi-rules-expiry{
        width:100%;
        display:flex;
        align-items:flex-start;
        gap:12px;
        padding:14px;
        margin-bottom:20px;
    }

    .jhapi-rules-icon{
        width:45px;
        height:45px;
        min-width:45px;
        font-size:20px;
    }

    .jhapi-expiry-content{
        min-width:0;
        width:100%;
    }

    .jhapi-expiry-content span{
        font-size:13px;
    }

    .jhapi-countdown{
        font-size:28px;
        word-break:break-word;
    }

    .jhapi-expiry-content small{
        font-size:12px;
        word-break:break-word;
    }


    /* CANCELLATION POLICY */

    .jhapi-policy-card{
        padding:15px;
        margin-bottom:20px;
        border-radius:11px;
    }

    .jhapi-policy-card h3{
        font-size:19px;
        line-height:1.4;
    }

    .jhapi-policy-row{
        gap:8px;
        padding:10px 0;
    }

    .jhapi-policy-row p{
        font-size:14px;
        line-height:1.6;
        word-break:break-word;
    }


    /* ------------------------------------------------------
       PASSENGER FORM
    ------------------------------------------------------ */

    .jhapi-passenger-stage{
        width:100%;
        margin-top:20px;
        padding:16px;
        border-radius:12px;
    }

    .jhapi-room-passenger-group{
        width:100%;
        padding:12px;
        margin-top:12px;
        border-radius:10px;
        overflow:hidden;
    }

    .jhapi-room-passenger-group h3{
        font-size:18px;
        line-height:1.4;
        word-break:break-word;
    }

    .jhapi-passenger-card{
        width:100%;
        padding:14px;
        margin-bottom:14px;
        border-radius:11px;
    }

    .jhapi-passenger-card h3,
    .jhapi-passenger-card h4{
        font-size:17px;
        line-height:1.4;
        margin-bottom:13px;
        word-break:break-word;
    }

    .jhapi-passenger-grid{
        width:100%;
        grid-template-columns:1fr !important;
        gap:12px;
    }

    .jhapi-passenger-grid .jhapi-field{
        width:100%;
        min-width:0;
    }

    .jhapi-passenger-grid .jhapi-field input{
        width:100%;
        max-width:100%;
        height:46px;
        font-size:14px;
    }


    /* RULES FOOTER */

    .jhapi-rules-footer{
        width:100%;
        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap:10px;
        margin-top:22px;
        text-align:center;
    }

    .jhapi-rules-footer .jhapi-btn{
        width:100%;
        min-width:0;
        max-width:100%;
        height:50px;
        font-size:15px;
    }


    /* STAGE FOOTER */

    .jhapi-stage-footer,
    .jhapi-rules-next-step{
        width:100%;
        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap:10px;
    }

    .jhapi-stage-footer .jhapi-btn,
    .jhapi-rules-next-step .jhapi-btn{
        width:100%;
        min-width:0;
    }


    /* ------------------------------------------------------
       BOOKING CONFIRMED / SUCCESS
    ------------------------------------------------------ */

    .jhapi-booking-success{
        width:100%;
        margin:20px 0;
        padding:20px 16px;
        border-radius:12px;
    }

    .jhapi-success-header{
        padding-bottom:20px;
        margin-bottom:22px;
    }

    .jhapi-success-icon{
        width:64px;
        height:64px;
        font-size:30px;
        margin-bottom:15px;
    }

    .jhapi-success-header h2{
        font-size:26px;
        line-height:1.3;
        word-break:break-word;
    }

    .jhapi-success-header p{
        font-size:14px;
        line-height:1.5;
    }

    .jhapi-success-grid{
        width:100%;
        grid-template-columns:1fr !important;
        gap:10px;
        margin-bottom:22px;
    }

    .jhapi-success-item{
        width:100%;
        padding:14px;
    }

    .jhapi-success-item strong{
        font-size:16px;
        word-break:break-word;
        overflow-wrap:anywhere;
    }

    .jhapi-booking-success > .jhapi-btn{
        width:100%;
        height:52px;
        font-size:15px;
    }


    /* ------------------------------------------------------
       BOOKING DETAILS
    ------------------------------------------------------ */

    .jhapi-booking-details{
        width:100%;
        margin:20px 0;
        padding:18px 16px;
        border-radius:12px;
    }

    .jhapi-details-header{
        padding-bottom:20px;
        margin-bottom:22px;
    }

    .jhapi-details-header h2{
        font-size:26px;
        line-height:1.3;
        word-break:break-word;
    }

    .jhapi-details-header p{
        font-size:14px;
        line-height:1.5;
    }

    .jhapi-details-section{
        margin-bottom:24px;
    }

    .jhapi-details-section h3{
        font-size:20px;
        line-height:1.4;
        margin-bottom:15px;
    }

    .jhapi-details-grid{
        width:100%;
        grid-template-columns:1fr !important;
        gap:10px;
    }

    .jhapi-details-item{
        width:100%;
        padding:14px;
        min-width:0;
    }

    .jhapi-details-item strong{
        font-size:15px;
        word-break:break-word;
        overflow-wrap:anywhere;
    }

    .jhapi-details-item span{
        font-size:12px;
    }

    .jhapi-full{
        grid-column:auto !important;
    }

    .jhapi-policy-box{
        width:100%;
        padding:14px;
        font-size:14px;
        line-height:1.6;
        overflow-wrap:anywhere;
    }

    .jhapi-guest-list,
    .jhapi-comments{
        padding-left:20px;
        margin:0;
    }

    .jhapi-guest-list li,
    .jhapi-comments li{
        font-size:14px;
        line-height:1.5;
        word-break:break-word;
    }

    .jhapi-details-footer{
        width:100%;
        margin-top:25px;
        text-align:center;
    }

    .jhapi-details-footer .jhapi-btn{
        width:100%;
        min-width:0;
        height:50px;
        font-size:15px;
    }


    /* ------------------------------------------------------
       BOOKING CANCELLED
    ------------------------------------------------------ */

    .jhapi-booking-cancelled{
        width:100%;
        margin:20px 0;
        padding:20px 16px;
        border-radius:12px;
    }

    .jhapi-cancel-header{
        padding-bottom:20px;
        margin-bottom:22px;
    }

    .jhapi-cancel-icon{
        width:64px;
        height:64px;
        font-size:30px;
        margin-bottom:15px;
    }

    .jhapi-cancel-header h2{
        font-size:26px;
        line-height:1.3;
        word-break:break-word;
    }

    .jhapi-cancel-header p{
        font-size:14px;
        line-height:1.5;
    }

    .jhapi-cancel-grid{
        width:100%;
        grid-template-columns:1fr !important;
        gap:10px;
    }

    .jhapi-cancel-item{
        width:100%;
        padding:14px;
        min-width:0;
    }

    .jhapi-cancel-item strong{
        font-size:16px;
        word-break:break-word;
        overflow-wrap:anywhere;
    }

    .jhapi-cancel-warning{
        width:100%;
        margin-top:20px;
        padding:15px;
        overflow-wrap:anywhere;
    }

    .jhapi-cancel-warning h3{
        font-size:18px;
        line-height:1.4;
    }

    .jhapi-cancel-warning p{
        font-size:14px;
        line-height:1.6;
    }


    /* ------------------------------------------------------
       WARNINGS / ERRORS
    ------------------------------------------------------ */

    .jhapi-warning-box,
    .jhapi-error,
    .jhapi-loading{
        width:100%;
        max-width:100%;
        box-sizing:border-box;
        overflow-wrap:anywhere;
    }

    .jhapi-warning-box{
        padding:12px 14px;
        font-size:14px;
        line-height:1.5;
    }

}


/* ==========================================================
   SMALL PHONES
========================================================== */

@media (max-width: 480px){

    .jhapi-hotel-card{
        padding:12px;
    }

    .jhapi-hotel-image img{
        height:180px;
    }

    .jhapi-hotel-title{
        font-size:21px;
    }

    .jhapi-search-card,
    .jhapi-booking-rules,
    .jhapi-booking-success,
    .jhapi-booking-details,
    .jhapi-booking-cancelled,
    .jhapi-passenger-stage{
        padding:14px;
    }

    .jhapi-review-price h3{
        font-size:27px;
    }

    .jhapi-countdown{
        font-size:25px;
    }

    .jhapi-rules-header h2{
        font-size:23px;
    }

    .jhapi-success-header h2,
    .jhapi-details-header h2,
    .jhapi-cancel-header h2{
        font-size:23px;
    }

    .jhapi-room-search-card .jhapi-child-age-wrapper{
        grid-template-columns:1fr;
    }

}