#shoe-size-converter { max-width: 50%; width: 100%; margin: 25px auto; padding: 25px; border: 1px solid #999; border-radius: 15px; background-color: #e0e0e0; }
#shoe-size-converter h2 { text-align: center; color: #0056b3; margin-bottom: 15px; font-size: 1.8em; font-weight: bold; line-height: 1em; }
#shoeBtn { display: block; width: 100%; padding: 12px 20px; background: linear-gradient(45deg, #007bff, #0056b3); color: white; border: none; border-radius: 8px; font-size: 1.1em; cursor: pointer; transition: all 0.3s ease; margin-top: 25px; box-shadow: 0 4px 10px rgba(0,123,255,0.3); font-weight: bold; }
#shoeBtn:hover { background: linear-gradient(45deg, #0056b3, #003f7f); box-shadow: 0 6px 15px rgba(0,123,255,0.4); transform: translateY(-2px); }
.form-group { margin-bottom: 18px; }
.form-group label { display: flex; align-items: center; justify-content: flex-start; margin-bottom: 7px; font-weight: 600; color: #444; font-size: 1em; }
.form-group input[type="text"], .form-group input[type="number"], .form-group input[type="date"], .form-group select { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 8px; box-sizing: border-box; font-size: 1em; background-color: #ffffff; transition: border-color 0.3s ease, box-shadow 0.3s ease; }
.form-group input[type="text"]:focus, .form-group input[type="number"]:focus, .form-group input[type="date"]:focus, .form-group select:focus { border-color: #007bff; box-shadow: 0 0 0 3px rgba(0,123,255,0.25); outline: none; }
@media (max-width: 800px) { #shoe-size-converter { margin: 10px auto; padding: 20px; border-radius: 10px; max-width: 100%; } #shoe-size-converter h2 { font-size: 1.5em; margin-bottom: 15px; } #shoeBtn { padding: 10px 15px; font-size: 1em; margin-top: 25px; } .form-group label { font-size: 0.9em; } .form-group input[type="text"], .form-group select { padding: 8px; font-size: 0.9em; } }