/* ============================================================
   GO ZANZIBAR TOURS AND SAFARI
   PREMIUM MULTI-TAB HOME SEARCH
============================================================ */

:root{
    --gzs-green:#043f39;
    --gzs-green-dark:#02332f;
    --gzs-green-light:#075d54;

    --gzs-red:#e51f2b;
    --gzs-red-dark:#c91823;

    --gzs-gold:#f5b927;
    --gzs-gold-hover:#ffc73c;

    --gzs-white:#ffffff;
    --gzs-text:#073f39;
    --gzs-muted:#687975;
    --gzs-line:#dbe5e2;
}


/* ============================================================
   SEARCH WRAPPER
============================================================ */

.zp-search-box{
    width:100% !important;
    max-width:1180px !important;

    padding:
        18px
        20px
        22px !important;

    margin:0 !important;

    background:
        linear-gradient(
            145deg,
            rgba(3,63,57,.97),
            rgba(2,51,47,.97)
        ) !important;

    border:
        1px solid
        rgba(255,255,255,.13) !important;

    border-radius:16px !important;

    box-shadow:
        0 18px 48px
        rgba(0,0,0,.20) !important;

    backdrop-filter:blur(9px);

    overflow:visible !important;
}


/* ============================================================
   TABS
============================================================ */

.zp-search-tabs{
    width:100% !important;

    display:flex !important;
    align-items:center !important;
    flex-wrap:wrap !important;

    gap:8px !important;

    margin:
        0
        0
        18px !important;

    padding:0 !important;
}


.zp-search-tab{
    min-width:145px !important;
    min-height:48px !important;

    padding:
        0
        19px !important;

    border:
        1px solid
        rgba(255,255,255,.35) !important;

    border-radius:8px !important;

    background:
        rgba(255,255,255,.055) !important;

    display:inline-flex !important;

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

    gap:10px !important;

    color:#ffffff !important;

    font-family:inherit !important;

    font-size:13px !important;
    font-weight:700 !important;

    cursor:pointer !important;

    opacity:.94 !important;

    transition:
        background .2s ease,
        border-color .2s ease,
        transform .2s ease,
        box-shadow .2s ease !important;
}


.zp-search-tab i{
    color:#ffffff !important;
    font-size:14px !important;
}


.zp-search-tab:hover{
    color:#ffffff !important;

    background:
        rgba(255,255,255,.12) !important;

    border-color:
        rgba(255,255,255,.55) !important;
}


/* ACTIVE TAB */

.zp-search-tab.active{
    background:var(--gzs-red) !important;

    border-color:var(--gzs-red) !important;

    color:#ffffff !important;

    opacity:1 !important;

    box-shadow:
        0 7px 18px
        rgba(229,31,43,.26) !important;

    transform:translateY(-1px);
}


.zp-search-tab.active i{
    color:#ffffff !important;
}


/* ============================================================
   IMPORTANT:
   ONLY ACTIVE FORM MUST SHOW
============================================================ */

.zp-search-box .zp-search-form{
    display:none !important;
}


.zp-search-box .zp-search-form[hidden]{
    display:none !important;
}


.zp-search-box .zp-search-form.active{
    display:grid !important;
}


/* Fix previous forced Transfer display */

.zp-search-box .zp-transfer-search-form{
    display:none !important;
}


.zp-search-box .zp-transfer-search-form.active{
    display:grid !important;
}


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

.zp-search-box
#transferSearchForm.active{

    grid-template-columns:
        minmax(165px,1.45fr)
        minmax(165px,1.45fr)
        minmax(125px,.92fr)
        minmax(120px,.9fr)
        minmax(110px,.78fr)
        minmax(100px,.70fr)
        minmax(118px,.72fr) !important;

    gap:12px !important;

    align-items:end !important;
}


.zp-search-box
.zp-transfer-field{

    min-width:0 !important;

    display:flex !important;

    flex-direction:column !important;

    gap:7px !important;

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

    border:0 !important;

    background:transparent !important;
}


/* LABEL */

.zp-search-box
.zp-transfer-field > label{

    display:block !important;

    margin:0 !important;
    padding:0 4px !important;

    color:#ffffff !important;

    font-size:11px !important;
    line-height:1.2 !important;

    font-weight:700 !important;
}


/* TRANSFER CONTROL */

.zp-search-box
.zp-transfer-control{

    position:relative !important;

    width:100% !important;

    height:54px !important;

    min-width:0 !important;

    display:flex !important;

    align-items:center !important;

    overflow:hidden !important;

    background:#ffffff !important;

    border:
        1px solid
        var(--gzs-line) !important;

    border-radius:9px !important;

    transition:
        border-color .2s ease,
        box-shadow .2s ease !important;
}


.zp-search-box
.zp-transfer-control:focus-within{

    border-color:
        var(--gzs-gold) !important;

    box-shadow:
        0 0 0 3px
        rgba(245,185,39,.13) !important;
}


/* ICON */

.zp-search-box
.zp-transfer-control > i{

    width:42px !important;

    flex:
        0
        0
        42px !important;

    display:flex !important;

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

    color:
        var(--gzs-green-light) !important;

    font-size:14px !important;

    pointer-events:none !important;
}


/* INPUT + SELECT */

.zp-search-box
.zp-transfer-control input,

.zp-search-box
.zp-transfer-control select{

    width:100% !important;

    height:100% !important;

    min-width:0 !important;

    margin:0 !important;

    padding:
        0
        12px
        0
        0 !important;

    border:0 !important;

    outline:0 !important;

    background:#ffffff !important;

    color:
        var(--gzs-text) !important;

    font-family:inherit !important;

    font-size:12px !important;

    font-weight:600 !important;
}


.zp-search-box
.zp-transfer-control input::placeholder{

    color:
        var(--gzs-muted) !important;

    opacity:1 !important;
}


.zp-search-box
.zp-transfer-control select option{

    background:#ffffff !important;

    color:
        var(--gzs-text) !important;
}


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

.zp-search-box
#tourSearchForm.active{

    grid-template-columns:
        minmax(210px,1.35fr)
        minmax(220px,1.35fr)
        minmax(175px,.85fr)
        minmax(135px,.7fr) !important;

    gap:14px !important;

    align-items:end !important;
}


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

.zp-search-box
#safariSearchForm.active{

    grid-template-columns:
        minmax(245px,1.4fr)
        minmax(210px,1fr)
        minmax(190px,.9fr)
        minmax(145px,.7fr) !important;

    gap:14px !important;

    align-items:end !important;
}


/* ============================================================
   TOUR + SAFARI WHITE FIELDS
============================================================ */

.zp-search-box
#tourSearchForm
.zp-search-field,

.zp-search-box
#safariSearchForm
.zp-search-field{

    position:relative !important;

    width:100% !important;

    min-width:0 !important;

    height:54px !important;

    display:flex !important;

    align-items:center !important;

    gap:10px !important;

    margin:0 !important;

    padding:
        0
        16px !important;

    overflow:hidden !important;

    background:#ffffff !important;

    border:
        1px solid
        var(--gzs-line) !important;

    border-radius:9px !important;

    transition:
        border-color .2s ease,
        box-shadow .2s ease !important;
}


.zp-search-box
#tourSearchForm
.zp-search-field:focus-within,

.zp-search-box
#safariSearchForm
.zp-search-field:focus-within{

    border-color:
        var(--gzs-gold) !important;

    box-shadow:
        0 0 0 3px
        rgba(245,185,39,.13) !important;
}


/* ICON */

.zp-search-box
#tourSearchForm
.zp-search-field > i,

.zp-search-box
#safariSearchForm
.zp-search-field > i{

    flex:0 0 auto !important;

    color:
        var(--gzs-green-light) !important;

    font-size:14px !important;
}


/* INPUT + SELECT */

.zp-search-box
#tourSearchForm input,

.zp-search-box
#tourSearchForm select,

.zp-search-box
#safariSearchForm input,

.zp-search-box
#safariSearchForm select{

    width:100% !important;

    min-width:0 !important;

    height:100% !important;

    padding:0 !important;

    margin:0 !important;

    border:0 !important;

    outline:0 !important;

    background:#ffffff !important;

    color:
        var(--gzs-text) !important;

    font-family:inherit !important;

    font-size:12px !important;

    font-weight:600 !important;
}


.zp-search-box
#tourSearchForm input::placeholder,

.zp-search-box
#safariSearchForm input::placeholder{

    color:
        var(--gzs-muted) !important;

    opacity:1 !important;
}


.zp-search-box
#tourSearchForm select option,

.zp-search-box
#safariSearchForm select option{

    background:#ffffff !important;

    color:
        var(--gzs-text) !important;
}


/* ============================================================
   GOLD SEARCH BUTTON
============================================================ */

.zp-search-box
.zp-search-submit,

.zp-search-box
.zp-transfer-search-submit{

    width:100% !important;

    min-width:120px !important;

    height:54px !important;

    margin:0 !important;

    padding:
        0
        22px !important;

    border:0 !important;

    border-radius:9px !important;

    display:flex !important;

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

    gap:8px !important;

    background:
        linear-gradient(
            135deg,
            #f5b927,
            #ffc332
        ) !important;

    color:#102f2b !important;

    font-family:inherit !important;

    font-size:12px !important;

    font-weight:900 !important;

    cursor:pointer !important;

    box-shadow:
        0 8px 20px
        rgba(245,185,39,.18) !important;

    transition:
        background .2s ease,
        transform .2s ease,
        box-shadow .2s ease !important;
}


.zp-search-box
.zp-search-submit:hover,

.zp-search-box
.zp-transfer-search-submit:hover{

    background:
        var(--gzs-gold-hover) !important;

    color:#102f2b !important;

    transform:
        translateY(-1px) !important;

    box-shadow:
        0 10px 24px
        rgba(245,185,39,.25) !important;
}


/* ============================================================
   ADD LABELS TO TOUR + SAFARI
============================================================ */

#tourSearchForm .zp-search-field,
#safariSearchForm .zp-search-field{
    overflow:visible !important;
}


#tourSearchForm.active,
#safariSearchForm.active{
    padding-top:23px !important;
}


/* SAFARI */

#safariSearchForm
.zp-search-field:nth-child(1)::before{

    content:"Safari destination";
}


#safariSearchForm
.zp-search-field:nth-child(2)::before{

    content:"Any Duration";
}


#safariSearchForm
.zp-search-field:nth-child(3)::before{

    content:"Guests";
}


/* TOUR */

#tourSearchForm
.zp-search-field:nth-child(1)::before{

    content:"Destination";
}


#tourSearchForm
.zp-search-field:nth-child(2)::before{

    content:"Tour / Activity";
}


#tourSearchForm
.zp-search-field:nth-child(3)::before{

    content:"Guests";
}


/* LABEL STYLE */

#tourSearchForm
.zp-search-field::before,

#safariSearchForm
.zp-search-field::before{

    position:absolute !important;

    top:-22px !important;
    left:4px !important;

    color:#ffffff !important;

    font-size:11px !important;

    line-height:1 !important;

    font-weight:700 !important;

    white-space:nowrap !important;
}


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

@media(max-width:1100px){

    .zp-search-box
    #transferSearchForm.active{

        grid-template-columns:
            repeat(
                3,
                minmax(0,1fr)
            ) !important;
    }


    .zp-search-box
    #tourSearchForm.active,

    .zp-search-box
    #safariSearchForm.active{

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

        row-gap:36px !important;
    }


    .zp-search-box
    .zp-search-submit{

        width:100% !important;
    }

}


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

@media(max-width:700px){

    .zp-search-box{

        width:
            calc(100% - 20px) !important;

        max-width:none !important;

        margin:
            0
            10px !important;

        padding:
            13px !important;

        border-radius:13px !important;
    }


    /* -----------------------------------------
       TABS
    ------------------------------------------ */

    .zp-search-tabs{

        display:grid !important;

        grid-template-columns:
            repeat(
                3,
                minmax(0,1fr)
            ) !important;

        gap:5px !important;

        margin-bottom:16px !important;
    }


    .zp-search-tab{

        min-width:0 !important;

        width:100% !important;

        min-height:40px !important;

        padding:
            0
            7px !important;

        gap:5px !important;

        border-radius:6px !important;

        font-size:9.5px !important;

        white-space:nowrap !important;
    }


    .zp-search-tab i{

        font-size:10px !important;
    }


    /* -----------------------------------------
       ALL FORMS ONE COLUMN
    ------------------------------------------ */

    .zp-search-box
    .zp-search-form.active,

    .zp-search-box
    #transferSearchForm.active,

    .zp-search-box
    #tourSearchForm.active,

    .zp-search-box
    #safariSearchForm.active{

        display:grid !important;

        grid-template-columns:
            minmax(0,1fr) !important;

        width:100% !important;

        gap:12px !important;

        padding-top:0 !important;
    }


    /* -----------------------------------------
       TOUR + SAFARI MOBILE LABELS
    ------------------------------------------ */

    #tourSearchForm
    .zp-search-field,

    #safariSearchForm
    .zp-search-field{

        margin-top:20px !important;
    }


    #tourSearchForm
    .zp-search-field::before,

    #safariSearchForm
    .zp-search-field::before{

        top:-18px !important;

        left:2px !important;

        font-size:10px !important;
    }


    /* -----------------------------------------
       TRANSFER
    ------------------------------------------ */

    .zp-search-box
    .zp-transfer-field{

        width:100% !important;

        min-width:0 !important;

        gap:5px !important;
    }


    .zp-search-box
    .zp-transfer-control{

        width:100% !important;

        height:50px !important;
    }


    .zp-search-box
    .zp-transfer-field > label{

        font-size:10px !important;

        padding-left:2px !important;
    }


    /* -----------------------------------------
       TOUR / SAFARI CONTROL
    ------------------------------------------ */

    .zp-search-box
    #tourSearchForm
    .zp-search-field,

    .zp-search-box
    #safariSearchForm
    .zp-search-field{

        width:100% !important;

        height:50px !important;
    }


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

    .zp-search-box
    .zp-search-submit,

    .zp-search-box
    .zp-transfer-search-submit{

        width:100% !important;

        height:50px !important;

        margin-top:2px !important;
    }

}


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

@media(max-width:390px){

    .zp-search-tabs{
        grid-template-columns:1fr !important;
    }


    .zp-search-tab{

        justify-content:flex-start !important;

        min-height:39px !important;

        padding:
            0
            14px !important;

        font-size:10px !important;
    }

}

/* ============================================================
   GO ZANZIBAR
   MOBILE HERO + SEARCH FINAL FIX
============================================================ */

@media(max-width:700px){

    /*
    |--------------------------------------------------------------------------
    | HERO MUST GROW WITH SEARCH FORM
    |--------------------------------------------------------------------------
    */

    .zp-home-hero{
        position:relative !important;

        width:100% !important;

        height:auto !important;
        min-height:0 !important;
        max-height:none !important;

        padding:0 !important;

        overflow:visible !important;

        background:#043f39 !important;
    }


    /*
    |--------------------------------------------------------------------------
    | BACKGROUND SLIDES STAY BEHIND CONTENT
    |--------------------------------------------------------------------------
    */

    .zp-hero-slides{
        position:absolute !important;

        inset:0 !important;

        width:100% !important;
        height:100% !important;

        min-height:100% !important;

        overflow:hidden !important;

        z-index:0 !important;
    }


    .zp-hero-slide{
        position:absolute !important;

        inset:0 !important;

        width:100% !important;
        height:100% !important;
    }


    .zp-hero-slide img{
        width:100% !important;
        height:100% !important;

        object-fit:cover !important;
        object-position:center !important;
    }


    .zp-hero-overlay{
        position:absolute !important;

        inset:0 !important;

        width:100% !important;
        height:100% !important;

        z-index:1 !important;
    }


    /*
    |--------------------------------------------------------------------------
    | CONTENT WRAPPER
    |--------------------------------------------------------------------------
    */

    .zp-hero-content-wrap{
        position:relative !important;

        top:auto !important;
        right:auto !important;
        bottom:auto !important;
        left:auto !important;

        transform:none !important;

        width:100% !important;

        min-height:0 !important;
        height:auto !important;

        padding:
            105px
            14px
            28px !important;

        z-index:5 !important;

        overflow:visible !important;
    }


    /*
    |--------------------------------------------------------------------------
    | HERO TEXT
    |--------------------------------------------------------------------------
    */

    .zp-hero-content{
        position:relative !important;

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

        margin:0 auto 24px !important;

        padding:
            0
            4px !important;

        text-align:center !important;

        z-index:6 !important;
    }


    .zp-hero-content h1{
        margin:
            7px
            auto
            8px !important;

        font-size:29px !important;

        line-height:1.08 !important;

        color:#ffffff !important;
    }


    .zp-hero-subtitle{
        color:#ffffff !important;

        font-size:10px !important;

        font-weight:700 !important;
    }


    .zp-hero-content p{
        max-width:310px !important;

        margin:
            0
            auto
            17px !important;

        color:#ffffff !important;

        font-size:9px !important;

        line-height:1.65 !important;
    }


    /*
    |--------------------------------------------------------------------------
    | SEARCH BOX
    |--------------------------------------------------------------------------
    */

    .zp-search-box{
        position:relative !important;

        top:auto !important;
        right:auto !important;
        bottom:auto !important;
        left:auto !important;

        transform:none !important;

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

        height:auto !important;
        min-height:0 !important;
        max-height:none !important;

        margin:0 auto !important;

        padding:
            12px
            10px
            14px !important;

        overflow:visible !important;

        background:
            linear-gradient(
                145deg,
                rgba(3,63,57,.98),
                rgba(2,51,47,.98)
            ) !important;

        border:
            1px solid
            rgba(255,255,255,.17) !important;

        border-radius:13px !important;

        box-shadow:
            0 16px 35px
            rgba(0,0,0,.22) !important;

        z-index:20 !important;
    }


    /*
    |--------------------------------------------------------------------------
    | TABS
    |--------------------------------------------------------------------------
    */

    .zp-search-tabs{
        display:grid !important;

        grid-template-columns:
            repeat(
                3,
                minmax(0,1fr)
            ) !important;

        width:100% !important;

        gap:5px !important;

        margin:
            0
            0
            15px !important;

        padding:0 !important;
    }


    .zp-search-tab{
        width:100% !important;

        min-width:0 !important;
        min-height:39px !important;

        padding:
            0
            5px !important;

        display:flex !important;

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

        gap:5px !important;

        background:
            rgba(255,255,255,.045) !important;

        border:
            1px solid
            rgba(255,255,255,.30) !important;

        border-radius:6px !important;

        color:#ffffff !important;

        -webkit-text-fill-color:#ffffff !important;

        opacity:1 !important;

        font-size:9px !important;
        font-weight:700 !important;

        text-shadow:none !important;
    }


    .zp-search-tab i{
        color:#ffffff !important;

        -webkit-text-fill-color:#ffffff !important;

        font-size:10px !important;
    }


    .zp-search-tab.active{
        background:#e51f2b !important;

        border-color:#e51f2b !important;

        color:#ffffff !important;

        -webkit-text-fill-color:#ffffff !important;

        box-shadow:
            0 6px 15px
            rgba(229,31,43,.28) !important;
    }


    .zp-search-tab.active i{
        color:#ffffff !important;

        -webkit-text-fill-color:#ffffff !important;
    }


    /*
    |--------------------------------------------------------------------------
    | ONLY ACTIVE FORM
    |--------------------------------------------------------------------------
    */

    .zp-search-box .zp-search-form{
        display:none !important;
    }


    .zp-search-box .zp-search-form[hidden]{
        display:none !important;
    }


    .zp-search-box .zp-search-form.active{
        display:grid !important;
    }


    /*
    |--------------------------------------------------------------------------
    | ALL MOBILE FORMS
    |--------------------------------------------------------------------------
    */

    .zp-search-box
    #transferSearchForm.active,

    .zp-search-box
    #tourSearchForm.active,

    .zp-search-box
    #safariSearchForm.active{

        grid-template-columns:1fr !important;

        width:100% !important;

        height:auto !important;
        min-height:0 !important;
        max-height:none !important;

        gap:11px !important;

        padding:0 !important;

        margin:0 !important;

        overflow:visible !important;
    }


    /*
    |--------------------------------------------------------------------------
    | TRANSFER FIELD
    |--------------------------------------------------------------------------
    */

    .zp-search-box .zp-transfer-field{
        display:flex !important;

        flex-direction:column !important;

        width:100% !important;

        min-width:0 !important;

        height:auto !important;

        gap:5px !important;

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

        overflow:visible !important;

        background:transparent !important;
    }


    .zp-search-box
    .zp-transfer-field > label{

        display:block !important;

        width:100% !important;

        margin:0 !important;

        padding:
            0
            4px !important;

        color:#ffffff !important;

        -webkit-text-fill-color:#ffffff !important;

        font-size:9px !important;

        line-height:1.3 !important;

        text-align:center !important;

        font-weight:700 !important;
    }


    /*
    |--------------------------------------------------------------------------
    | TRANSFER CONTROL
    |--------------------------------------------------------------------------
    */

    .zp-search-box
    .zp-transfer-control{

        display:flex !important;

        width:100% !important;

        min-width:0 !important;

        height:44px !important;

        border-radius:7px !important;

        background:#ffffff !important;

        border:
            1px solid
            #dce7e3 !important;

        overflow:hidden !important;
    }


    .zp-search-box
    .zp-transfer-control > i{

        flex:
            0
            0
            36px !important;

        width:36px !important;

        color:#00645b !important;

        font-size:11px !important;
    }


    .zp-search-box
    .zp-transfer-control input,

    .zp-search-box
    .zp-transfer-control select{

        width:100% !important;

        min-width:0 !important;

        height:100% !important;

        margin:0 !important;

        padding:
            0
            9px
            0
            0 !important;

        background:#ffffff !important;

        color:#043f39 !important;

        -webkit-text-fill-color:#043f39 !important;

        border:0 !important;

        font-size:10px !important;

        font-weight:600 !important;

        opacity:1 !important;
    }


    /*
    |--------------------------------------------------------------------------
    | TOUR + SAFARI FIELD
    |--------------------------------------------------------------------------
    */

    .zp-search-box
    #tourSearchForm
    .zp-search-field,

    .zp-search-box
    #safariSearchForm
    .zp-search-field{

        position:relative !important;

        display:flex !important;

        align-items:center !important;

        width:100% !important;

        min-width:0 !important;

        height:44px !important;

        margin:
            17px
            0
            0 !important;

        padding:
            0
            12px !important;

        background:#ffffff !important;

        border:
            1px solid
            #dce7e3 !important;

        border-radius:7px !important;

        overflow:visible !important;
    }


    #tourSearchForm
    .zp-search-field::before,

    #safariSearchForm
    .zp-search-field::before{

        position:absolute !important;

        top:-16px !important;
        left:3px !important;

        color:#ffffff !important;

        -webkit-text-fill-color:#ffffff !important;

        font-size:9px !important;

        font-weight:700 !important;

        line-height:1 !important;
    }


    .zp-search-box
    #tourSearchForm
    .zp-search-field > i,

    .zp-search-box
    #safariSearchForm
    .zp-search-field > i{

        color:#00645b !important;

        font-size:11px !important;
    }


    .zp-search-box
    #tourSearchForm input,

    .zp-search-box
    #tourSearchForm select,

    .zp-search-box
    #safariSearchForm input,

    .zp-search-box
    #safariSearchForm select{

        color:#043f39 !important;

        -webkit-text-fill-color:#043f39 !important;

        background:#ffffff !important;

        font-size:10px !important;

        opacity:1 !important;
    }


    /*
    |--------------------------------------------------------------------------
    | SEARCH BUTTON
    |--------------------------------------------------------------------------
    */

    .zp-search-box
    .zp-search-submit,

    .zp-search-box
    .zp-transfer-search-submit{

        display:flex !important;

        width:100% !important;

        min-width:0 !important;

        height:45px !important;

        margin:
            2px
            0
            0 !important;

        padding:0 !important;

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

        background:
            linear-gradient(
                135deg,
                #f5b927,
                #ffc332
            ) !important;

        border:0 !important;

        border-radius:7px !important;

        color:#073f39 !important;

        -webkit-text-fill-color:#073f39 !important;

        font-size:10px !important;

        font-weight:900 !important;

        box-shadow:
            0 7px 16px
            rgba(245,185,39,.20) !important;
    }


    /*
    |--------------------------------------------------------------------------
    | PREVENT NEXT SECTION FROM COVERING SEARCH
    |--------------------------------------------------------------------------
    */

    .popular-tours-section{
        position:relative !important;

        z-index:2 !important;

        margin-top:0 !important;

        clear:both !important;
    }

}


/* ============================================================
   VERY SMALL MOBILE
============================================================ */

@media(max-width:390px){

    /*
    | Keep 3 tabs on one row like the approved design.
    */

    .zp-search-tabs{
        grid-template-columns:
            repeat(
                3,
                minmax(0,1fr)
            ) !important;
    }


    .zp-search-tab{
        justify-content:center !important;

        min-height:37px !important;

        padding:
            0
            3px !important;

        font-size:8px !important;
    }


    .zp-search-tab i{
        font-size:9px !important;
    }

}


/* ============================================================
   GO ZANZIBAR
   MOBILE COMPACT SEARCH - 2 COLUMN LAYOUT
============================================================ */

@media(max-width:700px){

    /*
    |--------------------------------------------------------------------------
    | SEARCH BOX
    |--------------------------------------------------------------------------
    */

    .zp-search-box{
        padding:12px !important;
    }


    /*
    |--------------------------------------------------------------------------
    | TRANSFER FORM - TWO COLUMNS
    |--------------------------------------------------------------------------
    */

    .zp-search-box
    #transferSearchForm.active{

        display:grid !important;

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

        column-gap:9px !important;

        row-gap:10px !important;

        width:100% !important;

        align-items:end !important;
    }


    /*
    |--------------------------------------------------------------------------
    | PICKUP + DROP-OFF FULL WIDTH
    |--------------------------------------------------------------------------
    */

    #transferSearchForm
    .zp-transfer-field:nth-child(1),

    #transferSearchForm
    .zp-transfer-field:nth-child(2){

        grid-column:
            1 / -1 !important;
    }


    /*
    |--------------------------------------------------------------------------
    | DATE + TIME
    |--------------------------------------------------------------------------
    */

    #transferSearchForm
    .zp-transfer-field:nth-child(3){

        grid-column:1 !important;
    }


    #transferSearchForm
    .zp-transfer-field:nth-child(4){

        grid-column:2 !important;
    }


    /*
    |--------------------------------------------------------------------------
    | PASSENGERS + LUGGAGE
    |--------------------------------------------------------------------------
    */

    #transferSearchForm
    .zp-transfer-field:nth-child(5){

        grid-column:1 !important;
    }


    #transferSearchForm
    .zp-transfer-field:nth-child(6){

        grid-column:2 !important;
    }


    /*
    |--------------------------------------------------------------------------
    | SEARCH FULL WIDTH
    |--------------------------------------------------------------------------
    */

    #transferSearchForm
    .zp-transfer-search-submit{

        grid-column:
            1 / -1 !important;

        width:100% !important;

        height:46px !important;

        margin-top:1px !important;
    }


    /*
    |--------------------------------------------------------------------------
    | SMALLER FIELD HEIGHT
    |--------------------------------------------------------------------------
    */

    .zp-search-box
    .zp-transfer-control{

        height:45px !important;

        border-radius:7px !important;
    }


    .zp-search-box
    .zp-transfer-field{

        gap:4px !important;
    }


    .zp-search-box
    .zp-transfer-field > label{

        min-height:auto !important;

        padding:0 2px !important;

        font-size:8.5px !important;

        line-height:1.15 !important;

        text-align:left !important;

        white-space:nowrap !important;
    }


    /*
    |--------------------------------------------------------------------------
    | ICON
    |--------------------------------------------------------------------------
    */

    .zp-search-box
    .zp-transfer-control > i{

        width:34px !important;

        flex:
            0
            0
            34px !important;

        font-size:10px !important;
    }


    /*
    |--------------------------------------------------------------------------
    | INPUTS
    |--------------------------------------------------------------------------
    */

    .zp-search-box
    .zp-transfer-control input,

    .zp-search-box
    .zp-transfer-control select{

        padding:
            0
            6px
            0
            0 !important;

        font-size:9px !important;
    }


    /*
    |--------------------------------------------------------------------------
    | TABS MORE COMPACT
    |--------------------------------------------------------------------------
    */

    .zp-search-tabs{

        grid-template-columns:
            repeat(
                3,
                minmax(0,1fr)
            ) !important;

        gap:5px !important;

        margin-bottom:12px !important;
    }


    .zp-search-tab{

        min-height:37px !important;

        padding:
            0
            5px !important;

        font-size:8.5px !important;
    }


    /*
    |--------------------------------------------------------------------------
    | TOUR + SAFARI COMPACT TWO COLUMN
    |--------------------------------------------------------------------------
    */

    .zp-search-box
    #tourSearchForm.active,

    .zp-search-box
    #safariSearchForm.active{

        display:grid !important;

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

        column-gap:9px !important;

        row-gap:9px !important;

        width:100% !important;
    }


    /*
    |--------------------------------------------------------------------------
    | FIRST FIELD FULL WIDTH
    |--------------------------------------------------------------------------
    */

    #tourSearchForm
    .zp-search-field:nth-child(1),

    #safariSearchForm
    .zp-search-field:nth-child(1){

        grid-column:
            1 / -1 !important;
    }


    /*
    |--------------------------------------------------------------------------
    | SECOND + THIRD SIDE BY SIDE
    |--------------------------------------------------------------------------
    */

    #tourSearchForm
    .zp-search-field:nth-child(2),

    #safariSearchForm
    .zp-search-field:nth-child(2){

        grid-column:1 !important;
    }


    #tourSearchForm
    .zp-search-field:nth-child(3),

    #safariSearchForm
    .zp-search-field:nth-child(3){

        grid-column:2 !important;
    }


    /*
    |--------------------------------------------------------------------------
    | TOUR + SAFARI SEARCH BUTTON
    |--------------------------------------------------------------------------
    */

    #tourSearchForm
    .zp-search-submit,

    #safariSearchForm
    .zp-search-submit{

        grid-column:
            1 / -1 !important;

        width:100% !important;

        height:46px !important;

        margin-top:1px !important;
    }


    /*
    |--------------------------------------------------------------------------
    | SMALL TOUR / SAFARI CONTROLS
    |--------------------------------------------------------------------------
    */

    .zp-search-box
    #tourSearchForm
    .zp-search-field,

    .zp-search-box
    #safariSearchForm
    .zp-search-field{

        height:45px !important;

        margin-top:16px !important;

        padding:
            0
            10px !important;
    }


    #tourSearchForm
    .zp-search-field::before,

    #safariSearchForm
    .zp-search-field::before{

        top:-14px !important;

        left:2px !important;

        font-size:8.5px !important;
    }

}


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

@media(max-width:360px){

    /*
    | Even small phones keep Date/Time and
    | Passengers/Luggage side by side.
    */

    .zp-search-box{
        padding:10px !important;
    }


    .zp-search-box
    #transferSearchForm.active{

        column-gap:7px !important;
    }


    .zp-search-box
    .zp-transfer-control input,

    .zp-search-box
    .zp-transfer-control select{

        font-size:8px !important;
    }


    .zp-search-box
    .zp-transfer-field > label{

        font-size:8px !important;
    }

}

/* ============================================================
   GO ZANZIBAR
   TRANSFER MOBILE ONLY - COMPACT 2 COLUMN GRID
============================================================ */

@media(max-width:700px){

    /*
    |--------------------------------------------------------------------------
    | TRANSFER FORM ONLY
    |--------------------------------------------------------------------------
    */

    .zp-search-box
    #transferSearchForm.active{

        display:grid !important;

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

        column-gap:8px !important;
        row-gap:9px !important;

        width:100% !important;

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

        align-items:end !important;

        overflow:visible !important;
    }


    /*
    |--------------------------------------------------------------------------
    | PICKUP + DROP-OFF SAME ROW
    |--------------------------------------------------------------------------
    */

    #transferSearchForm
    .zp-transfer-field:nth-child(1){

        grid-column:1 !important;
    }


    #transferSearchForm
    .zp-transfer-field:nth-child(2){

        grid-column:2 !important;
    }


    /*
    |--------------------------------------------------------------------------
    | DATE + TIME
    |--------------------------------------------------------------------------
    */

    #transferSearchForm
    .zp-transfer-field:nth-child(3){

        grid-column:1 !important;
    }


    #transferSearchForm
    .zp-transfer-field:nth-child(4){

        grid-column:2 !important;
    }


    /*
    |--------------------------------------------------------------------------
    | PASSENGERS + LUGGAGE
    |--------------------------------------------------------------------------
    */

    #transferSearchForm
    .zp-transfer-field:nth-child(5){

        grid-column:1 !important;
    }


    #transferSearchForm
    .zp-transfer-field:nth-child(6){

        grid-column:2 !important;
    }


    /*
    |--------------------------------------------------------------------------
    | SEARCH BUTTON FULL WIDTH
    |--------------------------------------------------------------------------
    */

    #transferSearchForm
    .zp-transfer-search-submit{

        grid-column:
            1 / -1 !important;

        width:100% !important;

        height:45px !important;

        margin-top:1px !important;
    }


    /*
    |--------------------------------------------------------------------------
    | TRANSFER FIELD
    |--------------------------------------------------------------------------
    */

    .zp-search-box
    #transferSearchForm
    .zp-transfer-field{

        width:100% !important;

        min-width:0 !important;

        height:auto !important;

        display:flex !important;

        flex-direction:column !important;

        gap:4px !important;

        margin:0 !important;

        padding:0 !important;

        background:transparent !important;

        border:0 !important;
    }


    /*
    |--------------------------------------------------------------------------
    | LABEL
    |--------------------------------------------------------------------------
    */

    .zp-search-box
    #transferSearchForm
    .zp-transfer-field > label{

        display:block !important;

        width:100% !important;

        margin:0 !important;

        padding:
            0
            2px !important;

        color:#ffffff !important;

        -webkit-text-fill-color:#ffffff !important;

        font-size:8px !important;

        line-height:1.15 !important;

        font-weight:700 !important;

        text-align:left !important;

        white-space:nowrap !important;

        overflow:hidden !important;

        text-overflow:ellipsis !important;
    }


    /*
    |--------------------------------------------------------------------------
    | CONTROL
    |--------------------------------------------------------------------------
    */

    .zp-search-box
    #transferSearchForm
    .zp-transfer-control{

        width:100% !important;

        min-width:0 !important;

        height:43px !important;

        display:flex !important;

        align-items:center !important;

        background:#ffffff !important;

        border:
            1px solid
            #dce7e3 !important;

        border-radius:7px !important;

        overflow:hidden !important;
    }


    /*
    |--------------------------------------------------------------------------
    | ICON
    |--------------------------------------------------------------------------
    */

    .zp-search-box
    #transferSearchForm
    .zp-transfer-control > i{

        width:30px !important;

        flex:
            0
            0
            30px !important;

        display:flex !important;

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

        color:#00645b !important;

        font-size:9px !important;
    }


    /*
    |--------------------------------------------------------------------------
    | INPUT + SELECT
    |--------------------------------------------------------------------------
    */

    .zp-search-box
    #transferSearchForm
    .zp-transfer-control input,

    .zp-search-box
    #transferSearchForm
    .zp-transfer-control select{

        width:100% !important;

        min-width:0 !important;

        height:100% !important;

        padding:
            0
            5px
            0
            0 !important;

        margin:0 !important;

        border:0 !important;

        outline:0 !important;

        background:#ffffff !important;

        color:#043f39 !important;

        -webkit-text-fill-color:#043f39 !important;

        font-size:8px !important;

        font-weight:600 !important;
    }


    /*
    |--------------------------------------------------------------------------
    | DO NOT TOUCH TOUR / SAFARI
    |--------------------------------------------------------------------------
    */

    #tourSearchForm.active,
    #safariSearchForm.active{

        /* keep their existing layout */
    }

}


/* ============================================================
   VERY SMALL MOBILE
============================================================ */

@media(max-width:360px){

    .zp-search-box
    #transferSearchForm.active{

        column-gap:6px !important;

        row-gap:8px !important;
    }


    .zp-search-box
    #transferSearchForm
    .zp-transfer-control{

        height:41px !important;
    }


    .zp-search-box
    #transferSearchForm
    .zp-transfer-control input,

    .zp-search-box
    #transferSearchForm
    .zp-transfer-control select{

        font-size:7.5px !important;
    }


    .zp-search-box
    #transferSearchForm
    .zp-transfer-field > label{

        font-size:7.5px !important;
    }

}
