.example3 {
    max-width: 500px;
}

.example3 .form-group {
    margin-bottom: 20px;
    position: relative;
}

.example3 label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #2c3e50;
}

.example3 input {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #bdc3c7;
    border-radius: 8px;
    font-size: 16px;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

/* Required field base styles */
.example3 input:required {
    border-color: #3498db;
}

/* Optional field base styles */
.example3 input:optional {
    border-color: #95a5a6;
}

/* Valid required fields */
.example3 input:required:valid {
    border-color: #27ae60;
    background-image: url("data:image/svg+xml;charset=utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='%2327ae60' d='m6.564.75-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 40px;
}

/* Invalid required fields */
.example3 input:required:invalid:not(:placeholder-shown) {
    border-color: #e74c3c;
    background-image: url("data:image/svg+xml;charset=utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path fill='%23e74c3c' d='M6 0C2.7 0 0 2.7 0 6s2.7 6 6 6 6-2.7 6-6-2.7-6-6-6zm2.5 8.5L7 7 5.5 8.5 4 7l1.5-1.5L4 4l1.5-1.5L7 4l1.5-1.5L10 4 8.5 5.5 10 7l-1.5 1.5z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 40px;
}

/* Optional valid fields */
.example3 input:optional:valid:not(:placeholder-shown) {
    border-color: #27ae60;
}

/* Focus states */
.example3 input:required:focus {
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
}

.example3 input:optional:focus {
    box-shadow: 0 0 0 3px rgba(149, 165, 166, 0.2);
}

/* Label indicators */
.example3 .form-group:has(input:required) label::after {
    content: " *";
    color: #e74c3c;
    font-weight: bold;
}

.example3 .form-group:has(input:optional) label::after {
    content: " (optional)";
    color: #7f8c8d;
    font-size: 0.9em;
    font-weight: normal;
}

.example3 .submit-btn {
    background-color: #3498db;
    color: white;
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.example3 .submit-btn:hover {
    background-color: #2980b9;
}