.renew-page{min-height:100vh;background:linear-gradient(135deg,#667eea,#764ba2);padding:40px 20px}.renew-container{max-width:600px;margin:0 auto}.renew-header{text-align:center;color:white;margin-bottom:40px}.renew-header h1{font-size:36px;margin-bottom:10px;font-weight:700}.renew-header p{font-size:18px;opacity:.9}.progress-steps{display:flex;justify-content:space-between;margin-bottom:40px;position:relative}.progress-steps:before{content:"";position:absolute;top:20px;left:10%;right:10%;height:2px;background:rgba(255,255,255,.3);z-index:0}.progress-step{flex-direction:column;gap:8px;color:rgba(255,255,255,.6);position:relative;z-index:1}.progress-step,.step-number{display:flex;align-items:center}.step-number{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.2);justify-content:center;font-weight:600;transition:all .3s}.progress-step.active .step-number{background:#FDD802;color:#0058A9;transform:scale(1.1)}.progress-step.completed .step-number{background:#4CAF50;color:white}.progress-step span{font-size:14px;font-weight:500}.renewal-card{background:white;border-radius:20px;padding:40px;box-shadow:0 20px 60px rgba(0,0,0,.3);animation:slideUp .4s ease-out}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.renewal-title{font-size:28px;color:#0058A9;margin-bottom:10px;font-weight:700}.renewal-subtitle{color:#666;margin-bottom:30px;font-size:16px}.renewal-form{display:flex;flex-direction:column;gap:20px}.form-group label{display:block;margin-bottom:8px;color:#0058A9;font-weight:600;font-size:14px}.renewal-input{width:100%;padding:14px 16px;border:2px solid #e0e0e0;border-radius:12px;font-size:16px;transition:all .3s}.renewal-input:focus{outline:none;border-color:#0058A9;box-shadow:0 0 0 3px rgba(0,88,169,.1)}.renewal-input.text-center{text-align:center;font-size:24px;letter-spacing:8px;font-weight:600}.form-hint{display:block;margin-top:6px;color:#999;font-size:13px}.file-input{padding:12px;border:2px dashed #e0e0e0;border-radius:12px;cursor:pointer;transition:all .3s}.file-input:hover{border-color:#0058A9;background:#f8f9fa}.image-preview{margin-top:15px;border-radius:12px;overflow:hidden;border:2px solid #e0e0e0}.image-preview img{width:100%;height:auto;display:block}.divider{display:flex;align-items:center;text-align:center;margin:20px 0;color:#999}.divider:after,.divider:before{content:"";flex:1 1;border-bottom:1px solid #e0e0e0}.divider span{padding:0 15px;font-weight:600;font-size:14px}.renewal-button{background:linear-gradient(135deg,#0058A9,#003d75);color:white;padding:16px 32px;border:none;border-radius:12px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s}.renewal-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,88,169,.3)}.renewal-button:disabled{opacity:.5;cursor:not-allowed}.button-secondary{background:white;color:#0058A9;padding:16px 32px;border:2px solid #0058a9;border-radius:12px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s}.button-secondary:hover:not(:disabled){background:#f8f9fa}.button-secondary.full-width{width:100%}.button-group{display:flex;gap:15px;margin-top:20px}.button-group.vertical{flex-direction:column}.alert{padding:16px 20px;border-radius:12px;margin-bottom:20px;font-weight:500}.alert-warning{background:#fff3cd;color:#856404;border-left:4px solid #ffc107}.alert-danger,.alert-error{background:#f8d7da;color:#721c24;border-left:4px solid #dc3545}.info-section{background:#f8f9fa;padding:20px;border-radius:12px;margin-bottom:25px}.info-section h3{color:#0058A9;font-size:18px;margin-bottom:15px;font-weight:600}.info-grid{display:grid;gap:12px}.info-item{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid #e0e0e0}.info-item:last-child{border-bottom:none}.info-label{color:#666;font-weight:500}.info-value{color:#333;font-weight:600}.breakdown-section{margin-bottom:25px}.breakdown-section h3{color:#0058A9;font-size:18px;margin-bottom:15px;font-weight:600}.breakdown-list{background:#f8f9fa;padding:20px;border-radius:12px}.breakdown-item{display:flex;justify-content:space-between;padding:12px 0;color:#333}.breakdown-item.highlight{color:#0058A9;font-weight:600}.breakdown-item.penalty{color:#dc3545;font-weight:600}.breakdown-item.total{font-size:20px;font-weight:700;color:#0058A9;padding-top:15px}.breakdown-divider{height:2px;background:#e0e0e0;margin:10px 0}.amount{font-weight:600}.new-expiry{background:linear-gradient(135deg,#4CAF50,#45a049);padding:20px;border-radius:12px;margin-bottom:25px}.expiry-badge{display:flex;flex-direction:column;align-items:center;gap:8px;color:white}.expiry-badge span{font-size:14px;opacity:.9}.expiry-badge strong{font-size:20px;font-weight:700}.payment-info{background:linear-gradient(135deg,#FDD802,#e5c402);padding:25px;border-radius:12px;margin-bottom:25px;text-align:center}.payment-amount{display:flex;flex-direction:column;gap:8px}.payment-amount span{color:#0058A9;font-size:14px;font-weight:600}.amount-large{font-size:36px;font-weight:700;color:#0058A9}.payment-methods{display:flex;flex-direction:column;gap:12px}.payment-method{display:flex;align-items:center;gap:12px;padding:16px;border:2px solid #e0e0e0;border-radius:12px;cursor:pointer;transition:all .3s}.payment-method.active{border-color:#0058A9;background:#f0f7ff}.payment-method.disabled{opacity:.5;cursor:not-allowed}.payment-method input[type=radio]{width:20px;height:20px}.form-group .checkbox-label{display:flex;align-items:center;gap:10px;cursor:pointer;margin-top:4px;font-weight:400;color:#0058A9;font-weight:500}.form-group .checkbox-label input[type=checkbox]{width:18px;height:18px;cursor:pointer;margin:0;flex-shrink:0}.form-group .checkbox-label span{line-height:1.4}.success-card{text-align:center}.success-animation{margin-bottom:30px}.checkmark-circle{width:100px;height:100px;margin:0 auto;background:linear-gradient(135deg,#4CAF50,#45a049);border-radius:50%;display:flex;align-items:center;justify-content:center;animation:scaleIn .5s ease-out}@keyframes scaleIn{0%{transform:scale(0)}to{transform:scale(1)}}.checkmark{font-size:60px;color:white;font-weight:700;animation:checkmarkPop .3s ease-out .3s both}@keyframes checkmarkPop{0%{transform:scale(0)}to{transform:scale(1)}}.success-title{color:#4CAF50}.success-details{margin:30px 0;gap:15px}.detail-card,.success-details{display:flex;flex-direction:column}.detail-card{background:#f8f9fa;padding:20px;border-radius:12px;gap:8px}.detail-card.highlight{background:linear-gradient(135deg,#FDD802,#e5c402)}.detail-label{font-size:14px;color:#666;font-weight:500}.detail-card.highlight .detail-label{color:#0058A9}.detail-value{font-size:18px;font-weight:700;color:#333}.arrow-down,.detail-value.new-ticket{font-size:24px;color:#0058A9}.notice-box{background:#e3f2fd;padding:20px;border-radius:12px;text-align:left;margin:25px 0;border-left:4px solid #0058a9}.notice-box h4{color:#0058A9;margin-bottom:12px;font-size:16px}.notice-box ul{list-style:none;padding:0;margin:0}.notice-box li{padding:8px 0;color:#333;line-height:1.6}.contact-info{margin-top:30px;padding-top:20px;border-top:2px solid #e0e0e0;color:#666;font-size:14px}@media (max-width:768px){.renew-page{padding:20px 15px}.renewal-card{padding:25px 20px}.renew-header h1{font-size:28px}.renewal-title{font-size:24px}.button-group{flex-direction:column}.progress-step span{font-size:12px}.step-number{width:35px;height:35px}}