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

    .sounds {
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 350px), 1fr));
        gap: 1.25rem;
    }
}

@media screen and (max-width:781px) {
    .setting {
        grid-template-columns: repeat(1, 1fr);
    }
}

@media (max-width: 768px) {

    .prayer-time-item {
        width: 100%;
        padding: 10px 13px;
    }

    .countdown-hours,
    .countdown-minutes,
    .countdown-seconds {
        font-size: 1.2rem;
        min-width: 40px;
        padding: 6px 10px;
        display: grid;
        place-items: center;
    }

    .current-prayer-name,
    .next-prayer-name {
        font-size: 1.5rem;
    }
}

@media screen and (max-width:700px) {
    .tab {
        display: flex;
        align-items: center;
        justify-content: center;
        height: max-content;
        width: 100%;
        border: 3px solid var(--Gold);
        border-right: none;
        border-left: none;
    }

    header {
        border-bottom: none;
    }

    .NavScreen {
        margin: 20px 20px 0 20px;
        display: block;
        max-height: calc(100dvh - 150px);
        width: 100%;
        border-color: var(--Gold);
        border-width: 3px;
    }

    .tabs:first-child {
        display: none;
    }

    .tab>button {
        display: none;
    }

    .tab-label {
        height: 50px;
        font-size: 20px;
    }

    .NavScreen summary {
        padding: 12px 15px;
        font-size: 22px;
    }

    .NavScreen button {
        font-size: 18px;
        height: 45px;
    }

    .NavScreen.open ul {
        max-height: 300px;
    }

    .leftdevsection {
        display: none;
    }

    .hidden {
        display: flex;
    }
}

@media screen and (max-width: 650px) {
    .current-next-prayerTimes {
        flex-direction: column;
    }
}

@media screen and (max-width:600px) {
    .names {
        grid-template-columns: 1fr;
    }

    /* Fix for prayer times grid on small screens */
    .prayer-times-grid {
        grid-template-columns: 1fr !important;
        /* Force single column */
        gap: 0.8rem;
    }

    .prayer-time-item {
        padding: 10px 12px;
        flex-direction: row;
        justify-content: space-between;
    }

    .prayer-time-name {
        font-size: 1rem;
    }

    .prayer-time-value {
        font-size: 1rem;
    }
}

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

    #prayer {
        width: 93vw;
    }

    .ShekhSounds {
        grid-template-columns: repeat(1, 1fr);
    }

    .surahInputWrapper,
    .countryInputWrapper,
    .NameInputWrapper,
    .showall,
    .showallNames,
    .SoundInputWrapper,
    .showallSounds,
    .UseLocation {
        width: 93vw;
        justify-content: center;
        align-items: center;
    }
}

@media (max-width: 480px) {
    .prayer-time-item {
        width: 100%;
        flex-direction: column;
        /* Changed from column to row */
        text-align: left;
        /* Changed from center to left */
        gap: 10px;
        padding: 10px 12px;
        /* Reduced padding */
    }

    .prayer-time-item>div {
        align-self: start;
    }

    .countdown-timer {
        flex-wrap: wrap;
    }

    /* Additional fixes for very small screens */
    .prayer-times-grid {
        gap: 0.6rem;
    }

    .prayer-time-name,
    .prayer-time-value {
        font-size: 1.1rem;
        white-space: nowrap;
    }
}

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

    .setting1,
    .counter>div {
        flex-direction: column;
        align-items: start;
        justify-content: center;
        gap: 1rem;
    }

    .Namebtns,
    .CounterControls {
        width: 100%;
        display: flex;
        justify-content: space-between;
        gap: .8rem;
        margin-top: 0.620rem;
    }

    .Namebtns>button,
    .CounterControls>button {
        width: 100%;
    }
}

@media screen and (max-width:440px) {
    .UserNameForm {
        flex-direction: column;
        justify-content: center;
        width: 100%;
    }

    .NameSubmit {
        width: 100%;
    }

    .one {
        display: none;
    }

    .two {
        display: flex;
    }

    .timeshow {
        font-size: max(2vw, 20px);
    }

    /* Additional prayer time fixes for very small screens */
    .prayer-time-item>div {
        flex-direction: row;
        gap: 5px;
    }

    .prayer-time-name,
    .prayer-time-value {
        font-size: 0.85rem;
    }
}

@media screen and (max-width:400px) {
    #counter_azkar {
        font-size: 40px;
        margin-bottom: 10px;
    }

    .prayer-times-grid {
        display: flex;
        flex-direction: column;
        /* Force single column layout */
        gap: 0.8rem;
    }

    .prayer-time-item {
        min-width: 0;
        /* Allow items to shrink */
        max-width: 100%;
        /* Prevent overflow */
    }

    /* Fix for prayer countdown on very small screens */
    .countdown-timer {
        gap: 4px;
    }

    .countdown-hours,
    .countdown-minutes,
    .countdown-seconds {
        font-size: 1.1rem;
        min-width: 35px;
        padding: 5px 8px;
    }
}

@media screen and (max-width:313px) {
    .surahInputWrapper>input {
        font-size: 20px;
    }

    /* Final adjustments for extremely small screens */
    .prayer-time-item {
        padding: 6px 8px;
    }

    .prayer-time-name,
    .prayer-time-value {
        font-size: 0.8rem;
    }
}