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

:root {
  --navy:       #1a3a6b;
  --navy-dark:  #122a52;
  --navy-light: #2a4f8f;
  --gold:       #b8962e;
  --gold-light: #d4b04a;
  --gold-pale:  #f8f2e2;
  --bg:         #f0f3f8;
  --surface:    #ffffff;
  --border:     #d5dce8;
  --text:       #1e2a3a;
  --muted:      #5a6a80;
  --error:      #c0392b;
  --error-bg:   #fdf0ee;
  --success:    #1a6b3a;
  --radius:     8px;
  --shadow-lg:  0 8px 32px rgba(26,58,107,0.16);
}

body {
  font-family: 'Sarabun', sans-serif;
  font-size: 16px;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Header */
.site-header {
  background: linear-gradient(135deg, var(--navy-dark) 0%, var(--navy) 60%, var(--navy-light) 100%);
  box-shadow: 0 2px 16px rgba(0,0,0,0.25);
}
.header-inner {
  max-width: 860px;
  margin: 0 auto;
  padding: 22px 32px;
  display: flex;
  align-items: center;
  gap: 18px;
}
.header-emblem {
  width: 62px; height: 62px;
  background: rgba(255,255,255,0.10);
  border: 2px solid rgba(212,176,74,0.45);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.header-text { flex: 1; }
.header-text .org  { font-size: 12px; color: rgba(255,255,255,0.65); letter-spacing:.04em; margin-bottom:3px; }
.header-text h1    { font-size: 19px; font-weight: 700; color: #fff; line-height:1.3; }
.header-text .sub  { font-size: 13px; color: var(--gold-light); margin-top:2px; }
.header-badge {
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(212,176,74,0.35);
  border-radius: 6px;
  padding: 8px 14px;
  text-align: center; flex-shrink: 0;
}
.header-badge span   { display:block; font-size:11px; color:rgba(255,255,255,0.60); }
.header-badge strong { display:block; font-size:15px; font-weight:700; color:var(--gold-light); }
.gold-strip { height: 4px; background: linear-gradient(to right, var(--gold), var(--gold-light), var(--gold)); }

/* Main */
main { flex:1; max-width:860px; width:100%; margin:32px auto; padding:0 20px 56px; }

/* Notice */
.notice {
  background: var(--gold-pale);
  border: 1px solid rgba(184,150,46,0.30);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius);
  padding: 13px 18px;
  margin-bottom: 24px;
  font-size: 14px; color: #6b4e00; line-height:1.6;
}
.notice strong { color: #4a3500; }

/* Card */
.card { background: var(--surface); border-radius: 12px; box-shadow: var(--shadow-lg); overflow:hidden; }
.card-head {
  background: linear-gradient(to right, #f8fafd, #eef2f8);
  border-bottom: 2px solid var(--border);
  padding: 18px 32px;
  display: flex; align-items: center; gap: 14px;
}
.card-head-icon {
  width:42px; height:42px; background:var(--navy);
  border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.card-head-title { font-size:17px; font-weight:700; color:var(--navy); }
.card-head-sub   { font-size:13px; color:var(--muted); margin-top:2px; }
.card-body { padding: 32px; }

/* Form sections */
.section { margin-bottom: 30px; }
.section-title {
  font-size:13px; font-weight:700; color:var(--navy);
  text-transform:uppercase; letter-spacing:.08em;
  padding-bottom:10px; border-bottom:2px solid var(--border);
  margin-bottom:20px; display:flex; align-items:center; gap:8px;
}
.section-num {
  background:var(--navy); color:#fff;
  width:22px; height:22px; border-radius:50%;
  font-size:12px; display:inline-flex; align-items:center; justify-content:center;
}

.grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.grid.col1 { grid-template-columns:1fr; }
.span2 { grid-column: span 2; }

/* Fields */
.field { display:flex; flex-direction:column; gap:5px; }
label  { font-size:14px; font-weight:600; color:var(--text); }
label .req { color:var(--error); margin-left:3px; }
label .opt { color:var(--muted); font-size:12px; font-weight:400; margin-left:4px; }
.hint  { font-size:12px; color:var(--muted); }

input[type="text"], input[type="email"], input[type="date"], select, textarea {
  font-family:'Sarabun',sans-serif; font-size:15px; color:var(--text);
  background:#f8fafd; border:1.5px solid var(--border);
  border-radius:var(--radius); padding:10px 14px; width:100%;
  transition:border-color .2s, box-shadow .2s, background .2s;
  outline:none; appearance:none; -webkit-appearance:none;
}
input[type="date"] { color-scheme:light; }
select {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235a6a80' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center;
  padding-right:38px; cursor:pointer;
}
textarea { resize:vertical; min-height:88px; line-height:1.6; }
input:focus, select:focus, textarea:focus {
  border-color:var(--navy); background:#fff;
  box-shadow:0 0 0 3px rgba(26,58,107,.10);
}
input.err, select.err, textarea.err { border-color:var(--error); background:var(--error-bg); }
.ferr { font-size:12px; color:var(--error); display:none; margin-top:2px; }
.ferr.show { display:block; }

/* Alert */
.alert {
  border-radius:var(--radius); padding:13px 16px; font-size:14px;
  display:none; gap:10px; margin-bottom:18px; align-items:flex-start;
}
.alert.show { display:flex; }
.alert-error { background:var(--error-bg); border:1px solid rgba(192,57,43,.25); color:#922b21; }

/* Divider */
.divider { height:1px; background:var(--border); margin:28px 0; }

/* Footer row */
.form-foot { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; padding-top:6px; }
.form-note { font-size:13px; color:var(--muted); }
.form-note strong { color:var(--error); }

/* Submit button */
.btn-submit {
  font-family:'Sarabun',sans-serif; font-size:16px; font-weight:700; color:#fff;
  background:linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
  border:none; border-radius:var(--radius); padding:13px 40px;
  cursor:pointer; display:inline-flex; align-items:center; gap:10px;
  transition:opacity .2s, transform .15s, box-shadow .2s;
  box-shadow:0 4px 14px rgba(26,58,107,.30);
}
.btn-submit:hover:not(:disabled) { opacity:.91; transform:translateY(-1px); box-shadow:0 6px 20px rgba(26,58,107,.35); }
.btn-submit:active:not(:disabled) { transform:translateY(0); }
.btn-submit:disabled { opacity:.60; cursor:not-allowed; transform:none; }
.spinner {
  width:18px; height:18px;
  border:2.5px solid rgba(255,255,255,.35); border-top-color:#fff;
  border-radius:50%; animation:spin .75s linear infinite; display:none;
}
.btn-submit.loading .spinner  { display:block; }
.btn-submit.loading .btn-icon { display:none; }
@keyframes spin { to { transform:rotate(360deg); } }

/* Footer */
.site-footer {
  background:var(--navy-dark); color:rgba(255,255,255,.40);
  text-align:center; padding:16px; font-size:12px;
}

/* SweetAlert2 overrides */
.swal2-popup    { font-family: 'Sarabun', sans-serif !important; border-radius: 14px !important; }
.swal2-title    { font-family: 'Sarabun', sans-serif !important; font-size: 20px !important; color: var(--text) !important; }
.swal2-confirm,
.swal2-cancel   { font-family: 'Sarabun', sans-serif !important; font-size: 15px !important; font-weight: 600 !important; border-radius: 8px !important; padding: 10px 24px !important; }
.swal2-icon.swal2-success .swal2-success-ring { border-color: rgba(39,174,96,0.25) !important; }

@media (max-width: 620px) {
  .header-inner  { padding: 16px 18px; }
  .header-badge  { display: none; }
  .card-body     { padding: 22px 18px; }
  .grid          { grid-template-columns: 1fr; }
  .span2         { grid-column: span 1; }
  .form-foot     { flex-direction: column; align-items: stretch; }
  .btn-submit    { justify-content: center; }
}