/* css/stylesss.css */

        body { 
            font-family: Arial, sans-serif; 
            padding: 20px; 
            margin: 0;
            background-color: #f8f9fa;
        }
        #taxiForm { 
            display: none; 
            margin-top: 20px; 
            border: 1px solid #ccc; 
            padding: 15px; 
            border-radius: 5px; 
            background-color: #fff;
            max-width: 100%;
            box-sizing: border-box;
        }
        label { 
            display: block; 
            margin-top: 10px; 
            font-size: 16px;
        }
        input[type="text"], 
        input[type="tel"], 
        input[type="datetime-local"], 
        textarea { 
            width: 100%; 
            padding: 10px; 
            margin-top: 5px; 
            border: 1px solid #ccc; 
            border-radius: 4px; 
            font-size: 16px; 
            box-sizing: border-box;
        }
        input[type="radio"] {
            margin: 0 5px 0 0;
        }
        .radio-group {
            display: flex;
            align-items: center;
            gap: 30px;
            margin-top: 5px;
        }
        .radio-group div {
            display: flex;
            align-items: center;
            gap: 5px;
        }
        button { 
            margin-top: 15px; 
            padding: 12px 20px; 
            background-color: #25d366; 
            color: white; 
            border: none; 
            border-radius: 4px;
            cursor: pointer; 
            font-size: 16px; 
            width: 100%;
            box-sizing: border-box;
        }
        button:hover { 
            background-color: #20b858; 
        }
        button.loading::after {
            content: '';
            display: inline-block;
            width: 16px;
            height: 16px;
            border: 2px solid #fff;
            border-radius: 50%;
            border-top-color: transparent;
            animation: spin 1s linear infinite;
            margin-left: 10px;
        }
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        #loadingMessage { 
            color: #555; 
            font-size: 16px; 
        }
        #errorMessage { 
            color: #d9534f; 
            font-weight: bold; 
            font-size: 16px; 
            aria-live: "polite";
        }
        #locationInfo { 
            margin-bottom: 15px; 
            font-size: 16px;
        }
        #phoneError, #nameError, #destinationError, #dateTimeError { 
            color: #d9534f; 
            font-size: 14px; 
            margin-top: 5px; 
            aria-live: "polite";
        }
        #dateTimeContainer {
            margin-top: 10px;
        }
        #orderNumberDisplay {
            color: #ff2400;
            font-size: 16px;
            font-weight: bold;
            margin-top: 15px;
            margin-bottom: 15px;
            text-align: left;
        }
        #orderNumberDisplay .label {
            color: #4FCE5D;
        }
        @media (max-width: 600px) {
            body { padding: 10px; }
            #taxiForm { padding: 10px; }
            input[type="text"], 
            input[type="tel"], 
            input[type="datetime-local"], 
            textarea { 
                font-size: 14px; 
                padding: 8px; 
            }
            input[type="radio"] { 
                margin: 0 4px 0 0;
            }
            .radio-group {
                gap: 20px;
            }
            .radio-group div {
                gap: 4px;
            }
            button { 
                font-size: 14px; 
                padding: 10px; 
            }
            h1 { font-size: 22px; }
            label { font-size: 14px; }
            #loadingMessage, #errorMessage, #locationInfo { font-size: 14px; }
            #phoneError, #nameError, #destinationError, #dateTimeError { font-size: 12px; }
            #dateTimeContainer { margin-top: 8px; }
            #orderNumberDisplay { font-size: 14px; }
        }