body{font-family:Arial,sans-serif;margin:0;display:flex;justify-content:center;align-items:center;height:100vh;background:linear-gradient(to bottom,#fedc97,#28666e);overflow:hidden;position:relative;}
.container{position:relative;width:800px;height:500px;background:#fff;border-radius:12px;box-shadow:0 4px 10px rgba(0,0,0,0.1);overflow:hidden;display:flex;transition:transform 0.6s ease-in-out;margin:auto;}
.container.register-active{transform:translateX(-100%);}
.panel{flex:1;padding:40px;display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:#28666e;color:white;}
.left,.right{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:opacity 0.6s ease-in-out;}
.left h2,.right h2{font-size:28px;margin-bottom:20px;}
.left p,.right p{font-size:16px;text-align:center;margin-bottom:20px;}
.social-icons{display:flex;gap:10px;margin-bottom:10px;margin-top:20px;}
.social-icons a{display:inline-flex;justify-content:center;align-items:center;width:40px;height:40px;border:1px solid #ccc;border-radius:50%;text-decoration:none;color:#555;}
form{display:flex;flex-direction:column;gap:15px;width:100%;}
input{width:100%;padding:10px;border:1px solid #fff;border-radius:8px;background-color:#ffffff;color:#28666e;}
a{text-decoration:none;color:#fedc97;font-size:14px;text-align:right;}
button{background-color:#fedc97;color:#28666e;padding:10px;border:none;border-radius:8px;font-size:16px;cursor:pointer;width:100%;}
button:hover{background-color:#f8d08c;}
.green-bg{background-color:#4b8a7f;color:white;}
.green-bg button{background-color:white;color:#4b8a7f;padding:10px 20px;border-radius:8px;border:none;font-size:16px;cursor:pointer;}
.green-bg button:hover{background-color:#e8f8ec;}
.nav-container{display:flex;justify-content:center;align-items:center;width:100%;position:fixed;top:0;left:0;padding:10px 20px;background-color:#28666e;z-index:1000;}
.nav-left{position:absolute;left:20px;top:50%;transform:translateY(-50%);}
.nav-left a{color:#fedc97;text-decoration:none;font-size:1.2em;display:flex;align-items:center;}
.nav-left a i{margin-right:8px;}
.logo{display:flex;justify-content:center;align-items:center;flex-grow:15;}
.logo img{max-height:70px;width:auto;}
.nav-right{display:flex;align-items:center;flex-grow:1;}
.nav-right a{margin:0 15px;color:#fedc97;text-decoration:none;font-size:1.2em;}
.nav-right a:hover{text-decoration:underline;color:#ffffff;}
.nav-right a .cart-icon{font-size:1.5em;vertical-align:middle;transition:color 0.3s ease;}
.nav-right a:hover .cart-icon{color:#ffc107;}
.image-container{width:100%;height:150px;display:flex;justify-content:center;align-items:center;margin-bottom:20px;}
.image-container img{max-width:100%;max-height:100%;border-radius:12px;object-fit:cover;}
.hidden{display:none;}
.switch-btn{background:none;border:none;color:#fedc97;cursor:pointer;text-decoration:underline;font-size:14px;}
.switch-btn:hover{color:#f8d08c;}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}.panel{animation:fadeIn 0.5s;}