/* =========================================================================
   แบบทะเบียนประวัติอิเล็กทรอนิกส์ - Stylesheet
   โทนสี: น้ำเงินราชการ + ฟ้าเขียวอมเทียบกับเว็บต้นทาง (krph.go.th)
   ========================================================================= */

:root{
  --navy-900: #0b2d4d;
  --navy-800: #0d3a63;
  --navy-700: #0f4c81;
  --teal-600: #0077b6;
  --teal-400: #00b4d8;
  --gold-500: #c79a3e;
  --bg-page:  #eef3f7;
  --bg-card:  #ffffff;
  --ink-900:  #1c2733;
  --ink-600:  #5b6b7a;
  --line:     #dde6ee;
  --danger:   #c0392b;
  --success:  #1e8e5a;
  --radius-lg: 14px;
  --radius-md: 10px;
  --shadow-card: 0 10px 30px rgba(11,45,77,.08);
}

*{ box-sizing: border-box; }

html, body{
  font-family: 'Sarabun', system-ui, sans-serif;
  background: var(--bg-page);
  color: var(--ink-900);
}

h1,h2,h3,h4,h5,h6{
  font-family: 'Sarabun', sans-serif;
  font-weight: 700;
  color: var(--navy-900);
}

/* ===================== Header ===================== */
.gov-header{
  background: linear-gradient(120deg, var(--navy-900) 0%, var(--navy-700) 55%, var(--teal-600) 100%);
  color: #fff;
  padding: 22px 0;
  box-shadow: 0 4px 18px rgba(11,45,77,.25);
  position: relative;
  overflow: hidden;
}
.gov-header::after{
  content:"";
  position:absolute;
  inset:0;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 2px, transparent 2px 18px);
  pointer-events:none;
}
.gov-header-inner{
  display:flex;
  align-items:center;
  gap:16px;
  position:relative;
  z-index:1;
}
.gov-emblem{
  width:54px;height:54px;
  flex:0 0 54px;
  border-radius:50%;
  background: rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.35);
  display:flex;align-items:center;justify-content:center;
  font-size:1.6rem;
  color: var(--gold-500);
}
.gov-header-text h1{
  color:#fff;
  font-size:1.25rem;
  margin:0;
  line-height:1.3;
}
.gov-eyebrow{
  font-size:.78rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  color: rgba(255,255,255,.7);
  margin:0 0 2px;
}
.gov-sub{
  font-size:.85rem;
  color: rgba(255,255,255,.75);
  margin:2px 0 0;
}
.gov-status{
  margin-left:auto;
  align-items:center;
  gap:8px;
  font-size:.8rem;
  background: rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.25);
  border-radius:30px;
  padding:6px 14px;
  white-space:nowrap;
}
.status-dot{
  width:8px;height:8px;border-radius:50%;
  background: var(--teal-400);
  box-shadow:0 0 0 0 rgba(0,180,216,.6);
  animation: pulse 2s infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(0,180,216,.6); }
  70%{ box-shadow:0 0 0 6px rgba(0,180,216,0); }
  100%{ box-shadow:0 0 0 0 rgba(0,180,216,0); }
}

/* ===================== Intro ===================== */
.form-intro h2{ font-size:1.4rem; }

/* ===================== Stepper ===================== */
.wizard-stepper{ position:relative; }
.stepper-list{
  display:flex;
  list-style:none;
  margin:0 0 14px;
  padding:0;
  gap:4px;
  overflow-x:auto;
  scrollbar-width:none;
}
.stepper-list::-webkit-scrollbar{ display:none; }
.step-item{ flex:1 1 0; min-width:108px; }
.step-btn{
  width:100%;
  background:none;
  border:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  padding:6px 4px 10px;
  cursor:pointer;
  color: var(--ink-600);
  transition:.2s;
}
.step-circle{
  width:34px;height:34px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#fff;
  border:2px solid var(--line);
  font-weight:700;
  color: var(--ink-600);
  transition:.2s;
}
.step-label{
  font-size:.74rem;
  text-align:center;
  line-height:1.2;
  font-weight:500;
}
.step-item.active .step-circle{
  background: var(--teal-600);
  border-color: var(--teal-600);
  color:#fff;
  box-shadow:0 0 0 4px rgba(0,119,182,.15);
}
.step-item.active .step-label{ color: var(--navy-900); font-weight:700; }
.step-item.completed .step-circle{
  background: var(--success);
  border-color: var(--success);
  color:#fff;
}
.step-item.completed .step-circle::before{ content:"✓"; }
.step-item.completed .step-circle{ font-size:0; }
.step-item.completed .step-circle::before{ font-size:1rem; }
.step-item:not(.active):hover .step-circle{ border-color: var(--teal-400); }

.stepper-progress{
  height:5px;
  background: var(--line);
  border-radius:10px;
  overflow:hidden;
}
.stepper-progress-bar{
  height:100%;
  background: linear-gradient(90deg, var(--teal-400), var(--teal-600));
  transition: width .35s ease;
}

/* ===================== Form Card ===================== */
.form-card{
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 28px 24px;
  border: 1px solid var(--line);
}
@media (min-width: 768px){
  .form-card{ padding: 36px 40px; }
}

.wizard-step{ display:none; animation: fadeIn .3s ease; }
.wizard-step.active{ display:block; }
@keyframes fadeIn{
  from{ opacity:0; transform: translateY(6px); }
  to{ opacity:1; transform: translateY(0); }
}

.step-header{
  display:flex;
  gap:14px;
  align-items:flex-start;
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.step-header-icon{
  width:46px;height:46px;flex:0 0 46px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--teal-400), var(--teal-600));
  color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:1.3rem;
}
.step-header h3{ font-size:1.15rem; margin:0 0 2px; }
.step-header p{ color: var(--ink-600); margin:0; font-size:.88rem; }

.section-subhead{
  font-size:1rem;
  color: var(--navy-800);
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:14px;
}
.section-subhead i{ color: var(--teal-600); }

/* ===================== Form controls ===================== */
.form-label{
  font-weight:600;
  font-size:.88rem;
  color: var(--navy-800);
  margin-bottom:6px;
}
.req{ color: var(--danger); }

.form-control, .form-select{
  border-radius: var(--radius-md);
  border:1px solid #cfd9e2;
  padding:.55rem .8rem;
  font-size:.92rem;
  transition: border-color .15s, box-shadow .15s;
}
.form-control:focus, .form-select:focus{
  border-color: var(--teal-600);
  box-shadow: 0 0 0 3px rgba(0,119,182,.15);
}
.form-control.is-invalid, .form-select.is-invalid{
  border-color: var(--danger);
}
.form-control.is-valid, .form-select.is-valid{
  border-color: var(--success);
}
.invalid-feedback{ font-size:.78rem; }
.form-text{ font-size:.78rem; color: var(--ink-600); }

.total-display{
  background: #f3f7fa;
  font-size:1.05rem;
  color: var(--navy-900);
  border-color: var(--teal-400);
}

/* ===================== Dynamic rows (templates) ===================== */
.dynamic-list{ display:flex; flex-direction:column; gap:12px; margin-bottom:8px; }
.card-row{
  background: #f7fafc;
  border:1px solid var(--line);
  border-radius: var(--radius-md);
  padding:14px;
  animation: fadeIn .25s ease;
  position:relative;
}
.card-row .form-label.small{ font-size:.74rem; margin-bottom:3px; color:var(--ink-600); }
.remove-row-btn{ flex-shrink:0; }

/* ===================== Wizard nav ===================== */
.wizard-nav{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:space-between;
  align-items:center;
  margin-top:28px;
  padding-top:20px;
  border-top:1px solid var(--line);
}
.wizard-nav-right{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-left:auto; }
.wizard-nav .btn{
  border-radius:30px;
  padding:.55rem 1.4rem;
  font-weight:600;
  font-size:.9rem;
}
.btn-primary{ background: var(--teal-600); border-color: var(--teal-600); }
.btn-primary:hover{ background: var(--navy-800); border-color: var(--navy-800); }
.btn-success{ background: var(--success); border-color: var(--success); }
.btn-outline-secondary{ border-color:#cfd9e2; color: var(--ink-600); }

/* ===================== Review section (step 5) ===================== */
.review-container{ display:flex; flex-direction:column; gap:16px; }
.review-block{
  border:1px solid var(--line);
  border-radius: var(--radius-md);
  overflow:hidden;
}
.review-block-title{
  background: #f3f7fa;
  padding:10px 16px;
  font-weight:700;
  color: var(--navy-800);
  font-size:.92rem;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.review-block-title button{
  font-size:.78rem;
  text-decoration:none;
}
.review-table{ width:100%; border-collapse:collapse; }
.review-table tr{ border-bottom:1px solid var(--line); }
.review-table tr:last-child{ border-bottom:none; }
.review-table td{ padding:9px 16px; font-size:.88rem; vertical-align:top; }
.review-table td.label{ width:38%; color: var(--ink-600); font-weight:500; }
.review-table td.value{ color: var(--ink-900); font-weight:600; }
.review-empty{ color: var(--ink-600); font-style:italic; font-size:.85rem; padding:10px 16px;}

/* ===================== Toast / Modal ===================== */
.success-icon{ font-size:3.4rem; color: var(--success); }
.toast{ border-radius: var(--radius-md); border:1px solid var(--line); }

/* ===================== Misc helpers ===================== */
::placeholder{ color:#a7b4c0; }
.money-input{ text-align:right; }

@media (max-width: 576px){
  .step-label{ display:none; }
  .gov-header-text h1{ font-size:1.05rem; }
  .form-card{ padding:20px 16px; }
}