Revise paste 283f2fc91ea96

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Sort Selector Modal</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

.container {
            max-width: 800px;
            margin: 20px auto;
            padding: 0 20px;
        }

/* --- CUSTOM SORT SELECTOR STYLING (The Trigger) --- */
        .sort-wrapper {
            display: flex;
            align-items: center;
            margin-bottom: 40px;
        }

.sort-label {
            font-weight: bold;
            font-size: 1.1em;
            margin-right: 15px;
        }

.collapsible-section {
            border: none;
            margin: 0;
            flex-grow: 1;
            max-width: 300px;
        }

/* The clickable 'Sort by' box */
        .collapsible-section summary {
            padding: 10px 15px;
            font-size: 1em;
            cursor: pointer;
            outline: none;
            list-style: none;
            position: relative;
            border: 1px solid #ccc;
            border-radius: 2px;
            background-color: #fff;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

#selected-sort-text {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-weight: normal;
        }

.collapsible-section summary::after {
            content: '>';
            position: relative;
            font-size: 1.5em;
            line-height: 0;
            transition: transform 0.3s ease;
            margin-left: 10px;
            transform: rotate(90deg);
        }

.collapsible-section[open] summary::after {
            transform: rotate(-90deg);
        }

/* --------------------------------------------------------- */
        /* --- DEFAULT (Tablet/Desktop) MODAL STYLES: Bottom Sheet --- */
        /* --------------------------------------------------------- */
        .sticky-list-container {
            /* Initial state (hidden) */
            transform: translateY(100%); /* Hides off the bottom edge */
            opacity: 0;
            visibility: hidden;
            transition: transform 0.4s ease-out, opacity 0.4s ease-out, visibility 0s 0.4s;

position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 60vh; /* 60% of viewport height */

background-color: rgba(255, 255, 255, 0.98);
            color: #333;
            z-index: 1000;
            box-shadow: 0 -4px 10px rgb(239 231 231 / 50%);
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            
            display: flex;
            flex-direction: column;
        }

.sticky-list-container.is-open {
            transform: translateY(0);
            opacity: 1;
            visibility: visible;
            transition: transform 0.4s ease-out, opacity 0.4s ease-out;
        }

/* Modal Header - Same for both sizes, ensures alignment */
        .modal-header {
            position: relative;
            width: 100%;
            display: flex;
            justify-content: space-between; 
            align-items: center;
            padding: 10px 20px;
            background-color: rgba(255, 255, 255, 0.98);
            border-bottom: 1px solid #eee;
            flex-shrink: 0;
        }
        
        #modal-sort-title {
            font-size: 1.1em;
            font-weight: bold;
            color: #333;
            white-space: nowrap; 
            line-height: 1.5; 
        }

.close-btn {
            font-size: 2em;
            font-weight: 300;
            cursor: pointer;
            line-height: 0.7;
            color: #666;
            padding: 5px;
            transition: color 0.2s;
        }
        .close-btn:hover {
            color: #000;
        }
        
        /* Wrapper for scrollable content */
        .modal-content-wrapper {
            overflow-y: auto; 
            flex-grow: 1; 
        }

/* List Styling */
        .list-content {
            list-style: none;
            margin: 0;
            padding: 0;
            max-width: 600px;
            margin: 0 auto;
        }

.list-content li {
            padding: 15px 20px;
            cursor: pointer;
            transition: background-color 0.2s, font-weight 0.2s;
            border-bottom: 1px solid #eee;
            text-align: center;
            font-size: 1.1em;
        }

.list-content li.active {
            background-color: #f0f0f0; 
            font-weight: bold;
            color: #000;
        }
        
        /* ------------------------------------------------------------- */
        /* --- MOBILE MEDIA QUERY: Full-Screen Side Drawer (Left) --- */
        /* ------------------------------------------------------------- */
        @media (max-width: 768px) {
            .sticky-list-container {
                /* Full height/width */
                top: 0;
                bottom: 0;
                height: 100vh; 
                width: 100%;

/* Change default hidden position from Y to X */
                transform: translateX(-100%); /* Hides off the left edge */
                
                /* Remove corner radii */
                border-radius: 0; 
            }

.sticky-list-container.is-open {
                /* Slides in from the left */
                transform: translateX(0);
            }

/* Optional: Add slight padding to content for mobile */
            .modal-content-wrapper {
                 padding-top: 10px; 
            }
        }
        
        /* --- TARGET PARAGRAPH STYLING --- */
        .target-paragraph {
            padding: 20px;
            margin-top: 50px;
            border: 1px solid #ddd;
            background-color: #fff;
        }

.target-paragraph:target {
            box-shadow: 0 0 10px rgba(0, 123, 255, 0.5);
            border-color: #007bff;
        }
    </style>
</head>

<body>

<div class="container">
        <h1>Product Listing Page</h1>

<details class="collapsible-section" id="sort-selector">
                <summary>
                    <span id="selected-sort-text">Sale Date (Newest First)</span>
                </summary>
            </details>
        </div>

<h2>Product Sections</h2>
        <div class="target-paragraph" id="section1">
            <h3>Section 1: Sale Date (Newest First)</h3>
            <p>This paragraph contains the newest items sorted by sale date. This is the default view.</p>
        </div>
        <div class="target-paragraph" id="section2">
            <h3>Section 2: Sale Date (Oldest First)</h3>
            <p>This paragraph contains the oldest items sorted by sale date.</p>
        </div>
        <div class="target-paragraph" id="section3">
            <h3>Section 3: Price (High to Low)</h3>
            <p>This paragraph contains items sorted by price, starting with the highest price.</p>
        </div>
        <div class="target-paragraph" id="section4">
            <h3>Section 4: Price (Low to High)</h3>
            <p>This paragraph contains items sorted by price, starting with the lowest price.</p>
        </div>
        <div class="target-paragraph" id="section5">
            <h3>Section 5: Rating (Highest)</h3>
            <p>This paragraph contains items sorted by customer rating, highest first.</p>
        </div>
        <div class="target-paragraph" id="section6">
            <h3>Section 6: Rating (Lowest)</h3>
            <p>This paragraph contains items sorted by customer rating, lowest first.</p>
        </div>
        <div class="target-paragraph" id="section7">
            <h3>Section 7: Alphabetical (A-Z)</h3>
            <p>This paragraph contains items sorted alphabetically by product name (A-Z).</p>
        </div>
        <div class="target-paragraph" id="section8">
            <h3>Section 8: Alphabetical (Z-A)</h3>
            <p>This paragraph contains items sorted alphabetically by product name (Z-A).</p>
        </div>
    </div>

<div class="sticky-list-container">
        <div class="modal-header">
            <span id="modal-sort-title">Sale Date (Newest First)</span>
            
            <span class="close-btn">×</span>
        </div>

<div class="modal-content-wrapper">
            <ul class="list-content">
                <li class="active" data-target="section1">Sale Date (Newest First)</li>
                <li data-target="section2">Sale Date (Oldest First)</li>
                <li data-target="section3">Price (High to Low)</li>
                <li data-target="section4">Price (Low to High)</li>
                <li data-target="section5">Rating (Highest)</li>
                <li data-target="section6">Rating (Lowest)</li>
                <li data-target="section7">Alphabetical (A-Z)</li>
                <li data-target="section8">Alphabetical (Z-A)</li>
            </ul>
        </div>
    </div>

// Function to close the modal
            function closeModal() {
                $sortSelector.prop('open', false);
                $stickyContainer.removeClass('is-open');
                $('body').css('overflow', '');
            }

// 1. Modal Toggle Logic
            $sortSelector.on('toggle', function() {
                if ($sortSelector.prop('open')) {
                    $stickyContainer.addClass('is-open');
                    $('body').css('overflow', 'hidden'); 
                    $modalSortTitle.text($selectedTextSpan.text());
                } else {
                    $stickyContainer.removeClass('is-open');
                    $('body').css('overflow', '');
                }
            });

// 2. Close Button Logic
            $closeBtn.on('click', function() {
                closeModal();
            });

// 3. Selection, Scroll, and Close Logic
            $listItems.on('click', function() {
                const $this = $(this);
                const newText = $this.text();
                const targetId = $this.data('target');

// A. Update the 'Sort by' text (main selector)
                $selectedTextSpan.text(newText);
                // B. Update the modal header title
                $modalSortTitle.text(newText);

// C. Set the active/selected style
                $listItems.removeClass('active');
                $this.addClass('active');

// D. Close the Modal/Bottom Sheet
                closeModal();

// E. Scroll to the target paragraph
                const $targetElement = $('#' + targetId);
                if ($targetElement.length) {
                    const targetY = $targetElement.offset().top + yOffset;

$('html, body').animate({
                        scrollTop: targetY
                    }, 400, function() {
                        $targetElement.focus();
                    });
                }
            });
        });
    </script>

</body>
</html>