/* Custom Arabic font */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;700&family=Roboto+Mono:wght@400;700&display=swap');

/* Apply custom font and styles */
    body {
        color: #ffffff; /* from text-white */
        align-items: center;
        justify-content: center;
        min-height: 100vh;
        margin: 0;
        padding: 1rem;
        box-sizing: border-box;
        touch-action: manipulation;
    }

    /* Time display uses a monospace font */
    .time-display-font {
        font-family: 'Roboto Mono', monospace;
    }

    /* Main stopwatch container */
    .stopwatch-container {
        width: 100%;
        max-width: 28rem; /* from max-w-md */
        margin: auto auto 2rem auto;
        padding: 1.5rem; /* from p-6 */
        background-color: #1f2937; /* from bg-gray-800 */
        border-radius: 1rem; /* from rounded-2xl */
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); /* from shadow-2xl */
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 2rem; /* from space-y-8 */
    }

    /* Title */
    .stopwatch-title {
        font-size: 1.875rem; /* from text-3xl */
        font-weight: 700; /* from font-bold */
        text-align: center;
        color: #22d3ee; /* from text-cyan-400 */
        padding-top: 2rem; /* from pt-8 */
    }

    /* Time Display */
    #time-display {
        font-size: 2rem; /* from text-5xl */
        text-align: center;
        letter-spacing: 0.05em; /* from tracking-wider */
        background-color: #111827; /* from bg-gray-900 */
        padding: 1.5rem; /* from p-6 */
        border-radius: 0.5rem; /* from rounded-lg */
        box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05); /* from shadow-inner */
    }

    /* Milliseconds Display */
    #milliseconds-display {
        font-size: 1.5rem; /* from text-2xl */
        text-align: center;
        color: #9ca3af; /* from text-gray-400 */
        margin-top: -1rem; /* from -mt-4 */
    }

    /* Container for the control buttons */
    .buttons-container {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1rem; /* from gap-4 */
    }

    /* Common styles for all control buttons */
    .control-button {
        color: #ffffff;
        font-weight: 700;
        padding: 0.75rem 1rem;
        border-radius: 0.5rem;
        font-size: 1.125rem;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
        border: none;
        cursor: pointer;
        transition: all 0.1s ease-in-out;
    }

    .control-button:active {
        transform: scale(0.95);
        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    }

    .control-button:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

    /* Individual button colors */
    #startBtn { background-color: #22c55e; /* from bg-green-500 */ }
    #startBtn:hover:not(:disabled) { background-color: #16a34a; /* from hover:bg-green-600 */ }
    #pauseBtn { background-color: #ef4444; /* from bg-red-500 */ }
    #pauseBtn:hover:not(:disabled) { background-color: #dc2626; /* from hover:bg-red-600 */ }
    #resetBtn { background-color: #4b5563; /* from bg-gray-600 */ }
    #resetBtn:hover:not(:disabled) { background-color: #374151; /* from hover:bg-gray-700 */ }

    /* Mute Button custom styling */
    #muteBtn {
        position: absolute;
        top: 1rem;
        left: 1rem; /* Adjusted for RTL */
        color: #9ca3af;
        padding: 0.5rem;
        border-radius: 9999px;
        background: none;
        box-shadow: none;
    }
    #muteBtn:hover {
        color: #ffffff;
    }

    /* Responsive adjustments for medium screens and up */
    @media (min-width: 576px) {

        #time-display { font-size: 2.5rem; /* from md:text-7xl */ }
        #milliseconds-display { font-size: 1.2rem; /* from md:text-3xl */ }
    }