* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Arial', sans-serif;
            height: 100vh;
            background-image: url('bagelopolis-bg-test.jpg');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            background-attachment: fixed;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            padding: 20px;
        }


        body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -2;
        }

        body::after {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: 
                radial-gradient(2px 2px at 20px 30px, #ffffff, transparent),
                radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.8), transparent),
                radial-gradient(1px 1px at 90px 40px, #ffffff, transparent),
                radial-gradient(1px 1px at 130px 80px, rgba(255,255,255,0.6), transparent),
                radial-gradient(2px 2px at 160px 30px, #ffffff, transparent);
            background-repeat: repeat;
            background-size: 200px 100px;
            opacity: 0.3;
            z-index: -1;
        }

        .waitlist-container {
            /*background: linear-gradient(135deg, 
                rgba(218, 165, 32, 0.9) 0%,
                rgba(205, 133, 63, 0.95) 25%,
                rgba(222, 184, 135, 0.9) 50%,
                rgba(210, 180, 140, 0.95) 75%,
                rgba(195, 145, 85, 0.9) 100%);*/
            backdrop-filter: blur(2px);
            /*border: 3px solid rgba(139, 69, 19, 0.4);*/
            border-radius: 50%;
            width: 400px;
            height: 400px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            box-shadow: 
                0 8px 32px rgba(0, 0, 0, 0.4),
                inset 0 4px 8px rgba(255, 255, 255, 0.1),
                inset 0 -4px 8px rgba(139, 69, 19, 0.2);
            animation: float 6s ease-in-out infinite;
            position: relative;
        }

        .waitlist-container::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 80px;
            height: 80px;
            /*background: radial-gradient(circle, 
                rgba(0, 0, 0, 0.9) 0%,
                rgba(20, 10, 5, 0.85) 30%,
                rgba(40, 20, 10, 0.7) 60%,
                rgba(60, 30, 15, 0.5) 80%,
                transparent 100%);*/
            border-radius: 50%;
            /*border: 3px solid rgba(80, 40, 20, 0.8);*/
            pointer-events: none;
            box-shadow:
                0 0px 40px rgba(255, 255, 255, 0.4),
                inset 0 4px 8px 3px rgba(0, 0, 0, 0.1),
                inset 0 0px 0px rgba(90, 90, 90, 0.1);
            z-index: 1;
        }

        .waitlist-container > * {
            position: relative;
            z-index: 1;
        }

        /* Add bagel texture with sesame seeds */
        .waitlist-container::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background-image: 
                radial-gradient(3px 3px at 80px 120px, rgba(245, 245, 220, 0.8), transparent),
                radial-gradient(2px 2px at 320px 180px, rgba(245, 245, 220, 0.7), transparent),
                radial-gradient(3px 3px at 150px 300px, rgba(245, 245, 220, 0.8), transparent),
                radial-gradient(2px 2px at 280px 100px, rgba(245, 245, 220, 0.6), transparent),
                radial-gradient(3px 3px at 200px 80px, rgba(245, 245, 220, 0.7), transparent),
                radial-gradient(2px 2px at 350px 280px, rgba(245, 245, 220, 0.8), transparent),
                radial-gradient(3px 3px at 120px 250px, rgba(245, 245, 220, 0.6), transparent),
                radial-gradient(2px 2px at 380px 150px, rgba(245, 245, 220, 0.7), transparent);
            pointer-events: none;
            z-index: 0;
        }

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

        .progress-container {
            margin-bottom: 30px;
        }

        .progress-text {
            color: #f5deb3;
            font-size: 14px;
            margin-bottom: 10px;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
            font-weight: 500;
            letter-spacing: 0.5px;
        }

        .progress-bar {
            width: 100%;
            height: 8px;
            background: rgba(139, 69, 19, 0.3);
            border-radius: 4px;
            overflow: hidden;
            position: relative;
        }

        .progress-fill {
            height: 100%;
            background: linear-gradient(90deg, #cd853f, #deb887, #f0e68c);
            border-radius: 4px;
            width: 0%;
            transition: width 0.3s ease;
            position: relative;
        }

        .progress-fill::after {
            content: '';
            position: absolute;
            top: 0;
            left: -50px;
            width: 50px;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
            animation: shimmer 2s infinite;
        }

        @keyframes shimmer {
            0% { left: -50px; }
            100% { left: 100%; }
        }

        .logoContainer {
            /*width: 60px;*/
            /*height: 60px;*/
            /*background: linear-gradient(135deg, #deb887, #cd853f);
            border-radius: 50%;
            margin: 0 auto 20px;*/
            /*display: flex;*/
            align-items: center;
            justify-content: center;
            font-size: 24px;
            font-weight: bold;
            color: #8b4513;
            text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
            /*box-shadow: 0 4px 15px rgba(205, 133, 63, 0.4);*/
            position: relative;
            z-index: 2;
        }
        .logo{
              width:190px;
              
        }
        /*.logoContainer::before {
            content: '';
            position: absolute;
            width: 20px;
            height: 20px;
            background: #8b4513;
            border-radius: 50%;
            opacity: 0.6;
        }*/

        .waitlist-text {
            color: #f5deb3;
            font-size: 24px;
            font-weight: 600;
            margin-bottom: 10px;
            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
        }

        .subtitle {
            color: #deb887;
            font-size: 16px;
            margin-bottom: 30px;
            opacity: 0.9;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
        }

        .email-form {
            display: flex;
            flex-direction: column;
            /*gap: 15px;*/
        }

        .email-input {
            padding: 9px;
            border: 0px;
            border-radius: 10px 10px 0 0;
            background: rgba(240, 240, 240, 1);
            color: #DA953E;
            font-size: 12px;
            outline: none;
            transition: all 0.3s ease;
        }

        .email-input::placeholder {
            color: #EBB97B;
        }

        .email-input:focus {
            border-color: #8b4513;
            background: rgba(255, 255, 255, 1);
        }

        .submit-btn {
            padding: 12px 25px;
            background: linear-gradient(135deg, #8b4513, #a0522d);
            color: #fff8dc;
            border: none;
            border-radius: 0 0 10px 10px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            text-transform: uppercase;
            letter-spacing: 1px;
            box-shadow: 0 4px 15px rgba(139, 69, 19, 0.4);
        }

        .submit-btn:hover {
            /*transform: translateY(-2px);*/
            box-shadow: 0 6px 20px rgba(139, 69, 19, 0.5);
            background: linear-gradient(135deg, #a0522d, #8b4513);
        }

        .submit-btn:active {
            transform: translateY(0);
        }

        /* Responsive design */
        @media (max-width: 480px) {
            .waitlist-container {
                margin: 20px;
                width: 80vw;
                height: 80vw;
            }
            
            .waitlist-text {
                font-size: 18px;
            }
            
            .subtitle {
                font-size: 12px;
            }
            
            .logo {
                width: 45px;
                font-size: 18px;
                margin-bottom: 15px;
            }

            .progress-text {
                font-size: 11px;
            }

            .email-input, .submit-btn {
                font-size: 12px;
                padding: 10px;
            }

            .waitlist-container::before {
                width: 90px;
                height: 90px;
            }
        }

        #bagelTop{
            height:160px;
            align-content:center;
        }
        #bagelHole{
            height:80px;
            align-content:center;
        }
        #bagelBottom{
            height:160px;
            align-content:center;
        }

        
        /* Base message styling */
.message {
    padding: 12px 16px;
    margin: 16px 0;
    border-radius: 4px;
    font-weight: 500;
}

/* Success messages */
.message-success {
    color: #90EE90;
    font-size: 16px;
    margin-top: 15px;
    padding: 10px;
    background: rgba(144, 238, 144, 0.1);
    border-radius: 8px;
    border: 1px solid rgba(144, 238, 144, 0.3);
}

/* Error messages */
.message-error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* Warning messages */
.message-warning {
    background-color: #fff3cd;
    color: #856404;
    border: 1px solid #ffeaa7;
}