/* Taste Lab page: recipe history popup styles (moved out of taste-lab.html so browsers can cache them). */
        /* ---------------------------------------------------------
           HISTORY BUTTON
           --------------------------------------------------------- */

        .recipe-info-btn {
            display: inline-flex !important;
            align-items: center;
            justify-content: center;
            gap: 6px;
        }


        /* ---------------------------------------------------------
           HISTORY MODAL BACKGROUND
           --------------------------------------------------------- */

        #recipe-history-modal {
            display: none;
            position: fixed;
            inset: 0;
            width: 100%;
            height: 100%;

            background: rgba(0, 0, 0, 0.82);

            z-index: 20000;

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

            padding: 25px;

            backdrop-filter: blur(5px);
            -webkit-backdrop-filter: blur(5px);
        }

        #recipe-history-modal.active {
            display: flex;
        }


        /* ---------------------------------------------------------
           HISTORY WINDOW
           --------------------------------------------------------- */

        .recipe-history-window {
            position: relative;

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

            max-height: 88vh;

            background: #ffffff;
            color: #333333;

            border-radius: 10px;

            padding: 50px 45px 40px;

            overflow-y: auto;

            box-shadow:
                0 25px 80px rgba(0, 0, 0, 0.45);

            animation: recipeHistoryOpen 0.22s ease-out;
        }

        @keyframes recipeHistoryOpen {

            from {
                opacity: 0;
                transform: translateY(15px) scale(0.98);
            }

            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }

        }


        /* ---------------------------------------------------------
           HISTORY TITLE
           --------------------------------------------------------- */

        .recipe-history-window h2 {
            margin: 0 45px 8px 0;
            color: #242943;
        }

        .recipe-history-subtitle {
            display: block;

            margin-bottom: 25px;

            font-size: 0.95rem;

            opacity: 0.65;

            letter-spacing: 0.04em;
        }


        /* ---------------------------------------------------------
           HISTORY TEXT
           --------------------------------------------------------- */

        .recipe-history-text {
            line-height: 1.8;

            font-size: 1rem;
        }

        .recipe-history-text p {
            margin-bottom: 18px;
        }

        .recipe-history-text h4 {
            margin-top: 25px;
            margin-bottom: 10px;
        }


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

        .recipe-history-close {
            position: absolute;

            top: 12px;
            right: 15px;

            width: 42px;
            height: 42px;

            padding: 0;

            border: 0;
            outline: none;

            background: transparent;

            color: #333333;

            font-size: 32px;
            line-height: 42px;

            cursor: pointer;

            transition: opacity 0.2s ease;
        }

        .recipe-history-close:hover {
            opacity: 0.55;
        }


        /* ---------------------------------------------------------
           LOCK PAGE SCROLL WHILE POPUP IS OPEN
           --------------------------------------------------------- */

        body.recipe-history-open {
            overflow: hidden;
        }


        /* ---------------------------------------------------------
           HIDDEN HISTORY SOURCE
           --------------------------------------------------------- */

        .recipe-history-source {
            display: none;
        }


        /* ---------------------------------------------------------
           MOBILE
           --------------------------------------------------------- */

        @media screen and (max-width: 736px) {

            #recipe-history-modal {
                padding: 15px;
            }

            .recipe-history-window {
                max-height: 90vh;

                padding: 45px 22px 25px;

                border-radius: 8px;
            }

            .recipe-history-window h2 {
                font-size: 1.45rem;
            }

            .recipe-history-text {
                font-size: 0.95rem;

                line-height: 1.7;
            }

            .recipe-history-close {
                top: 8px;
                right: 9px;
            }

        }