/* ==========================================
   MOBILE — HERO
   ========================================== */

@media(max-width:768px){

    .hero{
        padding:24px;
    }

    .hero h1{
        font-size:34px;
    }

    .hero p{
        font-size:16px;
        margin-bottom:28px;
    }

    .hero button{
        padding:16px 32px;
        font-size:16px;
    }

}

/* ==========================================
   MOBILE — PANEL HEADER
   (the real heading used by hotels/flights/ferries/etc,
   .widget-header h2 in travel-widget.css is a different,
   unused selector and doesn't cover this)
   ========================================== */

@media(max-width:768px){

    .partner-header{
        flex-wrap:wrap;
        gap:14px;
        margin-bottom:24px;
    }

    .widget-header-text h2{
        font-size:26px;
    }

    .widget-header-text p{
        font-size:15px;
    }

    .partner-logo{
        max-width:90px;
        max-height:28px;
    }

}

/* ==========================================
   MOBILE — WIDGET TABS
   ========================================== */

@media(max-width:480px){

    .travel-widget-tabs{
        gap:6px;
        padding:10px 12px;
    }

    .tab{
        min-height:64px;
        gap:8px;
        font-size:12px;
    }

    .tab-icon{
        width:22px;
        height:22px;
    }

}

/* ==========================================
   MOBILE — FORM FIELDS
   ========================================== */

@media(max-width:768px){

    .travel-field input,
    .travel-field select{
        height:52px;
        font-size:15px;
    }

    .travel-search-btn{
        height:56px;
        font-size:17px;
    }

    .esim-providers{
        gap:10px;
    }

    .provider-card{
        padding:12px;
    }

}

/* ==========================================
   MOBILE — SAFE-AREA BOTTOM BUFFER
   (όταν το widget είναι embedded σε σελίδα με fixed
   bottom nav bar, δίνει χώρο ώστε το κουμπί αναζήτησης
   να μην κρύβεται ποτέ πίσω από αυτήν)
   ========================================== */

@media(max-width:768px){

    body{
        padding-bottom:90px;
    }

}

/* ==========================================
   MOBILE — AUTOCOMPLETE
   ========================================== */

@media(max-width:768px){

    .autocomplete-results{
        max-height:220px;
    }

    .autocomplete-item{
        padding:12px 16px;
    }

    .autocomplete-item .autocomplete-title{
        font-size:15px;
    }

}