/* ==========================================================================
   FLIGHT SEARCH PROGRESS POPUP - REDESIGN
   Loaded from Views/Shared/_Layout.cshtml (the popup lives in the layout and is
   shown from the home page search and the result page "Modify").
   Every rule is scoped to #flightsearchprogress, so nothing else is affected.
   Markup and the show()/hide() script behaviour are untouched.
   ========================================================================== */

#flightsearchprogress.popup_block_Outer {
    background: rgba(11, 34, 51, .72);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

#flightsearchprogress .popup_block {
    top: 50%;
    width: calc(100% - 32px);
    max-width: 460px;
    padding: 0;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}

    #flightsearchprogress .popup_block .progress.flight-popup {
        position: relative;
        width: 100%;
        margin: 0;
        overflow: hidden;
        background: #fff !important;
        border-radius: 20px;
        box-shadow: 0 24px 60px rgba(0, 0, 0, .35) !important;
        animation: bfsPopIn .35s ease-out both;
    }

        /* Top: indeterminate progress bar (uses the empty .header block) */
        #flightsearchprogress .popup_block .progress.flight-popup .header {
            position: relative;
            height: 5px;
            overflow: hidden;
            background: #e7f3f3;
        }

            #flightsearchprogress .popup_block .progress.flight-popup .header .onle-half {
                display: none;
            }

            #flightsearchprogress .popup_block .progress.flight-popup .header:before {
                content: "";
                position: absolute;
                top: 0;
                bottom: 0;
                left: -40%;
                width: 40%;
                background: linear-gradient(90deg, #087171, #f7931e);
                border-radius: 999px;
                animation: bfsProgress 1.4s ease-in-out infinite;
            }

        /* Title block with animated plane badge */
        #flightsearchprogress .popup_block .progress.flight-popup .header2 {
            float: none;
            padding: 28px 28px 10px;
            background: #fff !important;
        }

            #flightsearchprogress .popup_block .progress.flight-popup .header2:before {
                content: "\f072";
                display: flex;
                align-items: center;
                justify-content: center;
                width: 64px;
                height: 64px;
                margin: 0 auto 16px;
                font-family: FontAwesome;
                font-size: 26px;
                color: #fff;
                background: linear-gradient(135deg, #0a8484 0%, #065a5a 100%);
                border-radius: 50%;
                box-shadow: 0 0 0 8px #e7f3f3, 0 10px 22px rgba(8, 113, 113, .35);
                animation: bfsPulse 1.8s ease-in-out infinite;
            }

            #flightsearchprogress .popup_block .progress.flight-popup .header2 h3 {
                float: none;
                margin: 0 0 6px;
                font-size: 22px !important;
                font-weight: 800;
                color: #1d2b36 !important;
            }

            #flightsearchprogress .popup_block .progress.flight-popup .header2 p {
                float: none;
                font-size: 14px;
                line-height: 1.5;
                color: #6b7a86 !important;
            }

        /* Illustration + help line */
        #flightsearchprogress .popup_block .progress.flight-popup .detail {
            float: none;
            padding: 8px 28px 26px;
            color: #1d2b36;
            background: #fff !important;
        }

            /* Animated flight-route scene (CSS only) in place of the hotel illustration.
               .gif-full = sky panel, .gif = scene layer; the <img> stays in the markup but is hidden. */
            #flightsearchprogress .popup_block .progress.flight-popup .detail .gif-full {
                position: relative;
                float: none;
                width: 100%;
                height: 150px;
                margin: 0;
                padding: 0;
                overflow: hidden;
                background: linear-gradient(180deg, #e3f2f2 0%, #f6fbfb 100%);
                border: 1px solid #d9ecec;
                border-radius: 14px;
            }

                /* Drifting clouds */
                #flightsearchprogress .popup_block .progress.flight-popup .detail .gif-full:before {
                    content: "";
                    position: absolute;
                    inset: 0;
                    background:
                        radial-gradient(ellipse 34px 12px at 20% 30%, #fff 98%, transparent 100%),
                        radial-gradient(ellipse 22px 9px at 26% 24%, #fff 98%, transparent 100%),
                        radial-gradient(ellipse 30px 11px at 78% 46%, #fff 98%, transparent 100%),
                        radial-gradient(ellipse 20px 8px at 83% 40%, #fff 98%, transparent 100%);
                    animation: bfsClouds 9s linear infinite;
                }

                /* Origin (orange) and destination (teal) airport dots at the ends of the route */
                #flightsearchprogress .popup_block .progress.flight-popup .detail .gif-full:after {
                    content: "";
                    position: absolute;
                    left: calc(50% - 128px);
                    bottom: 8px;
                    width: 256px;
                    height: 16px;
                    background:
                        radial-gradient(circle, #f7931e 5px, rgba(247, 147, 30, .25) 6px, rgba(247, 147, 30, .25) 8px, transparent 8.5px) left center / 16px 16px no-repeat,
                        radial-gradient(circle, #087171 5px, rgba(8, 113, 113, .25) 6px, rgba(8, 113, 113, .25) 8px, transparent 8.5px) right center / 16px 16px no-repeat;
                }

            /* Scene layer: fixed 240px box centred in the panel, so the flight path has stable coordinates */
            #flightsearchprogress .popup_block .progress.flight-popup .detail .gif {
                position: absolute;
                top: 0;
                bottom: 0;
                left: calc(50% - 120px);
                float: none;
                width: 240px;
                margin: 0;
                padding: 0;
            }

                #flightsearchprogress .popup_block .progress.flight-popup .detail .gif img {
                    display: none;
                }

                /* Dashed route: 120px-radius semicircle, ends at y=134 on the two dots */
                #flightsearchprogress .popup_block .progress.flight-popup .detail .gif:before {
                    content: "";
                    position: absolute;
                    left: 0;
                    top: 14px;
                    width: 240px;
                    height: 120px;
                    border: 2px dashed #8cc4c4;
                    border-bottom: 0;
                    border-radius: 120px 120px 0 0;
                    box-sizing: border-box;
                }

                /* Plane flies along the same arc; offset-rotate keeps the nose on the route
                   (the glyph itself points up-right, hence the extra 45deg) */
                #flightsearchprogress .popup_block .progress.flight-popup .detail .gif:after {
                    content: "\f072";
                    position: absolute;
                    left: 0;
                    top: 0;
                    font-family: FontAwesome;
                    font-size: 22px;
                    line-height: 1;
                    color: #087171;
                    text-shadow: 0 3px 6px rgba(8, 113, 113, .3);
                    offset-path: path("M 1 134 A 119 119 0 0 1 239 134");
                    offset-rotate: auto 45deg;
                    animation: bfsFly 3s ease-in-out infinite;
                }

            #flightsearchprogress .popup_block .progress.flight-popup .detail .call {
                float: none;
                margin: 18px 0 8px;
                font-size: 13px;
                font-weight: 600;
                color: #6b7a86 !important;
            }

            #flightsearchprogress .popup_block .progress.flight-popup .detail .call-number {
                float: none;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                gap: 10px;
                width: auto;
                margin: 0;
                padding: 10px 22px;
                font-size: 22px;
                font-weight: 800;
                letter-spacing: .5px;
                color: #fff;
                background: linear-gradient(135deg, #f9a03f 0%, #f7931e 40%, #e8641a 100%);
                border-radius: 999px;
                box-shadow: 0 10px 22px rgba(232, 100, 26, .35);
            }

                #flightsearchprogress .popup_block .progress.flight-popup .detail .call-number i {
                    font-size: 18px;
                }

        #flightsearchprogress .popup_block .progress.flight-popup .footer-logo {
            display: none;
        }

@keyframes bfsProgress {
    0% { left: -40%; }
    100% { left: 100%; }
}

@keyframes bfsPulse {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

@keyframes bfsFly {
    0% { offset-distance: 0%; opacity: 0; }
    10% { opacity: 1; }
    88% { opacity: 1; }
    100% { offset-distance: 100%; opacity: 0; }
}

@keyframes bfsClouds {
    from { transform: translateX(-30px); }
    to { transform: translateX(30px); }
}

@keyframes bfsPopIn {
    from { opacity: 0; transform: translateY(12px) scale(.98); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    #flightsearchprogress .popup_block .progress.flight-popup,
    #flightsearchprogress .popup_block .progress.flight-popup .header2:before {
        animation: none;
    }

    #flightsearchprogress .popup_block .progress.flight-popup .header:before {
        left: 0;
        width: 100%;
        animation: none;
    }

    #flightsearchprogress .popup_block .progress.flight-popup .detail .gif-full:before {
        animation: none;
    }

    /* Park the plane mid-route instead of flying it */
    #flightsearchprogress .popup_block .progress.flight-popup .detail .gif:after {
        animation: none;
        offset-distance: 50%;
    }
}

@media only screen and (max-width: 480px) {
    #flightsearchprogress .popup_block .progress.flight-popup .header2 {
        padding: 22px 20px 8px;
    }

        #flightsearchprogress .popup_block .progress.flight-popup .header2 h3 {
            font-size: 19px !important;
        }

        #flightsearchprogress .popup_block .progress.flight-popup .header2 p {
            font-size: 13px;
        }

    #flightsearchprogress .popup_block .progress.flight-popup .detail {
        padding: 6px 20px 22px;
    }

        #flightsearchprogress .popup_block .progress.flight-popup .detail .call-number {
            font-size: 19px;
        }
}