/* =========================================================
   FLOATING TOOLS
   Trust Bank PLC
   Dynamic Floating Tools
   ========================================================= */


/* =========================================================
   ROOT
   ========================================================= */

.floating-tools-root {
    position: relative;
    z-index: 50000;
}


/* =========================================================
   FLOATING LEFT MENU
   ========================================================= */

.floating-left-menu {
    position: fixed;

    top: 50%;
    left: 0;

    transform: translateY(-50%);

    display: flex;
    flex-direction: column;

    gap: 10px;

    margin: 0;
    padding: 0;

    opacity: 1;

    z-index: 650;

    transition:
        opacity .4s ease,
        transform .4s ease;
}


/* =========================================================
   LEFT FLOATING TAB
   Screenshot-style
   ========================================================= */

.floating-left-tab {
    position: relative;

    width: 35px;

    min-width: 35px;

    padding: 14px 5px;

    margin: 0;

    border: 0;

    outline: none;

    background: var(
        --floating-tool-bg,
        #D6002A
    );

    color: var(
        --floating-tool-color,
        #ffffff
    );

    border-radius:
        0 12px 12px 0;

    cursor: pointer;

    z-index: 650;

    text-align: center;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 6px;

    text-decoration: none;

    box-shadow:
        0 3px 10px
        rgba(0, 0, 0, .10);

    appearance: none;

    -webkit-appearance: none;

    transition:
        width .25s ease,
        background-color .25s ease,
        color .25s ease;
}


/* LEFT HOVER */

.floating-left-tab:hover {

    width: 40px;

    background:
        var(
            --floating-tool-hover,
            #B80024
        );

    color:
        var(
            --floating-tool-color,
            #ffffff
        );
}


/* LEFT ICON */

.floating-left-tab i {

    display: block;

    font-size: 20px;

    line-height: 1;

    color: currentColor;

    flex-shrink: 0;
}


/* LEFT TEXT */

.floating-left-tab .tab-text {

    display: block;

    writing-mode: vertical-rl;

    transform: rotate(180deg);

    font-size: 14px;

    line-height: 1.1;

    font-weight: 600;

    white-space: nowrap;

    color: currentColor;
}


/* =========================================================
   LEFT LINK
   ========================================================= */

.floating-left-tab.floating-tool-link {

    text-decoration: none;
}


/* =========================================================
   RIGHT FLOATING MENU
   ========================================================= */

.floating-right-menu,
.floating-menu {

    position: fixed;

    top: 50%;
    right: 0;

    transform: translateY(-50%);

    display: flex;

    flex-direction: column;

    align-items: flex-end;

    gap: 10px;

    margin: 0;
    padding: 0;

    opacity: 1;

    z-index: 650;

    transition:
        opacity .4s ease,
        transform .4s ease;
}


/* =========================================================
   RIGHT TAB
   Screenshot-style
   ========================================================= */

.floating-right-menu .tab-btn,
.floating-right-menu .slim-tab,
.floating-menu .tab-btn,
.floating-menu .slim-tab {

    position: relative;

    width: 35px;

    min-width: 35px;

    padding: 14px 5px;

    margin: 0;

    background:
        var(
            --floating-tool-bg,
            #D6002A
        );

    color:
        var(
            --floating-tool-color,
            #ffffff
        );

    border: 0;

    outline: none;

    border-radius:
        12px 0 0 12px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    font-weight: 600;

    text-align: center;

    text-decoration: none;

    box-shadow:
        0 3px 10px
        rgba(0, 0, 0, .10);

    appearance: none;

    -webkit-appearance: none;

    transition:
        width .25s ease,
        background-color .25s ease,
        color .25s ease;
}


/* RIGHT HOVER */

.floating-right-menu .tab-btn:hover,
.floating-right-menu .slim-tab:hover,
.floating-menu .tab-btn:hover,
.floating-menu .slim-tab:hover {

    width: 40px;

    background:
        var(
            --floating-tool-hover,
            #B80024
        );

    color:
        var(
            --floating-tool-color,
            #ffffff
        );
}


/* RIGHT ICON */

.floating-right-menu .tab-btn i,
.floating-right-menu .slim-tab i,
.floating-menu .tab-btn i,
.floating-menu .slim-tab i {

    display: block;

    font-size: 20px;

    line-height: 1;

    color: currentColor;

    flex-shrink: 0;
}


/* RIGHT TEXT */

.floating-right-menu .tab-btn span,
.floating-right-menu .slim-tab span,
.floating-menu .tab-btn span,
.floating-menu .slim-tab span {

    display: block;

    writing-mode: vertical-rl;

    transform: rotate(180deg);

    margin-top: 6px;

    font-size: 14px;

    line-height: 1.1;

    font-weight: 600;

    white-space: nowrap;

    color: currentColor;
}


/* =========================================================
   FOCUS
   ========================================================= */

.floating-left-tab:focus,
.floating-left-tab:focus-visible,
.floating-right-menu .tab-btn:focus,
.floating-right-menu .tab-btn:focus-visible,
.floating-right-menu .slim-tab:focus,
.floating-right-menu .slim-tab:focus-visible {

    outline: none;

    box-shadow:
        0 0 0 2px
        rgba(255, 255, 255, .45),
        0 3px 10px
        rgba(0, 0, 0, .15);
}


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

.floating-left-menu.is-hidden {

    opacity: 0;

    transform:
        translateY(
            calc(-50% + 40px)
        );

    pointer-events: none;
}


.floating-right-menu.is-hidden,
.floating-menu.is-hidden {

    opacity: 0;

    transform:
        translateY(
            calc(-50% + 40px)
        );

    pointer-events: none;
}


/* =========================================================
   OVERLAY
   ========================================================= */

.panel-overlay {

    position: fixed;

    inset: 0;

    display: none;

    width: 100%;
    height: 100%;

    background:
        rgba(0, 0, 0, .50);

    z-index: 50000;
}


.panel-overlay.show {

    display: block;
}


/* =========================================================
   DISCOUNT PANEL
   ========================================================= */
/* =========================================================
   DISCOUNT PARTNERS PANEL
   KEEP EXISTING STRUCTURE
   ========================================================= */

.slide-panel {
    position: fixed;

    top: 50%;
    left: -100%;

    width: min(1200px, 95vw);

    padding: 20px;

    margin: 0;

    box-sizing: border-box;

    background: #ffffff;

    border-radius: 14px;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    z-index: 60000;

    /*
     * IMPORTANT:
     * Initial position is outside the left side.
     */
    transform: translateY(-50%);

    transition:
        left .45s cubic-bezier(.22, 1, .36, 1),
        opacity .25s ease,
        visibility 0s linear .45s;
}


/* =========================================================
   DISCOUNT PANEL OPEN
   ========================================================= */

.slide-panel.open {
    /*
     * Always center the COMPLETE panel.
     */
    left: 50% !important;

    right: auto !important;

    transform:
        translate(-50%, -50%) !important;

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transition:
        left .45s cubic-bezier(.22, 1, .36, 1),
        opacity .25s ease,
        visibility 0s linear 0s;
}


/* =========================================================
   DISCOUNT PANEL INNER
   ========================================================= */

.discount-panel-inner {
    position: relative;

    width: 100%;

    max-width: 100%;

    margin: 0;

    padding: 0;

    box-sizing: border-box;
}


/* =========================================================
   HEADER
   ========================================================= */

.discount-panel-header {
    position: relative;

    display: flex;

    align-items: center;

    justify-content: space-between;

    width: 100%;

    margin: 0 0 18px;

    padding: 0 5px;

    box-sizing: border-box;
}


.discount-panel-header h3 {
    margin: 0;

    color: #006f45;

    font-size: 23px;

    line-height: 1.2;

    font-weight: 700;
}


/* =========================================================
   SLIDER WRAPPER
   ========================================================= */

.discount-slider-wrapper {
    position: relative;

    display: block;

    width: 100%;

    max-width: 100%;

    margin: 0;

    padding:
        0 48px;

    box-sizing: border-box;

    overflow: visible;
}


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

#dealsSwiper {
    position: relative;

    display: block;

    width: 100% !important;

    max-width: 100%;

    height: auto;

    margin: 0;

    padding:
        0 0 35px;

    box-sizing: border-box;

    overflow: hidden;

    /*
     * Do NOT give Swiper any left/right positioning.
     */
    left: auto !important;

    right: auto !important;

    transform: none !important;
}

/* =========================================================
   DISCOUNT PANEL CLOSE BUTTON
   ========================================================= */

.discount-close {
    position: absolute;

    top: 0;
    right: 0;

    width: 34px;
    height: 34px;

    padding: 0;
    margin: 0;

    border: 0;

    background: transparent;

    color: #777;

    font-size: 28px;

    font-weight: 300;

    line-height: 1;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    z-index: 20;

    appearance: none;
    -webkit-appearance: none;
}

.discount-close:hover {
    color: #3a3a3a;
}

.discount-close:focus,
.discount-close:focus-visible {
    outline: none;
}


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

#dealsSwiper .swiper-wrapper {
    position: relative;

    display: flex;

    width: 100%;

    height: auto;

    align-items: stretch;

    box-sizing: border-box;

    /*
     * Swiper itself controls translate3d().
     * Do not manually transform it.
     */
}


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

#dealsSwiper .swiper-slide {
    position: relative;

    display: block;

    height: auto;

    flex-shrink: 0;

    box-sizing: border-box;

    margin: 0;
}


/* =========================================================
   DISCOUNT CARD
   ========================================================= */

.discount-offer-card {
    position: relative;

    display: block;

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

    overflow: hidden;

    border-radius: 8px;

    text-decoration: none;

    color: inherit;

    box-sizing: border-box;
}


/* =========================================================
   IMAGE BOX
   ========================================================= */

.discount-image-box {
    position: relative;

    display: block;

    width: 100%;

    aspect-ratio: 4 / 3;

    margin: 0;

    padding: 0;

    overflow: hidden;

    background: #f5f5f5;

    border-radius: 8px;

    box-sizing: border-box;
}


/* =========================================================
   PARTNER IMAGE
   ========================================================= */

.discount-company-logo-img,
.discount-partner-img {
    display: block;

    width: 100% !important;

    height: 100% !important;

    max-width: none;

    margin: 0;

    padding: 0;

    object-fit: cover;

    object-position: center;

    opacity: 1;

    visibility: visible;

    background: #f5f5f5;

    box-sizing: border-box;

    transition:
        transform .4s ease;
}


.discount-image-box:hover
.discount-company-logo-img,

.discount-image-box:hover
.discount-partner-img {
    transform: scale(1.03);
}


/* =========================================================
   CARD OVERLAY
   ========================================================= */

.discount-offer-overlay {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    background:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0) 42%,
            rgba(0, 0, 0, .72) 100%
        );

    pointer-events: none;

    z-index: 2;
}


/* =========================================================
   CARD TITLE
   ========================================================= */

.discount-offer-title {
    position: absolute;

    left: 18px;

    right: 15px;

    bottom: 18px;

    margin: 0;

    padding: 0;

    color: #ffffff;

    font-size: 18px;

    line-height: 1.2;

    font-weight: 600;

    text-shadow:
        0 2px 5px rgba(0, 0, 0, .5);

    z-index: 3;
}


/* =========================================================
   PREVIOUS / NEXT
   ========================================================= */

#dealPrev,
#dealNext {
    position: absolute;

    top: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 44px;

    height: 44px;

    padding: 0;

    margin: 0;

    border: 1px solid #dddddd;

    border-radius: 50%;

    background: #ffffff;

    color: #006f45;

    transform:
        translateY(-50%);

    z-index: 100;

    cursor: pointer;

    pointer-events: auto;

    box-shadow:
        0 3px 10px
        rgba(0, 0, 0, .12);

    transition:
        background-color .2s ease,
        color .2s ease,
        transform .2s ease;
}


/* LEFT */

#dealPrev {
    left: 0;
}


/* RIGHT */

#dealNext {
    right: 0;
}


/* =========================================================
   ARROW HOVER
   ========================================================= */

#dealPrev:hover,
#dealNext:hover {
    background: #006f45;

    color: #ffffff;

    transform:
        translateY(-50%)
        scale(1.05);
}


/* =========================================================
   ARROW ICON
   ========================================================= */

#dealPrev i,
#dealNext i {
    display: block;

    font-size: 20px;

    line-height: 1;

    pointer-events: none;
}


/* =========================================================
   DISABLED
   ========================================================= */

#dealPrev.swiper-button-disabled,
#dealNext.swiper-button-disabled {
    opacity: .35;

    cursor: default;
}


/* =========================================================
   PAGINATION
   ========================================================= */

#dealsSwiper .swiper-pagination {
    position: absolute;

    left: 0 !important;

    right: 0 !important;

    bottom: 0 !important;

    width: 100%;

    height: auto;

    margin: 0;

    padding: 0;

    text-align: center;

    transform: none !important;
    display: none !important;
}


/* =========================================================
   PAGINATION BULLET
   ========================================================= */

#dealsSwiper
.swiper-pagination-bullet {
    display: inline-block;

    width: 8px;

    height: 8px;

    margin:
        0 4px !important;

    padding: 0;

    border-radius: 50%;

    opacity: .45;

    background: #16865b;
}


#dealsSwiper
.swiper-pagination-bullet-active {
    width: 24px;

    border-radius: 10px;

    opacity: 1;

    background: #16865b;
}



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

/* =========================================================
   MOBILE
   KEEP SAME DESKTOP VERTICAL EDGE-TAB DESIGN
   ========================================================= */

/* =========================================================
   FINAL MOBILE OVERRIDE
   KEEP FLOATING TABS VERTICAL ON SCREEN EDGES
   NEVER CONVERT TO ROUND BOTTOM BUTTONS
   ========================================================= */

@media (max-width: 768px) {

    /* =====================================================
       LEFT MENU
       ===================================================== */

    .floating-left-menu {
        position: fixed !important;

        top: 68% !important;
        bottom: auto !important;
        left: 0 !important;

        transform: translateY(-50%) !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;

        gap: 10px !important;

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

        z-index: 650 !important;
    }


    /* =====================================================
       LEFT TAB
       ===================================================== */

    .floating-left-tab {
        width: 35px !important;
        min-width: 35px !important;

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

        padding: 14px 5px !important;

        border-radius: 0 12px 12px 0 !important;

        display: flex !important;
        flex-direction: column !important;

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

        gap: 6px !important;

        flex-shrink: 0 !important;
    }


    .floating-left-tab:hover {
        width: 40px !important;
    }


    .floating-left-tab .tab-text {
        display: block !important;

        writing-mode: vertical-rl !important;
        transform: rotate(180deg) !important;

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

        font-size: 14px !important;
        line-height: 1.1 !important;

        white-space: nowrap !important;
    }


    /* =====================================================
       RIGHT MENU
       ===================================================== */

    .floating-right-menu,
    .floating-menu {
        position: fixed !important;

        top: 68% !important;
        bottom: auto !important;
        right: 0 !important;

        transform: translateY(-50%) !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: flex-end !important;

        gap: 10px !important;

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

        z-index: 650 !important;
    }


    /* =====================================================
       RIGHT TAB
       ===================================================== */

    .floating-right-menu .tab-btn,
    .floating-right-menu .slim-tab,
    .floating-menu .tab-btn,
    .floating-menu .slim-tab {

        width: 35px !important;
        min-width: 35px !important;

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

        padding: 14px 5px !important;

        border-radius: 12px 0 0 12px !important;

        display: flex !important;
        flex-direction: column !important;

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

        gap: 6px !important;

        flex-shrink: 0 !important;
    }


    .floating-right-menu .tab-btn:hover,
    .floating-right-menu .slim-tab:hover,
    .floating-menu .tab-btn:hover,
    .floating-menu .slim-tab:hover {

        width: 40px !important;
    }


    .floating-right-menu .tab-btn span,
    .floating-right-menu .slim-tab span,
    .floating-menu .tab-btn span,
    .floating-menu .slim-tab span {

        display: block !important;

        writing-mode: vertical-rl !important;
        transform: rotate(180deg) !important;

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

        font-size: 14px !important;
        line-height: 1.1 !important;

        white-space: nowrap !important;
    }
}


/* =========================================================
   VERY SMALL MOBILE
   ALSO KEEP EDGE TABS
   ========================================================= */

@media (max-width: 480px) {

    .floating-left-menu {
        top: 68% !important;
        bottom: auto !important;
        left: 0 !important;

        transform: translateY(-50%) !important;
    }


    .floating-right-menu,
    .floating-menu {
        top: 68% !important;
        bottom: auto !important;
        right: 0 !important;

        transform: translateY(-50%) !important;
    }


    .floating-left-tab {
        width: 35px !important;
        min-width: 35px !important;

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

        padding: 14px 5px !important;

        border-radius: 0 12px 12px 0 !important;
    }


    .floating-right-menu .tab-btn,
    .floating-right-menu .slim-tab,
    .floating-menu .tab-btn,
    .floating-menu .slim-tab {

        width: 35px !important;
        min-width: 35px !important;

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

        padding: 14px 5px !important;

        border-radius: 12px 0 0 12px !important;
    }


    .floating-left-tab:hover,
    .floating-right-menu .tab-btn:hover,
    .floating-right-menu .slim-tab:hover,
    .floating-menu .tab-btn:hover,
    .floating-menu .slim-tab:hover {

        width: 40px !important;
    }


    .floating-left-tab .tab-text,
    .floating-right-menu .tab-btn span,
    .floating-right-menu .slim-tab span,
    .floating-menu .tab-btn span,
    .floating-menu .slim-tab span {

        display: block !important;

        writing-mode: vertical-rl !important;
        transform: rotate(180deg) !important;

        white-space: nowrap !important;
    }
}

/* =========================================================
   RATES PANEL
   ========================================================= */

.fx-yes-panel {

    position: fixed;

    top: 50%;

    right: -920px;

    width: 900px;

    max-width:
        calc(100vw - 80px);

    margin: 0;

    padding: 0;

    background: #ffffff;

    color: #000000;

    border-radius: 18px;

    box-shadow:
        0 20px 45px
        rgba(0, 0, 0, .25);

    transform:
        translateY(-50%);

    opacity: 1;

    visibility: hidden;

    pointer-events: none;

    transition:
        right .4s
        cubic-bezier(.22, 1, .36, 1),
        visibility 0s linear .4s;

    overflow: hidden;

    z-index: 99999;
}


/* =========================================================
   RATES OPEN
   ========================================================= */

.fx-yes-panel.open {

    right: 56px;

    visibility: visible;

    pointer-events: auto;

    transition:
        right .4s
        cubic-bezier(.22, 1, .36, 1),
        visibility 0s linear 0s;
}


/* =========================================================
   RATE COLUMN
   ========================================================= */

.fx-col {

    padding: 22px;

   
}


/* =========================================================
   RATE TITLE
   ========================================================= */

.fx-title {

    margin-top: 0;

    margin-bottom: 14px;

    padding: 0;

    color: #006f45;

    font-size: 17px;

    line-height: 1.3;

    font-weight: 600;

    letter-spacing: .2px;
}


/* =========================================================
   RATE DESCRIPTION
   ========================================================= */

.fx-highlight {

    margin: 0 0 12px 0;

    color: #555555;
}


.fx-highlight span {

    display: block;

    font-size: 12px;

    line-height: 1.5;

    opacity: .85;
}


/* =========================================================
   FX LIST
   ========================================================= */

.fx-list {

    margin: 14px 0;

    padding: 0;
}


/* =========================================================
   FX ROW
   ========================================================= */

.fx-row {

    display: grid;

    grid-template-columns:
        1fr 1fr 1fr;

    padding: 8px 0;

    font-size: 14px;

    line-height: 1.4;

    border-bottom:
        1px solid
        rgba(0, 0, 0, .08);
}


.fx-row span:first-child {

    font-weight: 500;
}


/* BUY */

.buy {

    color: #16865b;

    font-weight: 500;
}


/* SELL */

.sell {

    color: #c62828;

    font-weight: 500;
}


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

.fx-footer {

    padding:
        10px 20px;

    font-size: 11px;

    background: #f7f7f7;

    color: #777777;

    border-top:
        1px solid
        rgba(0, 0, 0, .06);
}


/* =========================================================
   RATES CLOSE
   ========================================================= */

.fx-yes-panel .btn-close,
.floating-panel .btn-close {

    position: absolute;

    top: 14px;

    right: 14px;

    z-index: 20;
}


/* =========================================================
   LOCATION PANEL
   ========================================================= */

.floating-panel {

    position: fixed;

    top: 50%;

    right: -360px;

    width: 320px;

    max-width:
        calc(100vw - 40px);

    padding: 20px;

    margin: 0;

    background: #ffffff;

    border-radius:
        14px 0 0 14px;

    box-shadow:
        0 20px 45px
        rgba(0, 0, 0, .18);

    transform:
        translateY(-50%);

    opacity: 1;

    visibility: hidden;

    pointer-events: none;

    transition:
        right .4s
        cubic-bezier(.22, 1, .36, 1),
        visibility 0s linear .4s;

    z-index: 60000;
}


/* =========================================================
   LOCATION OPEN
   ========================================================= */

.floating-panel.open {

    right: 56px;

    visibility: visible;

    pointer-events: auto;

    transition:
        right .4s
        cubic-bezier(.22, 1, .36, 1),
        visibility 0s linear 0s;
}


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

.floating-panel .btn-success,
.fx-yes-panel .btn-success,
.custom-floating-panel .btn-success {

    border: 0;

    background: #006f45;

    color: #ffffff;

    font-weight: 600;

    transition:
        background-color .2s ease,
        transform .2s ease;
}


.floating-panel .btn-success:hover,
.fx-yes-panel .btn-success:hover,
.custom-floating-panel .btn-success:hover {

    background: #005a39;

    color: #ffffff;

    transform: translateY(-1px);
}


/* =========================================================
   CUSTOM PANEL
   ========================================================= */

.custom-floating-panel {

    position: fixed;

    top: 50%;

    width: 360px;

    max-width:
        calc(100vw - 80px);

    padding: 25px;

    margin: 0;

    background: #ffffff;

    border-radius: 14px;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transform:
        translateY(-50%);

    z-index: 60000;

    box-shadow:
        0 20px 45px
        rgba(0, 0, 0, .18);

    transition:
        left .4s
        cubic-bezier(.22, 1, .36, 1),
        right .4s
        cubic-bezier(.22, 1, .36, 1),
        opacity .25s ease,
        visibility 0s linear .4s;
}


/* =========================================================
   CUSTOM LEFT
   ========================================================= */

.custom-panel-left {

    left: -420px;

    right: auto;
}


.custom-panel-left.open {

    left: 56px;

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transition:
        left .4s
        cubic-bezier(.22, 1, .36, 1),
        opacity .25s ease,
        visibility 0s linear 0s;
}


/* =========================================================
   CUSTOM RIGHT
   ========================================================= */

.custom-panel-right {

    right: -420px;

    left: auto;
}


.custom-panel-right.open {

    right: 56px;

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transition:
        right .4s
        cubic-bezier(.22, 1, .36, 1),
        opacity .25s ease,
        visibility 0s linear 0s;
}


/* =========================================================
   CUSTOM CONTENT
   ========================================================= */

.custom-floating-panel-content {

    position: relative;

    width: 100%;
}


.custom-floating-panel-title {

    margin:
        0 35px 15px 0;

    color: #006f45;

    font-size: 21px;

    line-height: 1.3;

    font-weight: 600;
}


.custom-floating-panel-description {

    color: #555555;

    font-size: 14px;

    line-height: 1.6;
}


.custom-floating-panel-action {

    margin-top: 20px;
}


/* =========================================================
   CUSTOM CLOSE
   ========================================================= */

.custom-floating-panel .btn-close {

    position: absolute;

    top: 14px;

    right: 14px;

    z-index: 20;
}


/* =========================================================
   OBJECT FIT
   ========================================================= */

.object-fit-cover {

    object-fit: cover;
}


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

@media (max-width: 768px) {


    /* =====================================================
       LEFT TAB
       ===================================================== */

    .floating-left-menu {

        top: auto;

        bottom: 80px;

        left: 15px;

        transform: none;

        gap: 10px;
    }


    .floating-left-tab {

        width: 60px;

        min-width: 60px;

        height: 60px;

        min-height: 60px;

        padding: 0;

        border-radius: 50%;

        flex-direction: row;

        gap: 0;
    }


    .floating-left-tab:hover {

        width: 60px;
    }


    .floating-left-tab .tab-text {

        display: none;
    }


    /* =====================================================
       RIGHT MENU
       ===================================================== */

    .floating-right-menu,
    .floating-menu {

        top: auto;

        right: 15px;

        bottom: 80px;

        transform: none;

        gap: 10px;
    }


    .floating-right-menu .tab-btn,
    .floating-right-menu .slim-tab,
    .floating-menu .tab-btn,
    .floating-menu .slim-tab {

        width: 60px;

        min-width: 60px;

        height: 60px;

        min-height: 60px;

        padding: 0;

        border-radius: 50%;

        flex-direction: row;

        gap: 0;
    }


    .floating-right-menu .tab-btn:hover,
    .floating-right-menu .slim-tab:hover,
    .floating-menu .tab-btn:hover,
    .floating-menu .slim-tab:hover {

        width: 60px;
    }


    .floating-right-menu .tab-btn span,
    .floating-right-menu .slim-tab span,
    .floating-menu .tab-btn span,
    .floating-menu .slim-tab span {

        display: none;
    }


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

    .slide-panel {

        top: auto !important;

        left: 10px !important;

        right: 10px !important;

        bottom: -100% !important;

        width: auto !important;

        max-width: none !important;

        height: auto !important;

        max-height: 90vh;

        padding: 20px;

        border-radius: 14px;

        transform: none !important;

        overflow-y: auto;

        transition:
            bottom .4s
            cubic-bezier(.22, 1, .36, 1),
            visibility 0s linear .4s;
    }


    .slide-panel.open {

        top: auto !important;

        left: 10px !important;

        right: 10px !important;

        bottom: 10px !important;

        transform: none !important;

        visibility: visible;

        pointer-events: auto;

        transition:
            bottom .4s
            cubic-bezier(.22, 1, .36, 1),
            visibility 0s linear 0s;
    }


    .discount-panel-header {

        margin-bottom: 12px;

        padding-right: 40px;
    }


    .discount-panel-header h3 {

        font-size: 20px;
    }


    .discount-slider-wrapper {

        padding:
            0 35px;
    }


    #dealsSwiper {

        display: block !important;

        width: 100% !important;

        max-width: 100% !important;

        height: auto !important;

        margin: 0 !important;

        padding: 0 0 5px !important;

        overflow: hidden !important;

        left: auto !important;

        right: auto !important;

        transform: none !important;
    }


    #dealsSwiper .swiper-wrapper {

        display: flex !important;

        width: 100% !important;

        height: auto !important;

        align-items: stretch !important;
    }


    #dealsSwiper .swiper-slide {

        display: block !important;

        width: 100% !important;

        max-width: 100% !important;

        height: auto !important;

        flex-shrink: 0 !important;

        margin: 0 !important;
    }


    .discount-offer-title {

        left: 15px;

        right: 12px;

        bottom: 15px;

        font-size: 17px;
    }


    #dealPrev {

        left: 0 !important;
    }


    #dealNext {

        right: 0 !important;
    }


    #dealPrev,
    #dealNext,
    .discount-slider-nav {

        width: 38px;

        height: 38px;
    }


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

    .fx-yes-panel {

        top: auto !important;

        right: 0 !important;

        bottom: -100% !important;

        left: 0 !important;

        width: 100% !important;

        max-width: 100%;

        max-height: 78vh;

        border-radius:
            18px 18px 0 0;

        transform: none !important;

        overflow-x: hidden;

        overflow-y: auto;

        -webkit-overflow-scrolling: touch;

        transition:
            bottom .35s ease;
    }


    .fx-yes-panel.open {

        top: auto !important;

        right: 0 !important;

        bottom: 0 !important;

        left: 0 !important;

        transform: none !important;
    }


    .fx-yes-panel .row {

        display: flex;

        flex-direction: column;

        margin: 0;
    }


    .fx-yes-panel .fx-col {

        width: 100%;

        min-height: auto;

        padding:
            20px 18px;
    }


    .fx-yes-panel .fx-col.border-end {

        border-right: 0 !important;

        border-bottom:
            1px solid #e9ecef;
    }


    .fx-yes-panel .fx-title {

        padding-right: 35px;

        margin-bottom: 10px;

        font-size: 16px;
    }


    .fx-yes-panel .fx-highlight span {

        font-size: 13px;
    }


    .fx-yes-panel .fx-list {

        margin:
            10px 0;
    }


    .fx-yes-panel .fx-row {

        grid-template-columns:
            1.2fr 1fr 1fr;

        padding:
            9px 0;

        font-size: 13px;
    }


    .fx-yes-panel .btn.btn-success {

        width: 100%;
    }


    .fx-yes-panel .fx-footer {

        padding:
            9px 18px;
    }


    .fx-yes-panel .btn-close {

        top: 14px;

        right: 14px;
    }


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

    .floating-panel {

        top: auto !important;

        right: 0 !important;

        bottom: -100% !important;

        left: 0 !important;

        width: 100% !important;

        max-width: 100%;

        max-height: 78vh;

        padding:
            20px 18px;

        border-radius:
            18px 18px 0 0;

        transform: none !important;

        overflow-x: hidden;

        overflow-y: auto;

        -webkit-overflow-scrolling: touch;

        transition:
            bottom .35s ease;
    }


    .floating-panel.open {

        top: auto !important;

        right: 0 !important;

        bottom: 0 !important;

        left: 0 !important;

        transform: none !important;
    }


    .floating-panel .fx-col {
        min-height: 0;
        height: auto;
    }


    .floating-panel .fx-title {

        padding-right: 35px;

        font-size: 16px;
    }


    .floating-panel .fx-highlight span {

        font-size: 13px;
    }


    .floating-panel .btn.btn-success {

        width: 100%;
    }


    .floating-panel .btn-close {

        top: 14px;

        right: 14px;
    }


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

    .custom-floating-panel,
    .custom-panel-left,
    .custom-panel-right {

        top: auto !important;

        right: 0 !important;

        bottom: -100% !important;

        left: 0 !important;

        width: 100% !important;

        max-width: 100%;

        max-height: 78vh;

        padding:
            20px 18px;

        border-radius:
            18px 18px 0 0;

        transform: none !important;

        overflow-x: hidden;

        overflow-y: auto;

        -webkit-overflow-scrolling: touch;

        transition:
            bottom .35s ease,
            opacity .25s ease;
    }


    .custom-floating-panel.open {

        top: auto !important;

        right: 0 !important;

        bottom: 0 !important;

        left: 0 !important;

        opacity: 1;

        transform: none !important;
    }


    .custom-floating-panel-title {

        font-size: 19px;

        padding-right: 35px;
    }


    .custom-floating-panel-description {

        font-size: 14px;
    }


    .custom-floating-panel .btn-close {

        top: 14px;

        right: 14px;
    }


    /* =====================================================
       MOBILE SCROLL HIDE
       ===================================================== */

    .floating-left-menu.is-hidden {

        opacity: 0;

        transform:
            translateY(100px);
    }


    .floating-right-menu.is-hidden,
    .floating-menu.is-hidden {

        opacity: 0;

        transform:
            translateY(100px);
    }

}


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

@media (max-width: 480px) {

    .floating-left-menu {
    position: fixed !important;
    top: auto !important;
    bottom: 24px !important;
    left: 0 !important;
    transform: none !important;
}


    .floating-right-menu,
    .floating-menu {

        top: 50% !important;

        bottom: auto !important;

        right: 0 !important;

        transform: translateY(-50%) !important;
    }



    .slide-panel {

        top: auto !important;

        left: 5px !important;

        right: 5px !important;

        bottom: -100% !important;

        width: auto !important;

        transform: none !important;

        padding:
            16px;
    }


    .slide-panel.open {

        top: auto !important;

        left: 5px !important;

        right: 5px !important;

        bottom: 5px !important;

        transform: none !important;
    }


    .discount-slider-wrapper {

        padding:
            0 30px;
    }


    .discount-offer-title {

        font-size: 16px;
    }


    #dealPrev,
    #dealNext,
    .discount-slider-nav {

        width: 34px;

        height: 34px;
    }

}