
/* =========================================
   GTRIP MOBILE UI
   ROUND 1
========================================= */

@media (max-width:1024px){

html,
body{
    overflow-x:hidden;
}

body.page-id-117{
    background:#F5F7FB !important;
}

/* ---------- CONTAINER ---------- */

.gtrip-container{

    width:100%;

    max-width:100%;

    padding:0 20px;

    box-sizing:border-box;

}

/* ---------- HERO ---------- */

.gtrip-hero{

    display:flex !important;

    flex-direction:column !important;

    gap:28px !important;

    padding-top:24px;

}

.gtrip-hero-content{

    order:1;

}

.gtrip-hero-booking{

    order:2;

}

.gtrip-hero-image{

    order:3;

}




.gtrip-hero-text h1{

    font-size:28px;
    
     font-weight:700;
    

    line-height:1.2;


    margin:10px 0 10px;

}

.gtrip-hero-text p{

    font-size:17px;

    line-height:1.7;

    color:#64748B;

}

@media (max-width:1024px){

.gtrip-route-label{

    background:transparent !important;
    padding:0 !important;

}

}

@media (max-width:1024px){

.gtrip-airport-select{

    color:#111827 !important;

}

}

@media (max-width:1024px){

#gtrip-remove-return-btn{

    width:24px !important;
    height:24px !important;

    min-width:24px !important;
    min-height:24px !important;
    max-width:24px !important;
    max-height:24px !important;

    padding:0 !important;
    margin:0 !important;

    line-height:24px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    border-radius:50% !important;

  background:#111827 !important;
    color:#fff !important;

}

}

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

.gtrip-hero-booking{

    background:#fff;

    border:none;

    border-radius:28px;

    padding:24px;

    min-height:auto;

    height:auto;

    box-shadow:

    0 10px 40px rgba(15,23,42,.08);

}

/* ---------- SERVICE TAB ---------- */

.gtrip-service-header .service-tab{

    height:14px !important;

    padding:0 12px !important;

    font-size:11px !important;

    border-radius:10px !important;

}

/* ---------- IMAGE ---------- */

.gtrip-hero-image img{

    height:260px;

    border-radius:28px;

    object-fit:cover;

}

/* ---------- SECTION ---------- */

.gtrip-home-benefits,
.gtrip-popular-airports,
.gtrip-vehicles,
.gtrip-reviews,
.gtrip-why,
.gtrip-steps,
.gtrip-home-faq,
.gtrip-cta{

    padding-top:70px;

    padding-bottom:70px;

}

/* ---------- TITLE ---------- */

.gtrip-section-title h2,
.gtrip-section-head h2{

    font-size:30px;

    line-height:1.1;

}

.gtrip-section-title p,
.gtrip-section-head p{

    font-size:17px;

    line-height:1.7;

}

}

/* =========================================
   HIDE HERO IMAGE (MOBILE / IPAD)
========================================= */

@media (max-width:1024px){

.gtrip-hero-image{
    display:none !important;
}

.gtrip-hero-image img{
    display:none !important;
}

}

/* =========================================
   ROUND 2
   APP STYLE BOOKING CARD
========================================= */

@media (max-width:1024px){

/* booking card */

.gtrip-hero-booking,
#gtrip-home-booking{

    background:#fff !important;

    border-radius:24px !important;

    padding:22px !important;

    box-shadow:
    0 12px 30px rgba(15,23,42,.08) !important;

    margin-top:-6px;
}

/* input */

#gtrip-home-booking input,
#gtrip-home-booking select{

    height:58px !important;

    border-radius:16px !important;

    font-size:16px !important;

    padding:0 18px !important;

    border:1px solid #E5E7EB !important;

    background:#fff !important;
}

/* label */

#gtrip-home-booking label{

    font-size:14px;

    font-weight:700;

    color:#0F172A;

    margin-bottom:8px;
}

/* field */

#gtrip-home-booking .gtrip-field{

    margin-bottom:18px !important;
}

/* passengers */

#gtrip-home-booking .pax-row{

    padding:8px 0;

    margin-bottom:8px;
}


/* CTA */

#btn-continue-payment{

    height:58px !important;

    border-radius:16px !important;

    font-size:18px !important;

    font-weight:700 !important;

    margin-top:12px;
}

}

/* =========================================
   ROUND 3
   APP STYLE CONTENT
========================================= */

@media (max-width:1024px){

/* ===========================
SECTION
=========================== */

.gtrip-home-benefits,
.gtrip-popular-airports,
.gtrip-vehicles,
.gtrip-reviews,
.gtrip-why,
.gtrip-steps,
.gtrip-home-faq,
.gtrip-cta{

    padding-top:56px !important;

    padding-bottom:56px !important;
}

/* ===========================
HEADINGS
=========================== */

.gtrip-section-title,
.gtrip-section-head{

    margin-bottom:28px !important;

    text-align:left !important;
}

.gtrip-section-title h2,
.gtrip-section-head h2{

    font-size:28px !important;

    line-height:1.15 !important;

    letter-spacing:-.8px;

    margin-bottom:10px !important;
}

.gtrip-section-title p,
.gtrip-section-head p{

    font-size:16px !important;

    line-height:1.65 !important;

    color:#64748B !important;

    max-width:100% !important;
}

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

.gtrip-home-benefits .gtrip-benefits-grid{

    display:grid !important;

    grid-template-columns:repeat(2,1fr) !important;

    gap:12px !important;

}

.gtrip-home-benefits .gtrip-benefit-item{

    border-radius:18px !important;

    padding:14px !important;

}

.gtrip-benefit-title{

    font-size:28px !important;

    margin-bottom:6px !important;

}

.gtrip-benefit-text{

    font-size:12px !important;

    line-height:1.45 !important;

}

/* ===========================
POPULAR AIRPORTS
=========================== */

.gtrip-popular-airports .swiper{

    overflow:visible !important;
}

.gtrip-popular-airports .swiper-slide{

    width:86% !important;
}

.gtrip-popular-airports .airport-card{

    border-radius:22px !important;

    overflow:hidden;

    box-shadow:
    0 10px 28px rgba(15,23,42,.08);
}



/* ===========================
REMOVE BIG EMPTY SPACE
=========================== */

.gtrip-home-benefits .container,
.gtrip-popular-airports .container,
.gtrip-vehicles .container{

    padding-left:20px !important;

    padding-right:20px !important;
}




.gtrip-vehicle-card{
    width:280px;
}

.gtrip-vehicle-content{

    display:block !important;

    flex:none !important;

    height:auto !important;

}

.gtrip-vehicle-header{

    display:block !important;

}

}

/* =========================================
   ROUND 4
   APP UI FINISH
========================================= */

@media (max-width:1024px){

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

.gtrip-home-reviews .swiper{
    overflow:visible !important;
}

.gtrip-home-reviews .swiper-slide{
    width:82% !important;
}

.gtrip-home-reviews .gtrip-review-card{
    
    min-height:auto;
    height:auto;

    background:#fff;

    border-radius:16px;

    border:none;

    box-shadow:0 6px 18px rgba(15,23,42,.06);

    padding:12px;

}

/* Customer */

.gtrip-review-card h4{

    font-size:15px;

    line-height:1.2;

}

.gtrip-review-date{

    font-size:11px;

}

/* Facebook / Website Badge */

.badge{

    font-size:10px;

    padding:3px 8px;

}

/* Rating */

.gtrip-review-rating{

    font-size:13px;

    margin:10px 0;

}

/* Review */

.gtrip-home-reviews .gtrip-review-text{
    

    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;

    overflow:hidden;

    max-height:4.5em; /* 3 บรรทัด (line-height 1.5) */

    font-size:12px;

    line-height:1.55;

}

/* Reply */

.gtrip-home-reviews .gtrip-review-reply{

    margin-top:12px;

    padding:10px;

}

.gtrip-review-reply-title{

    font-size:12px;

}

.gtrip-review-reply-text{
    
    display:-webkit-box;

    -webkit-box-orient:vertical;

    -webkit-line-clamp:1;

    overflow:hidden;

    text-overflow:ellipsis;

    font-size:11px;

    line-height:1.5;

}

.gtrip-review-summary-home{

    gap:18px;

}

.summary-item strong{

    font-size:18px;

}

.summary-item span{

    font-size:11px;

}

.gtrip-review-summary-meta{

    font-size:11px;

}


    .gtrip-home-reviews .swiper-pagination{

        display:none !important;

    }



/* ==========================
WHY GTRIP - MOBILE
========================== */



.gtrip-why-grid{

    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px;

}

.gtrip-why-card{
    border-radius:18px;
    min-height:96px;
    padding:14px;
}

.gtrip-why-card h3{
    font-size:15px;
    line-height:1.25;
    margin-bottom:6px;
}

.gtrip-why-card p{
    font-size:11px;
    line-height:1.4;

    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
}


/* ==========================
HOW IT WORKS MOBILE
========================== */

.gtrip-steps-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:10px;

}

.gtrip-step-card{

    min-height:120px;

    padding:14px;

    border-radius:18px;

}

.gtrip-step-number{

    width:32px;
    height:32px;

    font-size:13px;

    margin-bottom:8px;

}

.gtrip-step-card h3{

    font-size:14px;

    line-height:1.25;

    margin-bottom:6px;

}

.gtrip-step-card p{

    font-size:11px;

    line-height:1.35;

    display:-webkit-box;
    -webkit-line-clamp:5;
    -webkit-box-orient:vertical;
    overflow:hidden;

}



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

.gtrip-home-faq .gtrip-faq-preview{

    display:flex;
    flex-direction:column;
    gap:8px;

}

.gtrip-home-faq .gtrip-faq-item{

    border-radius:14px;

    margin:0;

    overflow:hidden;

    border:1px solid #edf2f7;

    box-shadow:none;

}

.gtrip-home-faq .gtrip-faq-question{

    padding:10px 14px;

    min-height:42px;

    font-size:12px;

    line-height:1.35;

    font-weight:600;

}

.gtrip-home-faq .gtrip-faq-question span:first-child{

    flex:1;

    text-align:left;

}

.gtrip-home-faq .gtrip-faq-question span:last-child{

    font-size:16px;

    font-weight:600;

}

.gtrip-home-faq .gtrip-faq-answer{

    padding:0 16px 16px;

    font-size:13px;

    line-height:1.6;

}

.gtrip-faq-more{

    margin-top:20px;

}

.gtrip-faq-more .gtrip-btn-outline{

    width:100%;

    justify-content:center;

    height:42px;

}





/* ==========================
GLOBAL APP SPACING
========================== */

section{

    scroll-margin-top:90px;

}

.swiper{

    padding-bottom:12px;

}

.swiper-button-next,
.swiper-button-prev{

    display:none !important;

}

}

/* =========================================
   ROUND 5
   MOBILE APP POLISH
========================================= */

@media (max-width:1024px){

/* ===================================
APP BACKGROUND
=================================== */

body.page-id-117{

    background:#F4F7FB !important;

}

section{

    position:relative;

    z-index:1;

}

.gtrip-home-benefits,
.gtrip-popular-airports,
.gtrip-vehicles,
.gtrip-reviews,
.gtrip-why,
.gtrip-steps,
.gtrip-home-faq{

    background:transparent !important;

}



/* ===================================
BOOKING FLOAT
=================================== */

.gtrip-hero-booking,
#gtrip-home-booking{

    position:relative;

    z-index:20;

    margin-top:16px !important;

    border-radius:26px !important;

}

/* ===================================
INPUT
=================================== */

#gtrip-home-booking input,
#gtrip-home-booking select{

    transition:.25s;

}

#gtrip-home-booking input:focus,
#gtrip-home-booking select:focus{

    transform:scale(1.01);

}

/* ===================================
BUTTON
=================================== */

#btn-continue-payment{

    position:relative;

    overflow:hidden;

}

#btn-continue-payment:active{

    transform:scale(.98);

}

/* ===================================
CARDS
=================================== */

.gtrip-home-benefits .benefit-card,
.gtrip-review-card,
.gtrip-vehicle-card,
.airport-card,
.gtrip-step,
.gtrip-why .why-card{

    transition:.25s;

}

.gtrip-home-benefits .benefit-card:active,
.gtrip-review-card:active,
.gtrip-vehicle-card:active,
.airport-card:active{

    transform:scale(.98);

}

/* ===================================
SWIPER
=================================== */

.swiper{

    padding-left:2px;

    padding-right:2px;

}

.swiper-slide{

    transition:.25s;

}

/* ===================================
SECTION TITLE
=================================== */

.gtrip-section-title{

    margin-bottom:26px;

}

.gtrip-section-title h2{

    font-weight:700;

    color:#0F172A;

}

.gtrip-section-title p{

    color:#64748B;

}

/* ===================================
REVIEW SCORE
=================================== */

.review-summary{

    background:#fff;

    border-radius:22px;

    padding:18px;

    margin-bottom:22px;

    box-shadow:

    0 8px 24px rgba(15,23,42,.05);

}

/* ===================================
CTA
=================================== */

.gtrip-cta{

    overflow:hidden;

}

.gtrip-cta::before{

    content:"";

    position:absolute;

    inset:0;

    background:
    radial-gradient(circle at top right,
    rgba(255,255,255,.10),
    transparent 45%);

    pointer-events:none;
}

/* ===================================
FOOTER
=================================== */

footer{

    border-top:none !important;

}

footer .gtrip-container{

    padding-bottom:25px;

}

/* ===================================
SCROLL
=================================== */

html{

    scroll-behavior:smooth;

}

/* ===================================
IOS SAFE AREA
=================================== */

body{

    padding-bottom:env(safe-area-inset-bottom);

}

/* ===================================
TOUCH
=================================== */

button,
input,
select,
textarea,
a{

    -webkit-tap-highlight-color:transparent;

}

/* ===================================
REMOVE DESKTOP FEEL
=================================== */

.container,
.gtrip-container{

    max-width:100% !important;

}

}

/* =========================================
   ROUND 6
   APP EXPERIENCE
========================================= */
@media (max-width:1024px){

/* ---------- HERO ---------- */

.gtrip-hero{

    gap:18px !important;

    padding-top:12px !important;

}






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

.gtrip-hero-booking{

    border-radius:30px !important;

    padding:20px !important;

}



.gtrip-booking-page.home-mode .edit-booking-box{
    display:none !important;
}

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

#gtrip-home-booking .gtrip-field{

    margin-bottom:16px !important;

}

#gtrip-home-booking input,
#gtrip-home-booking select{

    height:60px !important;

    font-size:17px !important;

    border-radius:18px !important;

}

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

.gtrip-passengers .pax-btn{

    width:32px !important;
    height:32px !important;

    min-width:32px !important;
    min-height:32px !important;

    flex:0 0 32px !important;

    border-radius:50% !important;

    display:flex !important;
    align-items:center;
    justify-content:center;

    font-size:20px !important;

}

#gtrip-adult-count,
#gtrip-child-count{

    min-width:28px !important;

    text-align:center;

    font-size:20px !important;

    font-weight:700;

}

/* ---------- PRIMARY BUTTON ---------- */

#btn-continue-payment{

    height:60px !important;

    border-radius:18px !important;

    font-size:18px !important;

    font-weight:700 !important;

}

/* ---------- CLEAR BUTTON ---------- */

.gtrip-clear-btn{

    width:24px !important;
    height:24px !important;

    min-width:24px !important;
    min-height:24px !important;

    flex:0 0 24px !important;

 align-items:center;

    aspect-ratio:1 / 1;

}

/* ---------- SECTION ---------- */

.gtrip-home-benefits,
.gtrip-popular-airports,
.gtrip-vehicles,
.gtrip-reviews,
.gtrip-why,
.gtrip-steps,
.gtrip-home-faq{

    padding-top:48px !important;

    padding-bottom:48px !important;

}

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

.gtrip-benefit-item,
.gtrip-airport-card,
.gtrip-vehicle-card,
.gtrip-review-card,
.gtrip-step-card,
.gtrip-why-card{

    border-radius:24px !important;

}

/* ---------- SLIDER ---------- */

.gtrip-vehicle-slider .swiper-slide{
    width:auto !important;
    flex-shrink:0;
}

.gtrip-review-slider .swiper-slide{

    width:92% !important;

}

.gtrip-airport-grid{

    display:flex !important;

    overflow-x:auto;

    gap:16px;

    padding-bottom:10px;

    scroll-snap-type:x mandatory;

}

.gtrip-airport-card{

    min-width:310px;

    scroll-snap-align:start;

}

/* ---------- FAQ ---------- */

.gtrip-faq-question{

    min-height:64px;

    font-size:17px !important;

}

/* ---------- CTA ---------- */

.gtrip-cta-box{

    border-radius:28px !important;

    padding:40px 24px !important;

}

.gtrip-cta-box h2{

    font-size:32px !important;

}

.gtrip-cta-buttons{

    flex-direction:column !important;

}

.gtrip-btn-primary,
.gtrip-btn-secondary{

    width:100% !important;

}

/* ---------- REMOVE DESKTOP FEEL ---------- */

.gtrip-vehicle-nav,
.swiper-button-next,
.swiper-button-prev{

    display:none !important;

}

}

/* =========================================
   ROUND 7
   FINAL MOBILE FOUNDATION
========================================= */

@media (max-width:1024px){

/* ==========================
GLOBAL
========================== */

*{
    box-sizing:border-box;
}

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

iframe{
    max-width:100%;
}

/* ==========================
SECTION WIDTH
========================== */

section .gtrip-container,
section .container{

    width:100% !important;
    max-width:100% !important;

    padding-left:20px !important;
    padding-right:20px !important;
}

/* ==========================
TEXT
========================== */

h1,h2,h3,h4,h5,h6{

    word-break:keep-all;
    overflow-wrap:break-word;

}

p{

    max-width:100%;

}

/* ==========================
BUTTON
========================== */

button,
.button,
.wp-element-button,
input[type="submit"]{

    min-height:52px;

    cursor:pointer;

}

/* ==========================
FORM
========================== */

input,
select,
textarea{

    width:100%;

    appearance:none;
    -webkit-appearance:none;

}

/* ==========================
TABLE
========================== */

table{

    display:block;

    overflow-x:auto;

}

/* ==========================
VIDEO
========================== */

video{

    max-width:100%;

}

/* ==========================
HORIZONTAL SCROLL FIX
========================== */

body{

    overflow-x:hidden;

}

html{

    overflow-x:hidden;

}

/* ==========================
IOS
========================== */

input,
textarea,
select{

    font-size:16px;

}

/* ==========================
SAFE AREA
========================== */

body{

    padding-bottom:max(env(safe-area-inset-bottom),0px);

}

/* ==========================
ANIMATION
========================== */

button,
input,
select,
.card,
.swiper-slide{

    transition:

        background .25s,

        box-shadow .25s,

        transform .20s,

        border-color .20s;

}

/* ==========================
SCROLLBAR
========================== */

::-webkit-scrollbar{

    display:none;

}

/* Firefox */

*{

    scrollbar-width:none;

}

/* ==========================
LAST SECTION
========================== */

section:last-child{

    padding-bottom:70px;

}


#gtrip-date + label,
label[for="gtrip-date"],
label[for="gtrip-return-date"]{
    
       margin-top:10px;

    font-size:16px !important;
    font-weight:600;


}



/* Passenger */
.gtrip-field > label{
    font-size:18px;
    font-weight:700;
}

/* Adult / Child */
.gtrip-passengers .pax-row > span{
    font-size:18px !important;
    font-weight:700;
}

/* (under 7) */
.gtrip-passengers .pax-row > span small{
    font-size:13px;
    font-weight:600;
}

/* Number */
#gtrip-adult-count,
#gtrip-child-count{
    font-size:18px !important;
    font-weight:700;
    min-width:28px;
    text-align:center;


}

}

