@font-face{
  font-family:"MoodmusicFont";
  src:url("./Fonts/PathwayExtreme-VariableFont.ttf") format("truetype");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

:root{
  --green:#3a8f2c;
  --green2:#2f7a24;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --border:#e2e8f0;
  --border2:#cbd5e1;
  --shadow:0 18px 60px rgba(2,6,23,.18);
  --radius:22px;
  --focusSoft:rgba(58,143,44,.15);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"MoodmusicFont",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(900px 520px at 20% 10%,rgba(255,255,255,0.20),transparent 55%),
    radial-gradient(900px 520px at 90% 25%,rgba(255,255,255,0.14),transparent 55%),
    linear-gradient(180deg,var(--green),var(--green2));
}

.page{max-width:940px;margin:0 auto;padding:56px 16px 80px}
.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}

.logo-area{padding:34px 22px 10px;text-align:center;background:#fff}
.logo-area img{width:420px;max-width:92%;height:auto;display:inline-block}

.card-head{padding:14px 40px 28px;border-bottom:1px solid var(--border);background:#fff;text-align:center}
.title{margin:0;font-size:32px;font-weight:820;letter-spacing:-0.3px}
.subtitle{margin:14px auto 0;color:#475569;font-size:15px;max-width:680px}
.subtitle .en{display:block;margin-top:6px;color:var(--muted);font-size:14px}
.all-required{margin:14px 0 0;color:var(--muted);font-size:12px}

.content{padding:26px 40px 40px;background:#fff}

.section{padding:18px 0 8px}
.section+.section{border-top:1px solid var(--border);margin-top:10px}
.section h2{margin:0 0 6px;font-size:14px;font-weight:850;letter-spacing:0.2px;text-transform:uppercase;color:#0b1220}
.h2en{margin:0 0 14px;color:var(--muted);font-size:12px}

.grid{display:grid;grid-template-columns:1fr;gap:18px;margin-top:8px}
@media(min-width:780px){.grid.cols-2{grid-template-columns:1fr 1fr}}

label{display:grid;gap:7px}
.lbl{font-size:13px;font-weight:740;color:#0b1220}
.req{color:var(--green);margin-left:3px;font-weight:900}
.enlbl{display:block;margin-top:2px;font-size:12px;color:var(--muted);font-weight:520}

input,select{
  width:100%;
  border:1px solid var(--border2);
  border-radius:14px;
  background:#fff;
  padding:14px;
  font:inherit;
  font-size:14px;
  color:var(--text);
  outline:none;
  transition:box-shadow 160ms ease,border-color 160ms ease;
}
input:focus,select:focus{border-color:var(--green);box-shadow:0 0 0 5px var(--focusSoft)}
.row{display:grid;grid-template-columns:140px 1fr;gap:12px;align-items:end}

.checkbox{
  display:flex;gap:12px;align-items:flex-start;
  padding:12px;border:1px solid var(--border);
  border-radius:14px;background:#fff;margin-top:6px
}
.checkbox input{width:18px;height:18px;margin-top:3px}
.checkbox .text{display:grid;gap:2px}
.checkbox .text b{font-size:13px;font-weight:760}
.checkbox .text span{font-size:12px;color:var(--muted)}
.disabled{opacity:.6;pointer-events:none}

.fee-box{
  margin-top:10px;padding:14px;
  border:1px solid var(--border);
  border-radius:14px;background:#fff
}
.fee-title{font-weight:900;font-size:13px}
.fee-sub{margin-top:6px;color:var(--muted);font-size:12px;line-height:1.35}
.fee-value{margin-top:10px;font-size:22px;font-weight:950;letter-spacing:-0.2px}
.fee-meta{margin-top:8px;color:var(--muted);font-size:12px}

.actions{display:flex;justify-content:flex-end;gap:10px;padding-top:18px}
button{
  appearance:none;border:1px solid var(--green);background:#fff;color:var(--text);
  border-radius:14px;padding:14px 18px;font-weight:900;font-size:14px;cursor:pointer;
  transition:transform 80ms ease,box-shadow 160ms ease;
}
button:active{transform:translateY(1px)}
button:hover{box-shadow:0 10px 20px rgba(58,143,44,.12)}

.confirm-wrap{display:none}
.confirm-content{padding:26px 40px 40px;border-top:1px solid var(--border);background:#fff;text-align:center}
.confirm-content h1{margin:0;font-size:28px;font-weight:820;letter-spacing:-0.3px}
.confirm-content p{margin:12px 0 0;color:#475569}
.confirm-content .en{color:var(--muted);margin-top:6px}
.print-row{margin-top:22px;display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.small-note{margin-top:12px;font-size:12px;color:var(--muted)}

.success-icon{margin-bottom:16px;color:var(--green)}
.success-icon svg{width:64px;height:64px}
.additional-notes{margin-top:16px;font-size:13px;color:#475569;line-height:1.5}
.additional-notes.en{margin-top:6px;color:var(--muted);font-size:12px}

.case-number{display:inline-block;background:var(--green);color:#fff;padding:10px 20px;border-radius:8px;font-size:16px;font-weight:700;margin:15px 0;letter-spacing:0.5px}

.form-message{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-radius:14px;margin-bottom:20px;animation:slideIn .3s ease}
.form-message--success{background:#ecfdf5;border:1px solid #10b981;color:#065f46}
.form-message--error{background:#fef2f2;border:1px solid #ef4444;color:#991b1b}
.form-message__close{background:none;border:none;font-size:20px;cursor:pointer;opacity:.6;padding:0 4px}
.form-message__close:hover{opacity:1}
.spinner{display:inline-block;width:16px;height:16px;border:2px solid #fff;border-top-color:transparent;border-radius:50%;animation:spin .8s linear infinite;vertical-align:middle;margin-right:6px}
button:disabled{opacity:.7;cursor:not-allowed}

@keyframes slideIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
@keyframes spin{to{transform:rotate(360deg)}}

@media(max-width:600px){
  .form-message{flex-direction:column;text-align:center;gap:8px}
  .confirm-content h1{font-size:22px}
  .confirm-content p{font-size:14px}
}