/* creg.css – flat (2D) professional styling */

:root{
  --light-bg:#F1EFEC;
  --mid-tone:#D4C9BE;
  --dark-blue:#123458;
  --dark-text:#030303;

  --surface:#ffffff;     /* 2D white card */
  --border:#D4C9BE;
  --primary:#123458;
  --text:#030303;

  --radius:12px;
  --radius-sm:8px;

  --space-1:6px;
  --space-2:10px;
  --space-3:14px;
  --space-4:18px;
  --space-5:24px;
  --space-6:32px;
  --space-7:40px;
}

*{box-sizing:border-box}

body{
  background:
    radial-gradient(1600px 700px at 50% 0%, #ffffff 0%, var(--light-bg) 70%) no-repeat,
    var(--light-bg);
  font-family:'Poppins',sans-serif;
  color:var(--text);
  margin:0;
  min-height:100dvh;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  overflow-y:auto;
}

.page-wrapper{
  width:100%;
  min-height:100dvh;
  position:relative;
  display:grid;
  justify-items:center;
  padding:var(--space-6) var(--space-5);
}

.illustrative-background{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='xMidYMax slice'><rect x='0' y='0' width='1000' height='1000' fill='%23D4C9BE'/><path d='M0 750 Q 250 700, 500 750 T 1000 750 L 1000 1000 L 0 1000 Z' fill='%23123458'/><path d='M0 700 Q 200 650, 400 700 T 800 700 L 800 850 L 0 850 Z' fill='%23030303' opacity='0.08'/></svg>");
  background-size:cover;
  background-position:center bottom;
  background-repeat:no-repeat;
}

/* Container – flat card (no shadows) */
.registration-container{
  position:relative;
  z-index:1;
  width:min(760px, 94vw);
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:var(--space-7) var(--space-6);
  animation:fadeInSlideUp .6s ease-out both;
  opacity:0;
}

@keyframes fadeInSlideUp{
  from{opacity:0; transform:translateY(16px)}
  to{opacity:1; transform:translateY(0)}
}

/* Header */
.logo-container{
  display:grid;
  place-items:center;
  margin-bottom:var(--space-5);
}
.login-logo{max-width:180px; height:auto}

.reg-title{
  display:flex; align-items:center; justify-content:center;
  gap:var(--space-2);
  margin:0 0 var(--space-4);
  font-weight:700;
  letter-spacing:.6px;
  text-transform:uppercase;
  color:var(--text);
}

.reg-intro{
  text-align:center;
  margin:0 0 var(--space-2);
  color:color-mix(in srgb, var(--text) 78%, #0000);
  font-size:.98rem;
}

/* Fields */
.form-label{
  color:var(--text);
  font-weight:600;
  margin-bottom:var(--space-2);
  display:block;
}

.input-field-wrapper{
  position:relative;
  display:flex; align-items:center;
}

.input-field-wrapper .input-icon{
  position:absolute; left:14px;
  color:var(--primary);
  font-size:1.1rem; pointer-events:none;
  transform:translateY(1px);
}

.form-control,
.form-select{
  width:100%;
  min-height:48px;
  background:var(--light-bg);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  color:var(--text);
  padding:12px 48px 12px 44px; /* room for icons & toggles */
  transition:border-color .15s ease, background-color .15s ease;
}

.form-control:hover,
.form-select:hover{
  border-color:color-mix(in srgb, var(--primary) 28%, var(--border));
}

.form-control:focus,
.form-select:focus{
  outline:0;
  background:#fff;
  border-color:var(--primary);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}

.form-control::placeholder{color:rgba(3,3,3,.55)}

/* Triple row (Province/City/Barangay) */
.triple-row{ gap:var(--space-3) }
.triple-row > div{ min-width:0 }

/* Toggle password – flat button */
.toggle-password{
  position:absolute; right:12px;
  width:38px; height:38px;
  display:inline-flex; align-items:center; justify-content:center;
  border:0; border-radius:10px;
  background:transparent; color:var(--primary);
  cursor:pointer;
  transition:background-color .15s ease, transform .15s ease;
}
.toggle-password:hover{ background:rgba(18,52,88,.06) }
.toggle-password:active{ transform:scale(.98) }

/* Errors */
.error-message{
  color:#cc0000;
  font-size:.9rem;
  margin-top:6px;
}
.form-control.is-invalid{
  border-color:#dc3545;
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
  background-repeat:no-repeat;
  background-position:right 2.9rem center;
  background-size:14px 14px;
}
.form-check-input.is-invalid ~ .form-check-label{ color:#dc3545 }

.privacy-agreement{
  display:flex; align-items:center; justify-content:center;
  margin-top:var(--space-3);
  font-size:.98rem;
}
.privacy-error{
  color:#cc0000; font-size:.9rem; margin-top:6px; text-align:center;
}

/* Checkboxes */
.form-check{ display:flex; align-items:center; gap:.6rem }
.form-check-input{
  width:1.1rem; height:1.1rem;
  margin-top:0;
  background:#fff;
  border:1px solid var(--primary);
  border-radius:4px;
}
.form-check-input:checked{
  background-color:var(--primary);
  border-color:var(--primary);
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23F1EFEC' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
  background-size:100% 100%;
}

/* Primary button – flat */
.btn-illustrative-2d{
  background:var(--primary);
  color:var(--light-bg);
  border:1px solid var(--primary);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.6px;
  font-size:1.05rem;
  padding:14px 24px;
  border-radius:var(--radius-sm);
  transition:background-color .15s ease, transform .12s ease;
  box-shadow:none; /* 2D */
}
.btn-illustrative-2d:hover{
  background:#0c2642; transform:translateY(-1px);
}
.btn-illustrative-2d:active{
  transform:translateY(0);
}

/* Links */
.link-text{
  color:var(--text); text-decoration:none;
  transition:color .15s ease, text-decoration-color .15s ease;
}
.link-text:hover{ color:var(--primary); text-decoration:underline }

/* Responsive */
@media (max-width: 768px){
  .registration-container{ width:min(94vw, 760px); padding:var(--space-6) var(--space-5) }
  .input-field-wrapper .form-control{ padding-left:42px; padding-right:44px }
  .toggle-password{ right:10px }
  .form-control.is-invalid{ background-position:right 2.5rem center }
}
@media (max-width: 480px){
  .registration-container{ padding:var(--space-6) var(--space-4) }
  .btn-illustrative-2d{ padding:12px 18px; font-size:1rem }
}

/* ===== Privacy Policy Modal (2D, palette-aligned) ===== */
.pp-modal{
  position: fixed; inset: 0;
  display: grid; place-items: center;
  opacity: 0; visibility: hidden;
  transition: opacity .18s ease, visibility .18s ease;
  z-index: 1100;
}
.pp-modal.is-open{ opacity: 1; visibility: visible; }

.pp-modal__backdrop{
  position: absolute; inset: 0;
  background: rgba(3,3,3,.45);
}

.pp-modal__dialog{
  position: relative;
  width: min(980px, 96vw);
  max-height: 90vh;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
}

.pp-modal__header{
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  background: linear-gradient(180deg, var(--light-bg) 0%, #fff 70%);
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.pp-modal__title{
  display: flex; align-items: center; gap: 10px;
  margin: 0; color: var(--primary); font-weight: 700;
}
.pp-icon{ width: 22px; height: 22px; color: var(--primary); }

.pp-modal__close{
  width: 38px; height: 38px;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff; color: var(--dark-text);
  border-radius: 10px; cursor: pointer;
  transition: background-color .15s ease, transform .1s ease;
}
.pp-modal__close:hover{ background: var(--light-bg); }
.pp-modal__close:active{ transform: scale(.98); }

.pp-modal__body{
  padding: 0; background: #fff; height: 100%;
}
.pp-modal__frame{
  width: 100%; height: 70vh; border: 0; display: block;
}

/* Small screens */
@media (max-width: 560px){
  .pp-modal__dialog{ width: 96vw; max-height: 92vh; }
  .pp-modal__frame{ height: 72vh; }
}