@charset "utf-8";
.book-appointment {  display: inline-block;  padding: 10px 20px;  background: linear-gradient(135deg, #4CAF50, #2E8B57); color: #fff; font-size: 16px; font-weight: bold;  border-radius: 30px; text-decoration: none; transition: all 0.3s ease-in-out;  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);}
.book-appointment:hover {  background: linear-gradient(135deg, #2E8B57, #4CAF50); transform: translateY(-3px); box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);}
.book-appointment:active { transform: scale(0.95);}
.modal { display: none; position: fixed; z-index: 9999; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); overflow-y: auto; }
.modal-content { background: #fff; margin: 20px auto; width: 90%; max-width: 600px; max-height: 100vh; border-radius: 22px; box-shadow: 0 6px 18px rgba(0,0,0,0.25); animation: fadeIn 0.3s ease; position: relative; display: flex; flex-direction: column; padding: 10px; }
.modal .close { position: absolute; top: 12px; right: 15px; font-size: 22px; cursor: pointer; color: #444; transition: color 0.3s; }
.modal .close:hover { color: #000; }
/*.tabs { display: flex; justify-content: space-between; margin-bottom: 15px; border-radius: 8px; overflow: hidden; }
.tab-link { flex: 1; padding: 15px; border: none; cursor: pointer; background: #f1f1f1; font-weight: bold; transition: all 0.3s ease; }
.tab-link.active { background: #007bff; color: #fff; }
.tab-link:hover { background: #e4e4e4; }*/
.tabs {  display: flex;  justify-content: space-between;  margin-bottom: 20px;  border-radius: 10px;  overflow: hidden;  background: #f8f9fa;  box-shadow: 0 3px 8px rgba(0,0,0,0.1);border: 1px solid #ddd;}
.tab-link {  flex: 1;  padding: 14px;  text-align: center;  border: none;  cursor: pointer;  background: transparent;  font-weight: 600;  font-size: 15px;  color: #555;  transition: all 0.3s ease;}
.tab-link:hover {  background: #e9ecef;  color: #000;}
.tab-link.active {  background: linear-gradient(135deg, #4CAF50, #2E8B57);  color: #fff;  box-shadow: inset 0 -3px 6px rgba(0,0,0,0.2);}

.btn-submit {  display: inline-block; width: 70%; padding: 12px 20px; background: linear-gradient(135deg, #4CAF50, #2E8B57); color: #fff; font-size: 16px; font-weight: bold; border-radius: 30px; text-align: center; border: none; cursor: pointer; transition: all 0.3s ease-in-out; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);}
.btn-submit:hover { background: linear-gradient(135deg, #2E8B57, #4CAF50); transform: translateY(-3px); box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);}
.btn-submit:active {transform: scale(0.95);}
.tab-content {display: none; max-height: 100vh; overflow-y: auto; padding: 20px; background: #fff; border-radius: 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); animation: fadeIn 0.4s ease-in-out; transition: all 0.3s ease-in-out;}
.tab-content.active { display: block;}
@keyframes fadeIn {from {opacity: 0; transform: translateY(10px);}
  to {opacity: 1;transform: translateY(0);}}
.tab-content::-webkit-scrollbar { width: 6px;}
.tab-content::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 10px;}
.tab-content::-webkit-scrollbar-thumb { background: #4CAF50; border-radius: 10px;}
.tab-content::-webkit-scrollbar-thumb:hover { background: #2E8B57;}
/*@keyframes fadeIn { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }*/
.auth-form { padding: 10px; display: flex; flex-direction: column; height: 100%; }
.auth-form h2 { text-align: center; margin-bottom: 15px; color: #222; font-size: 22px; font-weight: 700; position: sticky; top: 0; background: #fff; padding: 12px 0; z-index: 10; border-bottom: 1px solid #eee; }
.form-group { margin: 0 auto 15px auto; display: flex; align-items: center; justify-content: space-between; width: 500px; }
.form-group label { flex: 1; font-weight: 600; font-size: 14px; margin-right: 10px; }
.form-group input, .form-group select { flex: 2; width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 15px; outline: none; transition: border-color 0.3s, box-shadow 0.3s; }
.form-group input:focus, .form-group select:focus { border-color: #007bff; box-shadow: 0 0 6px rgba(0,123,255,0.3); }
.btn-row { display: flex; justify-content: center; gap: 15px; margin-top: 15px; }
.btn-submit, .btn-reset { font-size: 15px; padding: 10px 18px; border: none; border-radius: 8px; cursor: pointer; transition: all 0.3s ease; }
.btn-submit { background: #007bff; color: #fff; }
.btn-submit:hover { background: #0056b3; }
.btn-reset { background: #f44336; color: #fff; }
.btn-reset:hover { background: #c0392b; }
small { font-size: 13px; margin-top: 4px; display: block; }
small[style*="green"] { font-weight: 600; }
.mobile-wrapper, .captcha-wrapper { display: flex; gap: 6px; }
.captcha-wrapper button { padding: 8px 12px; border: none; border-radius: 6px; background: #f1f1f1; cursor: pointer; font-weight: bold; }
.captcha-wrapper button:hover { background: #ddd; }
.password-wrapper { position: relative; display: flex; align-items: center; }
.password-wrapper input { width: 100%; padding-right: 40px; }
.toggle-password { position: absolute; right: 10px; cursor: pointer; font-size: 18px; user-select: none; top: 50%; transform: translateY(-50%); }
input.success, select.success { border-color: #28a745; box-shadow: 0 0 6px rgba(40,167,69,0.4); }
input.error, select.error { border-color: #dc3545; box-shadow: 0 0 6px rgba(220,53,69,0.4); }
@media (max-width: 480px) { .modal-content { width: 95%; padding: 15px; } .auth-form h2 { font-size: 20px; } .form-group input, .form-group select { font-size: 14px; padding: 10px; } .btn-submit, .btn-reset { font-size: 14px; padding: 8px 14px; } }