*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;font-family:Manrope,system-ui,sans-serif;background:#F1F4F9;color:#1B2540}
.hero{background:#0F1B3D;color:#fff;padding:56px 24px 96px}
.hero.slim{padding:32px 24px 120px}
.wrap{max-width:880px;margin:0 auto}
.wrap.narrow{max-width:720px}
.hero .wrap{display:flex;flex-direction:column;gap:12px}
.kicker{font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#7FD6DD}
.hero h1{margin:0;font-size:44px;line-height:1.1;font-weight:800}
.hero p{margin:0;font-size:17px;max-width:620px;line-height:1.5;color:#D5DBE8}
main.wrap{margin-top:-56px;padding:0 24px 64px;display:flex;flex-direction:column;gap:24px}
main.wrap.narrow{margin-top:-80px}
.card{background:#fff;border:1px solid #D5DBE8;border-radius:16px;padding:32px}
.strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:20px;padding:24px 32px}
.strip span{display:block;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#4A5472;margin-bottom:4px}
.strip strong{font-size:16px;color:#0F1B3D}
form.card{display:flex;flex-direction:column;gap:32px}
.block{display:flex;flex-direction:column;gap:20px}
.block h2{margin:0;font-size:18px;color:#0F1B3D;display:flex;align-items:center;gap:10px}
.num{width:28px;height:28px;border-radius:50%;background:#0B6A73;color:#fff;font-size:14px;display:inline-flex;align-items:center;justify-content:center}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}
.field{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:600}
input,select{height:48px;width:100%;border:1px solid #AEB7CC;border-radius:8px;padding:0 14px;font:inherit;font-size:15px;color:#1B2540;background:#fff}
input:focus,select:focus{outline:3px solid #7FD6DD;outline-offset:1px;border-color:#0B6A73}
.err{color:#B42318;font-size:13px;font-weight:600}
.pay{display:flex;align-items:center;gap:12px;min-height:56px;padding:0 16px;border:1px solid #AEB7CC;border-radius:10px;background:#fff;font-size:15px;font-weight:600;cursor:pointer}
.pay input{width:18px;height:18px;accent-color:#0B6A73;flex:none}
.pay small{display:block;font-size:13px;font-weight:400;color:#4A5472}
.pay:has(input:checked){border-color:#0B6A73;box-shadow:0 0 0 1px #0B6A73;background:#E8F4F5}
.consent{display:flex;gap:12px;align-items:flex-start;font-size:14px;line-height:1.5}
.consent input{width:18px;height:18px;margin-top:2px;accent-color:#0B6A73;flex:none}
.btn{height:52px;padding:0 24px;border:0;border-radius:10px;background:#0B6A73;color:#fff;font:inherit;font-size:16px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.btn.alt{background:#fff;color:#0B6A73;border:2px solid #0B6A73}
/* success */
.success{display:flex;flex-direction:column;gap:28px;padding:40px 32px}
.center{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.center h1{margin:0;font-size:32px;font-weight:800;color:#0F1B3D}
.center p{margin:0;font-size:16px;line-height:1.5;color:#4A5472;max-width:460px}
.idbox{background:#F1F4F9;border-radius:12px;padding:20px;text-align:center;font-size:13px;font-weight:600;color:#4A5472}
.idbox strong{display:block;font-size:28px;font-weight:800;letter-spacing:.06em;color:#0B6A73;margin-top:4px}
.success h2{margin:0 0 4px;font-size:16px;color:#0F1B3D}
.row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 0;border-bottom:1px solid #D5DBE8;font-size:15px}
.row:last-child{border-bottom:0}
.row span{color:#4A5472}.row strong{text-align:right;color:#0F1B3D}
.badge{font-weight:700;font-size:13px;padding:6px 12px;border-radius:999px;background:#FFF1D6;color:#6B4A00}
.badge.confirmed{background:#D8F3E3;color:#0B5A2C}
.badge.rejected{background:#FDE3E1;color:#8A1C14}
.steps{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:16px}
.steps li{display:flex;gap:14px;align-items:flex-start;font-size:15px;line-height:1.5}
.steps .n{flex:none;width:28px;height:28px;border-radius:50%;background:#E8F4F5;color:#0B6A73;font-size:14px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
.steps small{display:block;color:#4A5472;font-size:15px}
.actions{display:flex;flex-wrap:wrap;gap:12px}
.actions .btn{flex:1 1 200px}
@media print{.hero,.actions{display:none}body{background:#fff}main.wrap{margin-top:0}}

/* payment proof + live transaction check */
input[type=file]{height:auto;padding:10px 12px}
.hint{font-size:13px;font-weight:400;color:#4A5472;min-height:1em}
.hint.ok{color:#0B5A2C;font-weight:600}
.hint.bad{color:#B42318;font-weight:600}

/* cover image */
.hero{background-size:cover;background-position:center}

/* mobile fixes */
.grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
@media (max-width:600px){
    .hero{padding:40px 16px 80px}
    .hero h1{font-size:32px}
    main.wrap{padding:0 16px 48px}
    .card{padding:20px}
    .strip{padding:20px}
    .success{padding:28px 20px}
}