/* Styles unchanged, omitted here for brevity */
        /* ...copy your CSS from above... */
        .promotion-type { margin: 10px 0; }
        .price-display { font-weight: bold; margin-top: 20px; }
        .modal { display: none; position: fixed; top: 20%; left: 30%; width: 40%; background: #fff; border: 1px solid #ccc; padding: 20px; z-index: 1000; }
        .modal.active { display: block; }
        .overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 999; }
        .overlay.active { display: block; }


        h2 {
            text-align: center;
            font-size: 24px;
            margin-bottom: 20px;
        }

        #promoteForm {
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
            background: white;
            top: 6rem;
            position: relative;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        .promotion-type {
            margin: 15px 0;
            font-size: 16px;
        }

        .price-display {
            font-weight: bold;
            margin-top: 30px;
            font-size: 18px;
            text-align: center;
        }

        #featuread{
            display: none;
        }

        #submitbutton[type="submit"] {
            display: block;
            width: 100%;
            padding: 12px;
            background-image:linear-gradient(rgb(255, 162, 0),rgb(255, 140, 0));
            color: white;
            font-size: 16px;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            margin-top: 20px;
        }

        #submitbuttonton[type="submit"]:hover {
           background-image:linear-gradient(rgb(255, 162, 0),rgb(255, 140, 0));
        }

        .modal {
            display: none;
            position: fixed;
            top: 10%;
            left: 50%;
            transform: translateX(-50%);
            width: 90%;
            max-width: 400px;
            background: #fff;
            height: auto;
            border: 1px solid #ccc;
            padding: 20px;
            z-index: 1000;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.2);
        }

        .modal.active {
            display: block;
        }

        .overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            z-index: 999;
        }

        .overlay.active {
            display: block;
        }

        .modal h3 {
            margin-top: 0;
        }

        .modal label {
            display: block;
            margin-bottom: 10px;
        }

        .modal button {
            margin-top: 15px;
            padding: 8px 16px;
            background-color: #666;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        .modal button:hover {
            background-color: #555;
        }
        
        footer{
            top: 10rem;
        }
        @media (max-width: 768px) {
            form {
                padding: 15px;
            }

            .modal {
                width: 95%;
                padding: 15px;
            }

            h2 {
                font-size: 20px;
            }

            .price-display {
                font-size: 16px;
            }

            button[type="submit"] {
                font-size: 15px;
            }
            
        }