/* ============================================= */
/* SUGARX - COMPLETE REGISTRATION CSS            */
/* Includes: Glassmorphism, Progress, Face Detection */
/* ============================================= */

* { 
  box-sizing: border-box; 
  margin: 0; 
  padding: 0; 
}

html, body { 
  height: 100%; 
  font-family: 'Montserrat', sans-serif; 
  color: #fff; 
  overflow: hidden; 
  background: #000; 
}

/* VIDEO BACKGROUND */
.video-bg video { 
  position: fixed; 
  top: 0; left: 0; 
  width: 100%; height: 100%; 
  object-fit: cover; 
  z-index: -2; 
  filter: brightness(0.7); 
}

.overlay { 
  position: fixed; 
  inset: 0; 
  background: rgba(0,0,0,0.5); 
  z-index: -1; 
}

/* GLASS CARD */
.step { 
  max-width: 500px; 
  margin: 8vh auto; 
  padding: 2.5rem; 
  /* MODIFICATION: Made more transparent */
  background: rgba(10, 10, 10, 0.25); 
  backdrop-filter: blur(20px) brightness(1.2); 
  -webkit-backdrop-filter: blur(20px) brightness(1.2);
  border-radius: 24px; 
  border: 1px solid rgba(255,255,255,0.2); 
  box-shadow: 0 15px 35px rgba(0,0,0,0.3);
  /* MODIFICATION: Added for mobile scroll */
  max-height: 84vh;
  overflow-y: auto;
}

/* Custom scrollbar for webkit browsers */
.step::-webkit-scrollbar {
  width: 6px;
}
.step::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
}
.step::-webkit-scrollbar-track {
  background: transparent;
}


/* HEADINGS */
h2 { 
  text-align: center; 
  color: #d4af37; 
  font-weight: 700; 
  margin-bottom: 1.5rem; 
  font-size: 1.8rem; 
}

/* FORM ELEMENTS */
.form-group {
  margin-bottom: 1rem;
}
.form-group label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: rgba(255,255,255,0.9);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
select,
textarea { 
  width: 100%; 
  padding: 1rem; 
  /* MODIFICATION: Removed top/bottom margin for better form-group control */
  margin: 0; 
  border-radius: 14px; 
  border: none; 
  background: rgba(255,255,255,0.15); 
  color: #fff; 
  font-size: 1rem; /* Normalized font size */
  transition: all 0.3s ease; 
  font-family: 'Montserrat', sans-serif;
}

textarea {
  min-height: 100px;
  resize: vertical;
}

input::placeholder, textarea::placeholder { 
  color: rgba(255,255,255,0.7); 
}

input:focus, select:focus, textarea:focus { 
  background: rgba(255,255,255,0.25); 
  outline: 2px solid #d4af37; 
}

/* Select arrow color */
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23FFFFFF%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-13%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2013l128%20128c3.6%203.6%207.8%205.4%2013%205.4s9.4-1.8%2013-5.4l128-128c3.6-3.6%205.4-7.8%205.4-13%200-5-1.8-9.2-5.4-12.8z%22%2F%3E%3C%2Fsvg%3E');
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 10px auto;
  padding-right: 2.5rem; /* Make space for arrow */
}
select option {
  background: #333;
  color: #fff;
}


/* AGE FIELD (NEW) */
#age-display { 
  background: rgba(0,0,0,0.3) !important; 
  color: #d4af37 !important; 
  text-align: center; 
  font-weight: bold; 
  font-size: 1.1rem;
  padding: 1rem;
  border-radius: 14px;
  margin: 1rem 0;
}

/* PASSWORD MESSAGE */
#msg, .field-error { 
  color: #ff6b6b; 
  min-height: 1.2rem; 
  font-size: 0.9rem; 
  margin-top: 0.5rem;
  font-weight: 600;
}

/* BUTTONS */
button { 
  background: #d4af37; 
  color: #000; 
  padding: 1rem; 
  border: none; 
  border-radius: 14px; 
  cursor: pointer; 
  font-weight: bold; 
  width: 48%; 
  font-size: 1.1rem; 
  transition: all 0.3s ease; 
}

button:hover { 
  background: #f1c40f; 
  transform: translateY(-2px); 
}

button:disabled {
  background: #777;
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* Single button form */
form button[type="submit"]:only-child {
  width: 100%;
}


/* NAVIGATION */
.nav { 
  display: flex; 
  justify-content: space-between; 
  margin-top: 2rem; 
  gap: 1rem; 
}

.nav a button { 
  background: rgba(255,255,255,0.2); 
  color: #fff; 
  width: 100%; /* Fix width for <a> tag */
}

.nav a button:hover { 
  background: rgba(255,255,255,0.3); 
}

/* PROGRESS BAR */
.progress { 
  height: 6px; 
  background: rgba(255,255,255,0.2); 
  border-radius: 3px; 
  overflow: hidden; 
  margin: 1.5rem 0; 
}

.bar { 
  height: 100%; 
  background: #d4af37; 
  border-radius: 3px; 
  transition: width 0.6s ease; 
}

/* WARNING BOX */
.warning { 
  background: rgba(255,0,0,0.25); 
  padding: 1rem; 
  border-radius: 14px; 
  margin: 1rem 0; 
  font-size: 0.9rem; 
  border-left: 4px solid #ff4444; 
  line-height: 1.5; 
}

/* FACE DETECTION STYLES (Moved to upload_photos.php context) */
canvas { 
  max-width: 100%; 
  border-radius: 14px; 
  margin: 1rem 0; 
  border: 2px dashed rgba(255,255,255,0.3); 
  display: none; 
  box-shadow: 0 4px 15px rgba(0,0,0,0.3); 
}

.face-status { 
  text-align: center; 
  margin: 1rem 0; 
  font-weight: bold; 
  font-size: 1rem; 
  min-height: 1.5rem; 
}

.face-ok { 
  color: #4ade80; 
}

.face-no { 
  color: #ff6b6b; 
}

/* SUBMIT BUTTON - DISABLED UNTIL FACE DETECTED */
#submitBtn { 
  opacity: 0.5; 
  pointer-events: none; 
  transition: all 0.3s ease; 
}

#submitBtn.enabled { 
  opacity: 1; 
  pointer-events: auto; 
  background: #d4af37; 
  color: #000; 
}

#submitBtn.enabled:hover { 
  background: #f1c40f; 
  transform: translateY(-2px); 
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .step { 
    margin: 3vh 1rem; /* MODIFICATION: Reduced margin */
    padding: 2rem 1.5rem; 
    max-height: 94vh; /* MODIFICATION: Ensure it fits */
  }
  h2 { font-size: 1.6rem; }
  .nav { flex-direction: column; }
  .nav a, button { width: 100%; }
}

@media (max-width: 480px) {
  .step { 
    margin: 2vh 0.5rem; /* MODIFICATION: Further reduced margin */
    padding: 1.8rem 1.2rem; 
    max-height: 96vh; /* MODIFICATION: Ensure it fits */
  }
  h2 { font-size: 1.4rem; }
}

#baby_block, #adult_block {
  transition: all 0.35s ease;
}
/* --- Append to public_html/register/css/register.css --- */

/* For success/info messages */
.success-box {
  background: rgba(67, 160, 71, 0.25);
  border-left: 4px solid #43a047;
  color: #a5d6a7;
  padding: 1rem;
  border-radius: 14px;
  margin: 1rem 0;
  font-size: 0.9rem;
  line-height: 1.5;
}

/* For error messages */
.error-box {
  background: rgba(255, 0, 0, 0.25);
  border-left: 4px solid #ff4444;
  color: #ffcccc;
  padding: 1rem;
  border-radius: 14px;
  margin: 1rem 0;
  font-size: 0.9rem;
  line-height: 1.5;
}

/* For multi-step progress */
.step-counter {
  text-align: center;
  color: #aaa;
  font-weight: 600;
  margin-bottom: 1.5rem;
  font-size: 1.1rem;
}
.step-counter span {
  color: #fff;
  font-weight: 700;
}