/* PKWORLD Host module · Batch 2 · application patterns.
   Built only from the tokens in host.css. Guest-site styling (Roboto, #3CB54B primary). */

/* ---------- Wizard shell ---------- */
.wz { padding-block: 24px 48px; }
.wz-head { display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px; }
.wz-grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 24px; align-items: start; }
.wz-side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 16px; }
.wz-main { padding: 0; overflow: hidden; }
.wz-main .wz-top { padding: 24px 32px 0; display: flex; flex-direction: column; gap: 8px; }
.wz-main .wz-body { padding: 20px 32px 32px; display: flex; flex-direction: column; gap: 20px; }
.wz-foot { display: flex; align-items: center; gap: 16px; padding: 16px 32px; border-top: 1px solid var(--pk-silver, #DCDCDC); background: var(--pk-iceblue, #F5FEFF); }
.wz-foot .grow { text-align: center; }

/* Step list (desktop) */
.wz-steps { list-style: none; margin: 0; padding: 8px; display: flex; flex-direction: column; }
.wz-steps li { display: flex; gap: 12px; align-items: center; padding: 10px 8px; border-radius: 8px; }
.wz-steps li.on { background: var(--pk-deepteal-tint, #E7F3F7); }
.wz-steps .n { width: 28px; height: 28px; flex: 0 0 auto; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font: 600 13px var(--pk-font-body); border: 2px solid var(--pk-silver, #DCDCDC); color: var(--pk-slate, #646C6C); background: #fff; }
.wz-steps li.done .n { background: var(--pk-green-ink, #2A7F36); border-color: var(--pk-green-ink, #2A7F36); color: #fff; }
.wz-steps li.on .n { border-color: var(--pk-deepteal-fill, #216E85); color: var(--pk-deepteal-ink, #1A5768); }
.wz-steps li.fix .n { background: var(--pk-orange-tint, #FFF0E0); border-color: var(--pk-orange-ink, #94490A); color: var(--pk-orange-ink, #94490A); }
.wz-steps .l { display: flex; flex-direction: column; min-width: 0; }
.wz-steps .l b { font-size: 14px; font-weight: 600; color: var(--pk-navy-ink, #1B4353); }
.wz-steps li:not(.done):not(.on):not(.fix) .l b { font-weight: 500; color: var(--pk-slate, #646C6C); }
.wz-steps .l span { font-size: 12px; color: var(--pk-slate, #646C6C); }
.wz-steps li.fix .l span { color: var(--pk-orange-ink, #94490A); font-weight: 600; }
.wz-steps li .i { margin-left: auto; font-size: 18px; color: var(--pk-slate, #646C6C); }

/* Phone progress */
.wz-ph { background: #fff; border-bottom: 1px solid var(--pk-silver, #DCDCDC); padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; }
.wz-seg { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.wz-seg span { height: 4px; border-radius: 2px; background: var(--pk-silver, #DCDCDC); }
.wz-seg span.done { background: var(--pk-green-ink, #2A7F36); }
.wz-seg span.on { background: var(--pk-deepteal-fill, #216E85); }
.wz-seg span.fix { background: var(--pk-orange-ink, #94490A); }
.wz-phbody { padding: 16px 16px 24px; display: flex; flex-direction: column; gap: 16px; }
.wz-phbar { position: sticky; bottom: 0; background: #fff; border-top: 1px solid var(--pk-silver, #DCDCDC); box-shadow: var(--pk-shadow-3); padding: 10px 16px 12px; display: flex; flex-direction: column; gap: 8px; z-index: 5; }

/* Autosave line */
.save { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--pk-green-ink, #2A7F36); font-weight: 500; }
.save i { font-size: 18px; }
.save.saving { color: var(--pk-slate, #646C6C); }
.save.offline { color: var(--pk-orange-ink, #94490A); }
.savecard { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--pk-slate, #646C6C); }
.savecard i { font-size: 22px; color: var(--pk-green-ink, #2A7F36); flex: 0 0 auto; }
.savecard.offline i { color: var(--pk-orange-ink, #94490A); }
.savecard b { display: block; color: var(--pk-navy-ink, #1B4353); font-size: 14px; }

/* ---------- Upload tile and guide ---------- */
.up { border: 1.5px dashed var(--pk-silver, #DCDCDC); border-radius: 12px; background: #fff; padding: 16px; display: flex; gap: 14px; align-items: center; }
.up .ic { width: 48px; height: 48px; flex: 0 0 auto; border-radius: 10px; background: var(--pk-deepteal-tint, #E7F3F7); color: var(--pk-deepteal-ink, #1A5768); display: inline-flex; align-items: center; justify-content: center; font-size: 26px; }
.up .t { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.up .t b { font-size: 14px; font-weight: 600; color: var(--pk-navy-ink, #1B4353); }
.up .t span { font-size: 12px; color: var(--pk-slate, #646C6C); }
.up.done { border-style: solid; }
.up.done .ic { background: var(--pk-green-tint, #EFFCF1); color: var(--pk-green-ink, #2A7F36); }
.up.err { border-style: solid; border-color: var(--pk-red-ink, #B02532); }
.up.err .ic { background: var(--pk-red-tint, #FDE7E9); color: var(--pk-red-ink, #B02532); }
.up.fix { border-style: solid; border-color: var(--pk-orange-ink, #94490A); background: var(--pk-orange-tint, #FFF0E0); }
.up.fix .ic { background: #fff; color: var(--pk-orange-ink, #94490A); }
.up .acts { display: flex; gap: 8px; flex: 0 0 auto; }
.vp-phone .up { flex-wrap: wrap; }
.vp-phone .up .acts { width: 100%; }
.vp-phone .up .acts .btn { flex: 1; }
.guide { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.guide .g { border-radius: 10px; padding: 10px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; font-size: 12px; line-height: 1.35; }
.guide .g .pic { width: 56px; height: 56px; border-radius: 10px; background: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 30px; color: var(--pk-navy-ink, #1B4353); position: relative; }
.guide .g .mk { position: absolute; right: -6px; bottom: -6px; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; color: #fff; }
.guide .ok { background: var(--pk-green-tint, #EFFCF1); color: var(--pk-green-on-fill, #0F3A17); }
.guide .ok .mk { background: var(--pk-green-ink, #2A7F36); }
.guide .no { background: var(--pk-red-tint, #FDE7E9); color: var(--pk-red-ink, #B02532); }
.guide .no .mk { background: var(--pk-red-ink, #B02532); }
.private { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--pk-deepteal-ink, #1A5768); }
.private i { font-size: 18px; flex: 0 0 auto; }

/* ---------- Radio card ---------- */
.rcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.vp-phone .rcards { grid-template-columns: minmax(0, 1fr); }
.rcard { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1.5px solid var(--pk-silver, #DCDCDC); border-radius: 12px; background: #fff; }
.rcard.on { border-color: var(--pk-deepteal-fill, #216E85); background: var(--pk-deepteal-tint, #E7F3F7); }
.rcard .rd { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--pk-slate, #646C6C); background: #fff; flex: 0 0 auto; position: relative; margin-top: 2px; }
.rcard.on .rd { border-color: var(--pk-deepteal-fill, #216E85); }
.rcard.on .rd::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--pk-deepteal-fill, #216E85); }
.rcard b { display: block; font-size: 15px; font-weight: 600; color: var(--pk-navy-ink, #1B4353); }
.rcard span { font-size: 13px; color: var(--pk-slate, #646C6C); }
.rcard > i { margin-left: auto; font-size: 24px; color: var(--pk-deepteal-ink, #1A5768); }

/* ---------- Section and sub-block inside a form ---------- */
.fsec { display: flex; flex-direction: column; gap: 14px; }
.fsec + .fsec { padding-top: 20px; border-top: 1px solid var(--pk-silver, #DCDCDC); }
.fsec h3 { font-size: 16px; font-weight: 600; }
.ok-line { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; font-weight: 500; color: var(--pk-green-ink, #2A7F36); }
.ok-line i { font-size: 16px; }

/* Repeating rows (references, past groups) */
.rep { border: 1px solid var(--pk-silver, #DCDCDC); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 12px; background: #fff; }
.rep .rh { display: flex; align-items: center; justify-content: space-between; }
.rep .rh b { font-size: 14px; font-weight: 600; color: var(--pk-navy-ink, #1B4353); }
.pg { display: grid; grid-template-columns: 1.1fr 1fr 80px 1fr 40px; gap: 8px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--pk-silver, #DCDCDC); font-size: 14px; }
.pg.h { font-size: 12px; color: var(--pk-slate, #646C6C); font-weight: 500; text-transform: uppercase; letter-spacing: .04em; padding-top: 0; }
.vp-phone .pg { grid-template-columns: 1fr 1fr 40px; }
.vp-phone .pg.h { display: none; }

/* Hotel search select */
.hsel { position: relative; }
.hsel .menu { margin-top: 6px; background: #fff; border: 1px solid var(--pk-silver, #DCDCDC); border-radius: 12px; box-shadow: var(--pk-shadow-3); overflow: hidden; }
.hsel .opt { display: flex; gap: 12px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--pk-silver, #DCDCDC); font-size: 14px; }
.hsel .opt:last-child { border-bottom: 0; }
.hsel .opt.hi { background: var(--pk-iceblue, #F5FEFF); }
.hsel .opt .t { flex: 1; min-width: 0; }
.hsel .opt .t b { display: block; font-weight: 600; color: var(--pk-navy-ink, #1B4353); }
.hsel .opt .t span { font-size: 12px; color: var(--pk-slate, #646C6C); }
.hsel .foot { padding: 10px 14px; background: var(--pk-iceblue, #F5FEFF); font-size: 13px; }
.hrow { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--pk-silver, #DCDCDC); border-radius: 10px; background: #fff; }
.hrow .t { flex: 1; min-width: 0; }
.hrow .t b { display: block; font-size: 14px; font-weight: 600; color: var(--pk-navy-ink, #1B4353); }
.hrow .t span { font-size: 12px; color: var(--pk-slate, #646C6C); }
.livetag { display: inline-flex; gap: 4px; align-items: center; font-size: 12px; font-weight: 600; color: var(--pk-green-ink, #2A7F36); }
.invtag { display: inline-flex; gap: 4px; align-items: center; font-size: 12px; font-weight: 600; color: var(--pk-gold-ink, #7A6407); }

/* Review summary */
.rsum { border: 1px solid var(--pk-silver, #DCDCDC); border-radius: 12px; background: #fff; overflow: hidden; }
.rsum .rh { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--pk-iceblue, #F5FEFF); border-bottom: 1px solid var(--pk-silver, #DCDCDC); }
.rsum .rh b { font-size: 14px; font-weight: 600; color: var(--pk-navy-ink, #1B4353); flex: 1; }
.rsum .rh .n { width: 24px; height: 24px; border-radius: 50%; background: var(--pk-green-ink, #2A7F36); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; }
.rsum.miss .rh { background: var(--pk-red-tint, #FDE7E9); }
.rsum.miss .rh .n { background: var(--pk-red-ink, #B02532); }
.rsum dl { margin: 0; padding: 12px 16px; display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 8px 16px; font-size: 14px; }
.vp-phone .rsum dl { grid-template-columns: minmax(0, 1fr); gap: 2px; }
.rsum dt { color: var(--pk-slate, #646C6C); }
.vp-phone .rsum dt { font-size: 12px; margin-top: 6px; }
.rsum dd { margin: 0; color: var(--pk-charcoal, #343434); font-weight: 500; }
.terms { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.terms li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }
.terms li i { font-size: 20px; color: var(--pk-deepteal-ink, #1A5768); flex: 0 0 auto; }
.terms li b { color: var(--pk-navy-ink, #1B4353); font-weight: 600; }
.sig .ctl { font-size: 18px; font-style: italic; }

/* ---------- Status pages (A-10 to A-12) ---------- */
.st-wrap { max-width: 880px; margin: 0 auto; padding: 32px 32px 56px; display: flex; flex-direction: column; gap: 20px; }
.vp-phone .st-wrap { padding: 20px 16px 40px; gap: 16px; }
.st-hero { display: flex; gap: 20px; align-items: flex-start; }
.vp-phone .st-hero { flex-direction: column; gap: 12px; }
.st-hero .big { width: 64px; height: 64px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 32px; flex: 0 0 auto; }
.st-hero .big.gold { background: var(--pk-gold-tint, #FBF6D8); color: var(--pk-gold-ink, #7A6407); }
.st-hero .big.orange { background: var(--pk-orange-tint, #FFF0E0); color: var(--pk-orange-ink, #94490A); }
.st-hero .big.red { background: var(--pk-red-tint, #FDE7E9); color: var(--pk-red-ink, #B02532); }
.st-hero .big.green { background: var(--pk-green-tint, #EFFCF1); color: var(--pk-green-ink, #2A7F36); }
.st-hero .big.grey { background: var(--pk-lightgrey, #F1F2F4); color: var(--pk-slate, #646C6C); }
.adminmsg { border-left: 4px solid var(--pk-orange-ink, #94490A); background: #fff; border-radius: 0 12px 12px 0; padding: 16px 20px; box-shadow: var(--pk-shadow-1); display: flex; flex-direction: column; gap: 8px; }
.adminmsg .who { display: flex; gap: 10px; align-items: center; font-size: 13px; color: var(--pk-slate, #646C6C); }
.adminmsg .who b { color: var(--pk-navy-ink, #1B4353); }
.fixl { display: flex; flex-direction: column; }
.fixl .fi { display: flex; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--pk-silver, #DCDCDC); }
.fixl .fi:last-child { border-bottom: 0; }
.fixl .fi .ic { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; flex: 0 0 auto; background: var(--pk-orange-tint, #FFF0E0); color: var(--pk-orange-ink, #94490A); }
.fixl .fi.ok .ic { background: var(--pk-green-tint, #EFFCF1); color: var(--pk-green-ink, #2A7F36); }
.fixl .fi .t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fixl .fi .t b { font-size: 14px; font-weight: 600; color: var(--pk-navy-ink, #1B4353); }
.fixl .fi .t span { font-size: 13px; color: var(--pk-slate, #646C6C); }
.vp-phone .fixl .fi { flex-wrap: wrap; }
.vp-phone .fixl .fi .btn { margin-left: 50px; }

/* ---------- A-13 welcome ---------- */
.badgeprev { display: flex; gap: 16px; align-items: center; padding: 16px; border-radius: 12px; background: var(--pk-iceblue, #F5FEFF); border: 1px solid var(--pk-silver, #DCDCDC); }
.cl { display: flex; flex-direction: column; }
.cl .ci { display: flex; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--pk-silver, #DCDCDC); }
.cl .ci:last-child { border-bottom: 0; }
.cl .ci .ck { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--pk-silver, #DCDCDC); flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 16px; }
.cl .ci.done .ck { background: var(--pk-green-ink, #2A7F36); border-color: var(--pk-green-ink, #2A7F36); }
.cl .ci .t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cl .ci .t b { font-size: 14px; font-weight: 600; color: var(--pk-navy-ink, #1B4353); }
.cl .ci.done .t b { color: var(--pk-slate, #646C6C); text-decoration: line-through; }
.cl .ci .t span { font-size: 13px; color: var(--pk-slate, #646C6C); }
.req-tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--pk-deepteal-ink, #1A5768); background: var(--pk-deepteal-tint, #E7F3F7); border-radius: 4px; padding: 1px 6px; margin-left: 6px; text-decoration: none; display: inline-block; }
.opt-tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--pk-slate, #646C6C); background: var(--pk-lightgrey, #F1F2F4); border-radius: 4px; padding: 1px 6px; margin-left: 6px; display: inline-block; }
.vp-phone .cl .ci { flex-wrap: wrap; }
.vp-phone .cl .ci .btn { margin-left: 42px; }
/* Upload tiles placed two across: buttons drop under the text */
.grid > .col > .up { flex-wrap: wrap; }
.grid > .col > .up .t { flex: 1 1 160px; }
.grid > .col > .up .acts { width: 100%; padding-left: 62px; }
.vp-phone .grid > .col > .up .acts, .vp-phone .up .acts { padding-left: 0; }
.hrow .t .invtag, .hrow .t .livetag.blk { display: flex; margin-top: 2px; }
.vp-phone .rep .rh { flex-direction: column; align-items: flex-start; gap: 2px; }
.vp-phone .fixl .fi .t, .vp-phone .cl .ci .t { flex: 1 1 calc(100% - 60px); }
.wz-steps li.miss .n { background: var(--pk-red-tint, #FDE7E9); border-color: var(--pk-red-ink, #B02532); color: var(--pk-red-ink, #B02532); }
.wz-steps li.miss .l b { color: var(--pk-navy-ink, #1B4353) !important; font-weight: 600 !important; }
.wz-steps li.miss .l span { color: var(--pk-red-ink, #B02532); font-weight: 600; }
.wz-seg span.miss { background: var(--pk-red-ink, #B02532); }
.otp { display: flex; gap: 8px; }
.otp span { width: 48px; height: 56px; border-radius: 8px; border: 1.5px solid var(--pk-silver, #DCDCDC); background: #fff; display: inline-flex; align-items: center; justify-content: center; font: 600 22px var(--pk-font-body); color: var(--pk-navy-ink, #1B4353); }
.otp.err span { border-color: var(--pk-red-ink, #B02532); }
.rep .rh.keep { flex-direction: row !important; align-items: center !important; }