@import url('https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');    
    body{
      background:linear-gradient(135deg,#FBAF2B 0%,#FFD700 100%);
      min-height:80vh;display:flex;align-items:center;justify-content:center;padding:20px;
      font-family: kanit, sans-serif;
    }
    .register-container{background:#fff;border-radius:20px;box-shadow:0 20px 40px rgba(0,0,0,.1);overflow:hidden;display:flex;min-height:700px}
    .register-image{flex:1;background:linear-gradient(135deg,#FBAF2B 0%,#FFD700 100%);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
    .register-image::before{content:'';position:absolute;inset:0;background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="white" opacity="0.1"/><circle cx="75" cy="75" r="1" fill="white" opacity="0.1"/><circle cx="50" cy="10" r="0.5" fill="white" opacity="0.1"/><circle cx="10" cy="60" r="0.5" fill="white" opacity="0.1"/><circle cx="90" cy="40" r="0.5" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>')}
    .register-image-content{color:#fff;z-index:1;text-align:center;padding:40px}
    .register-image-content i{font-size:4rem;margin-bottom:20px;opacity:.9}
    .register-image-content h2{font-size:2rem;margin-bottom:15px;font-weight:600}
    .register-image-content p{font-size:1.1rem;opacity:.9;line-height:1.6;margin-bottom:30px}
    .feature-list{text-align:left;opacity:.9}
    .feature-list li{margin-bottom:10px;display:flex;align-items:center;gap:10px}
    .feature-list i{font-size:1rem;width:20px}

    .register-form {
  flex: none;
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
    .register-header{text-align:center;margin-bottom:30px}
    .register-header h1{color:#2c3e50;font-size:2.2rem;margin-bottom:10px}
    .register-header p{color:#666}
    .form-row{display:flex;gap:15px;}
    .form-group{margin-bottom:20px;flex:1}
    .form-group.full-width{flex:100%}
    .form-group label{display:block;color:#333;font-weight:600;margin-bottom:6px;font-size:.9rem}
    .input-group{position:relative}
    .input-group i{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:#666;font-size:1rem}
    .form-control{width:100%;padding:12px 12px 12px 40px;border:2px solid #e9ecef;border-radius:8px;font-size:.95rem;outline:none;transition:all .3s ease;background:#f8f9fa}
    .form-control:focus{border-color:#FBAF2B;background:#fff;box-shadow:0 0 0 3px rgba(251,175,43,.1)}
    .form-control.error{border-color:#e74c3c}
    .form-control.valid{border-color:#27ae60}
    .error-message{color:#e74c3c;font-size:.8rem;margin-top:4px;display:none}
    .success-message{color:#27ae60;font-size:.8rem;margin-top:4px;display:none}

    .password-strength{margin-top:8px}
    .strength-bar{height:3px;background:#e9ecef;border-radius:2px;overflow:hidden;margin-bottom:5px}
    .strength-fill{height:100%;transition:all .3s ease;width:0%;background:#e74c3c}
    .strength-fill.weak{background:#e74c3c;width:25%}
    .strength-fill.fair{background:#f39c12;width:50%}
    .strength-fill.good{background:#3498db;width:75%}
    .strength-fill.strong{background:#27ae60;width:100%}
    .strength-text{font-size:.8rem;color:#666}

    .checkbox-group{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px}
    .checkbox-group input[type="checkbox"]{width:18px;height:18px;accent-color:#FBAF2B;margin-top:2px;flex-shrink:0}
    .checkbox-group label{color:#666;font-size:.9rem;margin:0;line-height:1.4}
    .checkbox-group a{color:#FBAF2B;text-decoration:none}
    .checkbox-group a:hover{text-decoration:underline}

    .btn-register{width:100%;padding:14px;background:linear-gradient(135deg,#FFD700 0%,#FBAF2B 100%);color:#fff;border:none;border-radius:8px;font-size:1.05rem;font-weight:600;cursor:pointer;transition:all .3s ease;margin:15px 0 20px;display:flex;align-items:center;justify-content:center;gap:10px}
    .btn-register:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 20px rgba(251,175,43,.3)}
    .btn-register:disabled{background:#ccc;cursor:not-allowed;transform:none;box-shadow:none}

    .register-footer{text-align:center;color:#666;font-size:.9rem;margin-top:15px}
    .register-footer a{color:#FBAF2B;text-decoration:none;font-weight:500}
    .register-footer a:hover{text-decoration:underline}

    .back-to-website{position:absolute;top:20px;left:20px;color:#fff;text-decoration:none;display:flex;align-items:center;gap:8px;font-weight:500;transition:all .3s ease}
    .back-to-website:hover{transform:translateX(-5px)}

    .loading{display:none;width:18px;height:18px;border:2px solid #fff;border-top:2px solid transparent;border-radius:50%;animation:spin 1s linear infinite}
    @keyframes spin{to{transform:rotate(360deg)}}

    .success-animation{display:none;text-align:center;color:#27ae60;padding:40px}
    .success-animation i{font-size:4rem;margin-bottom:20px}
    .success-animation h3{margin-bottom:15px;font-size:1.8rem}
    .success-animation p{font-size:1.1rem;margin-bottom:25px}
    .btn-continue{background:linear-gradient(135deg,#27ae60 0%,#2ecc71 100%);color:#fff;padding:12px 30px;border:none;border-radius:8px;font-weight:600;cursor:pointer;transition:all .3s ease}
    .btn-continue:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(39,174,96,.3)}

    /* Responsive */
    @media (max-width:768px){
      .register-container{flex-direction:column;max-width:400px;min-height:auto}
      .register-image{display:none}
      .register-form{padding:30px 25px;max-height:none}
      .form-row{flex-direction:column;gap:0}
      .back-to-website{position:relative;top:auto;left:auto;color:#FBAF2B;margin-bottom:20px;justify-content:center}
    }
    @media (max-width:480px){.register-form{padding:25px 20px}}
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

/* Enhanced modal styles for privacy policy */
.modal {
  display: none;
  position: fixed;
  z-index: 2000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(12, 18, 28, 0.6);
  backdrop-filter: blur(4px);
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.modal.open { display: flex; }

.modal-content {
  background: #ffffff;
  width: 100%;
  max-width: 900px;
  max-height: 78vh;
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(8, 12, 20, 0.25);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
}

.modal-header {
  padding: 20px 28px;
  font-size: 20px;
  font-weight: 700;
  color: #2c3e50;
  display:flex;
  align-items:center;
  gap:12px;
  border-bottom: 1px solid #f1f3f5;
}

.modal-header .icon { color: #FBAF2B; font-size: 1.6rem; }

.modal-body { padding: 18px 22px; overflow:auto; flex:1; }
.scroll-box { height: 100%; min-height: 220px; }

.modal-footer { padding: 14px 22px; display:flex; gap:12px; justify-content:flex-end; align-items:center; border-top:1px solid #f1f3f5; }

.btn-accept { background: linear-gradient(135deg,#27ae60,#2ecc71); color: #fff; border: none; padding:10px 18px; border-radius:8px; cursor:pointer; font-weight:700; }
.btn-accept:disabled { opacity:0.6; cursor:not-allowed; }
.btn-cancel { background:transparent; border:1px solid #d1d5db; padding:9px 16px; border-radius:8px; cursor:pointer; }

.close-modal { position:absolute; right:12px; top:12px; background:transparent; border:none; font-size:1.4rem; color:#6b7280; cursor:pointer; padding:6px; border-radius:6px; }
.close-modal:hover { background:rgba(0,0,0,0.04); color:#111827 }

/* nicer scrollbar inside modal */
.modal-body::-webkit-scrollbar, .scroll-box::-webkit-scrollbar { height:10px; width:10px }
.modal-body::-webkit-scrollbar-thumb, .scroll-box::-webkit-scrollbar-thumb { background:#e2e8f0; border-radius:10px }
.modal-body::-webkit-scrollbar-track, .scroll-box::-webkit-scrollbar-track { background:transparent }

@media (max-width:768px){
  .modal-content{ max-width:100%; height: 92vh; border-radius:12px }
  .modal-header{ padding:14px }
  .modal-footer{ padding:12px }
}

        .link p {
            font-size: 18px;
            text-align: center;
        }
        .link a {
            color: #FBAF2B;
            text-decoration: none;
        }