/* =========================================================
   FLOWERSNEXT DESTINATION HERO
   CLEAN / CONSOLIDATED CSS
   ========================================================= */

.fn-destination-hero {
    position: relative;
    width: 100%;
    min-height: 500px;
    display: flex;
    align-items: center;
    overflow: visible;
    box-sizing: border-box;
}

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

.fn-destination-bg {
    position: absolute;
    inset: 0;
    z-index: 0;

    background-image: url('/images/slider-banner-bkground-n.webp');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

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

.fn-destination-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.97) 0%,
            rgba(255,255,255,.94) 32%,
            rgba(255,255,255,.72) 55%,
            rgba(255,255,255,.25) 78%,
            rgba(255,255,255,0) 100%
        );
}

/* =========================================================
   MAIN CONTAINER
   ========================================================= */

.fn-destination-container {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 1200px;

    margin: 0 auto;
    padding: 55px 25px;

    box-sizing: border-box;
}

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

.fn-destination-content {
    width: 100%;
    max-width: 760px;
}

/* =========================================================
   HEADING
   ========================================================= */

.fn-destination-content h2 {
    margin: 0 0 12px;

    font-size: 42px;
    line-height: 1.12;
    font-weight: 700;

    color: #3C4619;
}

.fn-destination-content h2 span {
    color: #6C972D;
}

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

.fn-destination-description {
    max-width: 610px;

    margin: 0 0 24px;

    font-size: 16px;
    line-height: 1.6;

    color: #555;
}

/* =========================================================
   FINDER
   ========================================================= */

.fn-destination-finder {
    position: relative;
    z-index: 1000;

    width: 100%;
    max-width: 760px;

    display: flex;
    align-items: flex-end;

    gap: 9px;

    padding: 13px;

    background: rgba(255,248,247,.88);

    border: 1px solid rgba(60,70,25,.12);
    border-radius: 12px;

    box-shadow:
        0 8px 30px rgba(80,40,35,.09);

    box-sizing: border-box;
}

/* =========================================================
   FINDER FIELDS
   ========================================================= */

.fn-finder-field {
    position: relative;

    flex: 1;
    min-width: 0;
}

.fn-finder-field label {
    display: block;

    margin: 0 0 6px 3px;

    font-size: 11px;
    line-height: 1;

    font-weight: 700;

    color: #666;

    text-transform: uppercase;
    letter-spacing: .6px;
}

/* =========================================================
   COUNTRY / CITY PICKERS
   ========================================================= */

.fn-country-picker,
.fn-city-picker {
    position: relative;
    width: 100%;
}

#fnCountryPicker {
    z-index: 99999;
}

#fnCityPicker {
    z-index: 9999;
}

/* =========================================================
   COUNTRY / CITY BUTTONS
   ========================================================= */

.fn-country-button,
.fn-city-button {
    width: 100%;
    height: 48px;


    padding: 0 13px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    background: #fff;

    border: 1px solid #dcdcdc;
    border-radius: 7px;

    color: #333;

    font-family: inherit;
    font-size: 14px;

    cursor: pointer;
    box-sizing: border-box;

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

.fn-country-button:hover,
.fn-city-button:hover {
    border-color: #7A8A45;
}

.fn-country-picker.open .fn-country-button,
.fn-city-picker.open .fn-city-button,
#fnCountryPicker.fn-country-is-open .fn-country-button,
#fnCityPicker.open .fn-city-button {
    border-color: #6C972D;

    box-shadow:
        0 0 0 2px rgba(108,151,45,.10);
}

/* =========================================================
   COUNTRY / CITY SELECTED
   ========================================================= */

.fn-country-selected,
.fn-city-selected {
    min-width: 0;

    display: flex;
    align-items: center;

    gap: 7px;

    line-height: 1;
}

.fn-country-selected > span:last-child,
.fn-city-selected > span:last-child {
    min-width: 0;

    overflow: hidden;

    white-space: nowrap;
    text-overflow: ellipsis;
}

/* =========================================================
   COUNTRY FLAG / GLOBE
   ========================================================= */

.fn-country-flag-wrap {
    width: 18px;
    height: 18px;

    flex: 0 0 18px;

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

    margin: 0;
    padding: 0;
}

.fn-country-flag-wrap img {
    width: 25px;
    height: 18px;

    display: block;

    object-fit: cover;
}

.fn-country-flag-wrap svg {
    width:12px;
    height:12px;
    display:block;
    fill:none;
    stroke:#7A8A45;
    stroke-width:1.6;
}
/* Globe only - smaller */

#fnCountryGlobe {
    width: 12px !important;
    height: 12px !important;
}

/* =========================================================
   COUNTRY OPTION FLAG
   ========================================================= */

.fn-option-flag {
    width: 27px;
    height: 19px;

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

    flex-shrink: 0;

    overflow: hidden;
    border-radius: 2px;
}

.fn-option-flag img {
    width: 27px;
    height: 19px;

    display: block;

    object-fit: cover;
}

/* =========================================================
   CITY ICON
   ========================================================= */

.fn-city-selected svg {
    width: 19px;
    height: 19px;

    flex-shrink: 0;

    fill: none;

    stroke: #6C972D;
    stroke-width: 1.8;
}

#fnCityName {
    min-width: 0;

    overflow: hidden;

    white-space: nowrap;
    text-overflow: ellipsis;
}

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

#fnCountryName,
#fnCityName {
    color: #999;
    font-weight: 400;
}

/* =========================================================
   SELECT ARROW
   ========================================================= */

.fn-select-arrow {
    width: 7px;
    height: 7px;

    flex-shrink: 0;

    margin-left: 8px;

    border-right: 1.5px solid #555;
    border-bottom: 1.5px solid #555;

    transform:
        rotate(45deg)
        translateY(-2px);

    transition:
        transform .2s ease;
}

.fn-country-picker.open .fn-select-arrow,
.fn-city-picker.open .fn-select-arrow,
#fnCountryPicker.fn-country-is-open .fn-select-arrow,
#fnCityPicker.open .fn-select-arrow {
    transform:
        rotate(225deg)
        translateY(-1px);
}

/* =========================================================
   DROPDOWNS
   ========================================================= */

.fn-country-dropdown,
.fn-city-dropdown {
    position: absolute;

    left: 0;
    right: 0;

    top: calc(100% + 7px);

    z-index: 9999999;

    display: none;

    background: #fff;

    border: 1px solid #ddd;
    border-radius: 9px;

    box-shadow:
        0 12px 35px rgba(0,0,0,.16);

    overflow: hidden;
}

/* Country */

#fnCountryDropdown {
    z-index: 9999999 !important;
}

#fnCountryPicker.fn-country-is-open #fnCountryDropdown {
    display: block !important;
}

/* City */

#fnCityDropdown {
    z-index: 9999998 !important;
}

#fnCityPicker.open #fnCityDropdown {
    display: block !important;
}

/* =========================================================
   SEARCH BOX
   ========================================================= */

.fn-country-search,
.fn-city-search {
    position: relative;

    padding: 10px;

    border-bottom: 1px solid #eee;

    background: #fff;
}

.fn-country-search svg,
.fn-city-search svg {
    position: absolute;

    left: 19px;
    top: 50%;

    width: 16px;
    height: 16px;

    transform: translateY(-50%);

    fill: none;

    stroke: #777;
    stroke-width: 1.8;

    pointer-events: none;
}

.fn-country-search input,
.fn-city-search input {
    width: 100%;
    height: 40px;

    padding: 0 42px 0 36px;

    border: 1px solid #d8d8d8;
    border-radius: 7px;

    outline: none;

    background: #fafafa;

    font-family: inherit;
    font-size: 13px;

    color: #333;

    box-sizing: border-box;

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

.fn-city-search input {
    padding-right: 45px !important;
}

.fn-country-search input::placeholder,
.fn-city-search input::placeholder {
    color: #999;
}

.fn-country-search input:hover,
.fn-city-search input:hover {
    border-color: #c5c5c5;
    background: #fff;
}

.fn-country-search input:focus,
.fn-city-search input:focus {
    border-color: #7A8A45;
    background: #fff;

    box-shadow:
        0 0 0 3px rgba(108,151,45,.08);
}

/* =========================================================
   CITY SEARCH BUTTON
   ========================================================= */

.fn-city-search-button {
    position: absolute;

    right: 9px;
    top: 50%;

    width: 30px;
    height: 30px;

    transform: translateY(-50%);

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

    border: 0;
    border-radius: 5px;

    background: transparent;

    color: #6C972D;

    font-size: 18px;
    line-height: 1;

    cursor: pointer;
    padding: 0;

    transition:
        background .15s ease,
        color .15s ease;
}

.fn-city-search-button:hover {
    background: #f3f5ed;
    color: #3C4619;
}

.fn-city-search-button:active {
    transform: translateY(-50%) scale(.95);
}

/* =========================================================
   LISTS
   ========================================================= */

.fn-country-list,
.fn-city-list {
    max-height: 230px;

    overflow-y: auto;

    padding: 4px 0;
}

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

.fn-country-list::-webkit-scrollbar,
.fn-city-list::-webkit-scrollbar {
    width: 5px;
}

.fn-country-list::-webkit-scrollbar-thumb,
.fn-city-list::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 10px;
}

/* =========================================================
   COUNTRY OPTION
   ========================================================= */

.fn-country-option {
    min-height: 44px;

    padding: 8px 13px;

    display: flex;
    align-items: center;

    gap: 10px;

    cursor: pointer;

    box-sizing: border-box;

    transition:
        background .15s ease,
        color .15s ease,
        padding-left .15s ease;
}

.fn-country-option:hover {
    background: #f1f5e8;
    color: #3C4619;

    padding-left: 16px;
}

.fn-option-country-name {
    min-width: 0;

    overflow: hidden;

    white-space: nowrap;
    text-overflow: ellipsis;

    font-size: 14px;
    font-weight: 500;

    color: #333;
}

.fn-country-option:hover .fn-option-country-name {
    color: #3C4619;
}

/* =========================================================
   CITY OPTIONS
   ========================================================= */

.fn-city-option,
.fn-city-list .city-result-item {
    min-height: 44px;

    padding: 9px 13px;

    display: flex;
    align-items: center;

    box-sizing: border-box;

    cursor: pointer;

    font-size: 14px;
    font-weight: 500;

    line-height: 1.4;

    color: #333;

    background: #fff;

    transition:
        background .15s ease,
        color .15s ease,
        padding-left .15s ease;
}

.fn-city-option:hover,
.fn-city-list .city-result-item:hover {
    background: #f1f5e8;

    color: #3C4619;

    padding-left: 17px;
}

/* City decorative dot */

.fn-city-option::before,
.fn-city-list .city-result-item::before {
    content: "";

    width: 7px;
    height: 7px;

    margin-right: 10px;

    flex-shrink: 0;

    border-radius: 50%;

    background: #7A8A45;

    transition:
        background .15s ease,
        transform .15s ease;
}

.fn-city-option:hover::before,
.fn-city-list .city-result-item:hover::before {
    background: #6C972D;

    transform: scale(1.2);
}

.fn-city-list .city-result-item {
    border-bottom: 1px solid #f1f1f1;
}

.fn-city-list .city-result-item:last-child {
    border-bottom: 0;
}

.fn-city-list .city-result-item:active {
    background: #e5ecd8;
    padding-left: 15px;
}

/* =========================================================
   MESSAGES
   ========================================================= */

.fn-country-message,
.fn-city-message {
    padding: 18px 12px;

    text-align: center;

    font-size: 12px;

    color: #888;
}

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

.fn-finder-action {
    flex: 0 0 auto;
}

.fn-find-flowers {
    height: 48px;

    padding: 0 18px;

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

    gap: 9px;

    border: 1px solid #98AB6E;
    border-radius: 7px;

    background: #A4B77A;

    color: #fff;

    font-family: inherit;
    font-size: 14px;
    font-weight: 700;

    white-space: nowrap;

    cursor: pointer;

    box-shadow:
        0 5px 14px rgba(60,70,25,.10);

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

.fn-find-flowers:hover {
    background: #94A968;
    border-color: #8A9F5D;
}

.fn-find-flowers:active {
    transform: translateY(1px);
}

.fn-find-flowers svg {
    width: 17px;
    height: 17px;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.8;
}

/* =========================================================
   LOADING
   ========================================================= */

.fn-find-spinner {
    display: none;

    width: 16px;
    height: 16px;

    border: 2px solid rgba(255,255,255,.45);
    border-top-color: #fff;

    border-radius: 50%;

    animation: fnFindSpin .7s linear infinite;

    flex-shrink: 0;
}

.fn-find-flowers.is-loading {
    cursor: wait;
    opacity: .9;
    pointer-events: none;
}

.fn-find-flowers.is-loading .fn-find-text,
.fn-find-flowers.is-loading .fn-find-arrow {
    display: none;
}

.fn-find-flowers.is-loading .fn-find-spinner {
    display: block;
}

@keyframes fnFindSpin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* =========================================================
   TRUST POINTS
   ========================================================= */

.fn-destination-trust {
    margin-top: 15px;

    display: flex;
    align-items: center;

    gap: 18px;

    flex-wrap: wrap;
}

.fn-destination-trust span {
    display: inline-flex;
    align-items: center;

    gap: 5px;

    font-size: 12px;

    color: #555;
}

.fn-destination-trust svg {
    width: 15px;
    height: 15px;

    fill: none;

    stroke: #6C972D;
    stroke-width: 2;
}

/* =========================================================
   TABLET
   769px - 991px
   ========================================================= */

@media (min-width: 769px) and (max-width: 991px) {

    .fn-destination-container {
        padding: 45px 22px;
    }

    .fn-destination-content {
        max-width: 700px;
    }

    .fn-destination-content h2 {
        font-size: 38px;
    }

    .fn-destination-description {
        font-size: 15px;
    }

}

/* =========================================================
   MOBILE
   <= 768px
   ========================================================= */

@media (max-width: 768px) {

    .fn-destination-hero {
        position: relative !important;

        min-height: 0;
        height: auto;

        display: block;

        overflow: visible;

        z-index: 100;
    }

    /* Background */

    .fn-destination-bg {
        background-image:
            url('/images/slider-banner-bkground-n.webp');

        background-position: center top;
        background-size: cover;
        background-repeat: no-repeat;
    }

    /* Overlay */

    .fn-destination-overlay {
        background:
            linear-gradient(
                180deg,
                rgba(255,255,255,.00) 0%,
                rgba(255,255,255,.04) 20%,
                rgba(255,255,255,.16) 38%,
                rgba(255,255,255,.58) 58%,
                rgba(255,255,255,.92) 78%,
                rgba(255,255,255,1) 100%
            );
    }

    /* Container */

    .fn-destination-container {
        width: 100%;
        max-width: none;

        margin: 0;

        padding: 22px 12px 18px;

        box-sizing: border-box;
    }

    .fn-destination-content {
        width: 100%;
        max-width: 360px;
    }

    /* Heading */

    .fn-destination-content h2 {
        margin: 0 0 6px;

        font-size: 24px;
        line-height: 1.08;
    }

    /* Description */

    .fn-destination-description {
        max-width: 320px;

        margin: 0 0 10px;

        font-size: 11px;
        line-height: 1.35;
    }

    /* Finder */

    .fn-destination-finder {
        width: 100%;
        max-width: 340px;

        display: flex;
        flex-direction: column;
        align-items: stretch;

        gap: 5px;

        padding: 7px;

        border-radius: 8px;

        background: rgba(255,248,247,.78);

        border-color: rgba(180,140,135,.13);

        box-shadow:
            0 5px 18px rgba(80,40,35,.07);

        z-index: 1000;
    }

    /* Fields */

    .fn-finder-field {
        width: 100%;
        flex: none;
    }

    .fn-finder-field label {
        margin: 0 0 3px 2px;

        font-size: 8px;
        line-height: 1;

        letter-spacing: .4px;
    }

    /* Buttons */

    .fn-country-button,
    .fn-city-button {
        width: 100%;

        height: 36px;

        padding: 0 9px;

        border-radius: 6px;

        font-size: 11px;
    }

    .fn-country-selected,
    .fn-city-selected {
        gap: 6px;
    }

    /* Country flag */

    .fn-country-flag-wrap {
        width: 20px;
        height: 14px;
        flex: 0 0 20px;
    }

    .fn-country-flag-wrap img {
        width: 20px;
        height: 14px;
    }

    .fn-country-flag-wrap svg {
        width: 15px;
        height: 15px;
    }

    /* Keep globe smaller */

    #fnCountryGlobe {
        width: 12px !important;
        height: 12px !important;
    }

    /* City icon */

    .fn-city-selected svg {
        width: 15px;
        height: 15px;
    }

    /* Arrow */

    .fn-select-arrow {
        width: 6px;
        height: 6px;

        margin-left: 5px;
    }

    /* Find button */

    .fn-finder-action {
        width: 100%;
    }

    .fn-find-flowers {
        width: 100%;

        height: 36px;

        padding: 0 12px;

        border-radius: 6px;

        font-size: 11px;

        gap: 6px;
    }

    .fn-find-flowers svg {
        width: 14px;
        height: 14px;
    }

    .fn-find-spinner {
        width: 13px;
        height: 13px;

        border-width: 2px;
    }

    /* Trust */

    .fn-destination-trust {
        margin-top: 7px;

        gap: 5px 9px;
    }

    .fn-destination-trust span {
        font-size: 9px;
        gap: 3px;
    }

    .fn-destination-trust svg {
        width: 11px;
        height: 11px;
    }

    /* =====================================================
       MOBILE DROPDOWN STACKING
       ===================================================== */

    .fn-country-field,
    .fn-city-field,
    .fn-finder-action {
        position: relative;
    }

    .fn-country-field {
        z-index: 9999;
    }

    .fn-city-field {
        z-index: 20;
    }

    .fn-finder-action {
        z-index: 10;
    }

    #fnCountryPicker {
        position: relative !important;
        z-index: 99999 !important;
    }

    #fnCityPicker {
        position: relative !important;
        z-index: 9999 !important;
    }

    #fnCountryPicker.fn-country-is-open {
        z-index: 999999 !important;
    }

    #fnCityPicker.open {
        z-index: 99999 !important;
    }

    #fnCountryDropdown {
        position: absolute !important;
        z-index: 9999999 !important;
    }

    #fnCityDropdown {
        position: absolute !important;
        z-index: 9999998 !important;
    }

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

    .fn-country-dropdown,
    .fn-city-dropdown {
        width: 100%;
        max-width: 100%;

        top: calc(100% + 5px);

        border-radius: 7px;
    }

    .fn-country-search,
    .fn-city-search {
        padding: 7px;
    }

    .fn-country-search input,
    .fn-city-search input {
        height: 34px;

        font-size: 12px;

        padding-left: 32px;
    }

    .fn-country-search svg,
    .fn-city-search svg {
        left: 16px;

        width: 14px;
        height: 14px;
    }

    .fn-city-search input {
        padding-right: 40px !important;
    }

    .fn-city-search-button {
        right: 7px;

        width: 27px;
        height: 27px;

        font-size: 16px;
    }

    .fn-country-list,
    .fn-city-list {
        max-height: 190px;
    }

    .fn-country-option,
    .fn-city-option,
    .fn-city-list .city-result-item {
        min-height: 38px;

        padding: 7px 10px;

        font-size: 12px;
    }

    .fn-option-flag {
        width: 23px;
        height: 16px;
    }

    .fn-option-flag img {
        width: 23px;
        height: 16px;
    }

    .fn-option-country-name {
        font-size: 12px;
    }

}

/* =========================================================
   SMALL MOBILE
   <= 480px
   ========================================================= */

@media (max-width: 480px) {

    .fn-destination-container {
        padding: 14px 10px 15px;
    }

    .fn-destination-content {
        max-width: 310px;
    }

    .fn-destination-content h2 {
        margin-bottom: 5px;

        font-size: 21px;
        line-height: 1.06;
    }

    .fn-destination-description {
        max-width: 285px;

        margin-bottom: 8px;

        font-size: 10px;
        line-height: 1.3;
    }

    .fn-destination-finder {
        max-width: 295px;

        padding: 6px;

        gap: 4px;

        border-radius: 7px;
    }

    .fn-finder-field label {
        margin-bottom: 2px;

        font-size: 7px;
    }

    .fn-country-button,
    .fn-city-button {
        height: 32px;

        padding: 0 8px;

        border-radius: 5px;

        font-size: 10px;
    }

    .fn-country-selected,
    .fn-city-selected {
        gap: 5px;
    }

    .fn-country-flag-wrap {
        width: 18px;
        height: 13px;
        flex: 0 0 18px;
    }

    .fn-country-flag-wrap img {
        width: 18px;
        height: 13px;
    }

    .fn-country-flag-wrap svg {
        width: 14px;
        height: 14px;
    }

    #fnCountryGlobe {
        width: 11px !important;
        height: 11px !important;
    }

    .fn-city-selected svg {
        width: 14px;
        height: 14px;
    }

    .fn-select-arrow {
        width: 5px;
        height: 5px;

        margin-left: 4px;
    }

    .fn-find-flowers {
        height: 32px;

        border-radius: 5px;

        font-size: 10px;

        gap: 5px;
    }

    .fn-find-flowers svg {
        width: 12px;
        height: 12px;
    }

    .fn-destination-trust {
        display: flex;
        flex-wrap: wrap;

        margin-top: 6px;

        gap: 4px 8px;
    }

    .fn-destination-trust span {
        font-size: 8px;
    }

    .fn-destination-trust svg {
        width: 10px;
        height: 10px;
    }

}

/* =========================================================
   VERY SMALL PHONES
   <= 360px
   ========================================================= */

@media (max-width: 360px) {

    .fn-destination-container {
        padding: 10px 8px 12px;
    }

    .fn-destination-content {
        max-width: 280px;
    }

    .fn-destination-content h2 {
        font-size: 19px;
    }

    .fn-destination-description {
        font-size: 9px;
        max-width: 260px;
    }

    .fn-destination-finder {
        max-width: 270px;

        padding: 5px;
        gap: 3px;
    }

    .fn-country-button,
    .fn-city-button,
    .fn-find-flowers {
        height: 30px;
    }

    .fn-country-button,
    .fn-city-button {
        font-size: 9px;
    }

    .fn-find-flowers {
        font-size: 9px;
    }

    .fn-destination-trust span {
        font-size: 7.5px;
    }

}

/* =========================================================
   TOUCH DEVICES
   Remove hover movement on phones
   ========================================================= */

@media (hover: none) {

    .fn-country-option:hover,
    .fn-city-option:hover,
    .fn-city-list .city-result-item:hover {
        padding-left: inherit;
    }

}

/* CSS Document */