body {
    margin: 0;
    font-family: 'Vazir', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif;
    overflow-x: hidden;
    color: #ffffff;
    background: linear-gradient(135deg, #0a1a3a 0%, #0e2a5f 45%, #143d7d 80%);
    /* subtle accent glows */
    position: relative;
    min-height: 100vh;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* Ensure sizing doesn't overflow on mobile */
*, *::before, *::after { box-sizing: border-box; }

.header {
    text-align: center;
    padding: 20px;
}

.logo {
    width: 120px; /* Adjust size as needed */
    height: auto;
}

@keyframes gradient {
    0% {
        background-position: 0% 0%;
    }
    50% {
        background-position: 100% 100%;
    }
    100% {
        background-position: 0% 0%;
    }
}

/* Remove animated waves for a cleaner look */
.wave { display: none; }

.wave:nth-of-type(2) {
    bottom: -1.25em;
    animation: wave 18s linear reverse infinite;
    opacity: 0.8;
}

.wave:nth-of-type(3) {
    bottom: -2.5em;
    animation: wave 20s -1s reverse infinite;
    opacity: 0.9;
    
}

@keyframes wave {
    2% {
        transform: translateX(1);
    }
    25% {
        transform: translateX(-25%);
    }
    50% {
        transform: translateX(-50%);
    }
    75% {
        transform: translateX(-25%);
    }
    100% { transform: translateX(1); }
}

.select-container {
    display: none; /* replaced by segmented control */
}

.styled-select {
    display: none;
}

/* Style focus and hover states for better user experience */
.styled-select:focus, .styled-select:hover {
    border-color: rgba(255,255,255,0.5);
    outline: none;
}



@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

#notification {
    position: fixed;
    bottom: 10px;
    left: 10px;
    background-color: #f8d7da;
    color: #721c24;
    padding: 10px;
    border-radius: 5px;
    display: none;
    opacity: 0;
}

#notification.fade-in {
    display: block;
    animation: fadeIn 1s ease-in-out forwards;
}

#notification.fade-out {
    animation: fadeOut 1s ease-in-out forwards;
}

.centered-button {
    display: flex;
    justify-content: center;
    align-items: center;
    /* height: 100vh; Full viewport height for vertical centering */
}


.telegram-link {
    text-align: center;
    margin-top: 20px;
}

.telegram-link a {
    color: #fff;
    text-decoration: none;
    font-size: 16px;
    padding: 12px 18px;
    border-radius: 999px;
    display: inline-block;
    background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.06)) padding-box,
                linear-gradient(135deg, #0aa2ff, #7a6aff) border-box;
    border: 1px solid transparent;
    box-shadow: 0 8px 20px rgba(0,136,204,0.35);
    transition: transform .08s ease, filter .2s ease, box-shadow .2s ease;
}

.telegram-link a:hover {
    filter: brightness(1.06);
}
.telegram-link a:active { transform: translateY(1px) scale(0.99); }
.telegram-link a:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(10,162,255,0.35), 0 10px 22px rgba(0,136,204,0.35); }

/* Segmented control */
.segmented {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    margin: 0 auto 12px;
    padding: 6px;
    border-radius: 14px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    backdrop-filter: blur(12px);
}
.seg-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    text-align: center;
    padding: 10px 12px;
    border-radius: 10px;
    color: #e6e8ec;
    cursor: pointer;
    user-select: none;
    transition: all .15s ease;
}
.seg-btn .seg-icon { width: 22px; height: 22px; display: block; }
.seg-btn:active { transform: scale(0.98); }
.segmented input:checked + .seg-btn { background: rgba(255,255,255,0.18); color:#fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2); }

/* Card readability */
.container.card { text-align: center; }
.container.card ul { margin: 12px 0 0; padding: 0 6px; text-align: center; list-style-position: inside; }
.container.card li { line-height: 1.8; color: #eef1f6; }
  
.container {
    background-color: transparent;
    border-radius: 0;
    box-shadow: none;
    padding: 0 16px 32px;
    margin: 0 auto;
    width: 100%;
    max-width: 640px;
}
    .button-container { text-align: center; margin: 20px 0; }
    .button-container .btn-primary { width: 100%; }
    
    button, .btn-primary {
        -webkit-tap-highlight-color: transparent;
        appearance: none;
        background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.06)) padding-box,
                    linear-gradient(135deg, #5ea3ff, #7a6aff) border-box;
        border: 1px solid transparent;
        color: #fff;
        padding: 14px 22px;
        border-radius: 999px; /* pill */
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        text-decoration: none;
        display: inline-block;
        box-shadow: 0 8px 20px rgba(90,120,255,0.35), inset 0 1px 0 rgba(255,255,255,0.25);
        transition: transform .08s ease, box-shadow .2s ease, filter .2s ease;
    }
    
    button:hover, .btn-primary:hover { filter: brightness(1.06); }
    button:active, .btn-primary:active { transform: translateY(1px) scale(0.99); box-shadow: 0 6px 16px rgba(90,120,255,0.3), inset 0 1px 0 rgba(255,255,255,0.2); }
    button:focus-visible, .btn-primary:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(10,132,255,0.35), 0 10px 22px rgba(90,120,255,0.35); }
    
    ul { text-align: center; list-style-position: inside; }
    .effect {
        color: #fff;
        cursor: pointer;
      }
    
    .logo {
        width: 20%;
        height: auto;
        max-width: 96px;
        display: block; /* Ensures the logo is treated as a block-level element */
        margin: 0 auto; /* Centers the logo horizontally */
    }
    
    @media (max-width: 768px) {
        .logo {
                width: 30%;
                max-width: 84px;
        }
    .button-container { padding: 0 12px; }
    .telegram-link a, .btn-primary { width: 100%; max-width: 100%; text-align:center; }
    .segmented { grid-template-columns: 1fr; }
    }