.login-modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(5px); z-index: 99999; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.4s ease; font-family: 'Poppins', sans-serif; }
.login-modal-content { background: #fff; width: 850px; max-width: 95%; height: 480px; border-radius: 20px; display: flex; position: relative; overflow: hidden; transform: translateY(50px); transition: 0.5s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 25px 50px rgba(0,0,0,0.3); }
.login-modal-overlay.show { display: flex; opacity: 1; }
.login-modal-overlay.show .login-modal-content { transform: translateY(0); }
.close-login { position: absolute; top: 15px; right: 20px; font-size: 20px; color: #999; cursor: pointer; z-index: 10; background: #f1f1f1; width: 35px; height: 35px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: 0.3s; }
.close-login:hover { background: #ff4d4d; color: white; transform: rotate(90deg); }

/* Left Side Slider */
.login-left { flex: 1.2; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; }
.login-slider { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background: #000; }
.slide-img { position: absolute; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1s ease-in-out; }
.slide-img.active { opacity: 0.6; }
.floating-badge { position: absolute; top: 30px; left: 30px; background: #D4AF37; color: #fff; padding: 10px 20px; border-radius: 30px; font-weight: bold; font-size: 14px; z-index: 5; display: flex; align-items: center; gap: 8px; animation: floatBadge 3s ease-in-out infinite; }
@keyframes floatBadge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.shake-icon { animation: shake 2s infinite; font-size: 18px; }
@keyframes shake { 0%, 100% {transform: rotate(0);} 10%, 30%, 50%, 70%, 90% {transform: rotate(-10deg);} 20%, 40%, 60%, 80% {transform: rotate(10deg);} }
.login-promo-text { position: relative; z-index: 5; padding: 40px; color: white; }
.login-promo-text h3 { font-size: 28px; margin-bottom: 5px; }
.login-promo-text p { font-size: 14px; opacity: 0.9; }

/* Right Side Forms */
.login-right { flex: 1; padding: 50px 40px; display: flex; flex-direction: column; justify-content: center; background: #fff; }
.login-right h2 { font-size: 24px; color: #333; margin-bottom: 5px; display: flex; align-items: center; gap: 10px; }
.subtitle { font-size: 13px; color: #777; margin-bottom: 25px; }
.wave-icon { display: inline-block; animation: wave 2.5s infinite; transform-origin: 70% 70%; }
@keyframes wave { 0%, 60%, 100% { transform: rotate(0deg); } 10%, 30% { transform: rotate(14deg); } 20%, 40% { transform: rotate(-8deg); } 50% { transform: rotate(10deg); } }
.pulse-shield { color: #1B4D3E; animation: pulse 1.5s infinite; }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.2); } }

.input-container { position: relative; margin-bottom: 15px; }
.input-icon { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: #aaa; }
.input-container input { width: 100%; padding: 14px 15px 14px 45px; border: 2px solid #eee; border-radius: 8px; font-size: 14px; outline: none; background: #fcfcfc; transition: 0.3s; }
.input-container input:focus { border-color: #1B4D3E; background: #fff; }
.input-container input:focus + .input-icon { color: #1B4D3E; }
.terms-text { font-size: 11px; color: #888; margin-bottom: 25px; }
.terms-text a { color: #D4AF37; font-weight: bold; text-decoration: none; }

.btn-premium { width: 100%; padding: 15px; background: #e0e0e0; color: #888; border: none; border-radius: 8px; font-size: 15px; font-weight: 600; cursor: not-allowed; position: relative; display: flex; justify-content: center; align-items: center; transition: 0.3s; }
.btn-premium.active-btn { background: linear-gradient(45deg, #1B4D3E, #2A725A); color: white; cursor: pointer; box-shadow: 0 4px 15px rgba(27, 77, 62, 0.3); }
.btn-premium.active-btn:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(27, 77, 62, 0.5); }
.btn-loader { display: none; width: 20px; height: 20px; border: 3px solid rgba(255,255,255,0.3); border-bottom-color: #fff; border-radius: 50%; animation: rotation 1s linear infinite; }
.btn-loading .btn-text { display: none; }
.btn-loading .btn-loader { display: block; }
@keyframes rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

.resend-box { text-align: center; margin-top: 25px; }
.timer-circle { display: inline-block; background: #f1f1f1; padding: 5px 15px; border-radius: 20px; font-weight: 600; color: #1B4D3E; margin-bottom: 5px; }
.resend-action { background: none; border: 2px solid #1B4D3E; color: #1B4D3E; padding: 8px 20px; border-radius: 20px; font-weight: 600; cursor: pointer; width: 100%; transition: 0.3s; }
.resend-action:hover { background: #1B4D3E; color: white; }
.edit-btn { cursor: pointer; color: #999; font-size: 12px; margin-left: 10px; transition: 0.3s; }
.edit-btn:hover { color: #f05a28; }

@media(max-width: 768px) { .login-left { display: none; } .login-modal-content { height: auto; max-width: 90%; } .login-right { padding: 40px 20px; } }