/* PKWORLD Host module · Batch 4 patterns. Loads after host.css, apply.css and groups.css. */
@font-face { font-family: "Noto Nastaliq Urdu"; src: url("fonts/noto-nastaliq-urdu-arabic-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
.ur { font-family: "Noto Nastaliq Urdu", Roboto, sans-serif; direction: rtl; text-align: right; line-height: 2.8; font-size: 15px; }
.ur .ltr { direction: ltr; unicode-bidi: isolate; font-family: Roboto, sans-serif; white-space: nowrap; }

/* KPI tiles (Bebas Neue for the numbers only) */
.kpis4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.vp-phone .kpis4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.kt { background: #fff; border: 1px solid var(--pk-silver, #DCDCDC); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.kt .l { font-size: 13px; font-weight: 500; color: var(--pk-slate, #646C6C); display: flex; align-items: center; gap: 6px; }
.kt .v { font: 400 34px/1 var(--hx-font-kpi, "Bebas Neue", Roboto, sans-serif); letter-spacing: .02em; color: var(--pk-navy-ink, #1B4353); }
.kt .v small { font: 400 18px/1 var(--hx-font-kpi, "Bebas Neue", Roboto, sans-serif); margin-right: 4px; color: var(--pk-slate, #646C6C); }
.vp-phone .kt .v { font-size: 28px; }
.kt .s { font-size: 12px; color: var(--pk-slate, #646C6C); }
.kt.hl { border-color: var(--pk-deepteal-fill, #216E85); box-shadow: inset 0 3px 0 var(--pk-deepteal-fill, #216E85); }

/* Generic tables (workspace) */
.t4 { width: 100%; border-collapse: collapse; font-size: 14px; }
.t4 th { text-align: left; font: 600 11px var(--pk-font-body); text-transform: uppercase; letter-spacing: .04em; color: var(--pk-slate, #646C6C); padding: 10px 14px; border-bottom: 1px solid var(--pk-silver, #DCDCDC); background: var(--pk-iceblue, #F5FEFF); white-space: nowrap; }
.t4 td { padding: 12px 14px; border-bottom: 1px solid var(--pk-silver, #DCDCDC); vertical-align: middle; }
.t4 tr:last-child td { border-bottom: 0; }
.t4 .r { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.t4 .b { font-weight: 600; color: var(--pk-navy-ink, #1B4353); }
.t4 tr.neg td { background: #FFF8F8; }
.t4 tr.tot td { background: var(--pk-iceblue, #F5FEFF); font-weight: 600; color: var(--pk-navy-ink, #1B4353); }
.mcard { padding: 14px 16px; border-bottom: 1px solid var(--pk-silver, #DCDCDC); display: flex; flex-direction: column; gap: 6px; }
.mcard:last-child { border-bottom: 0; }
.mcard .mh { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.mcard .mt { font: 600 15px var(--pk-font-heading); color: var(--pk-navy-ink, #1B4353); }
.kv { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.kv span { color: var(--pk-slate, #646C6C); }
.kv b { font-variant-numeric: tabular-nums; color: var(--pk-navy-ink, #1B4353); white-space: nowrap; }
.neg-amt { color: var(--pk-red-ink, #B02532) !important; }

/* Section nav (settings, help) */
.snav { display: flex; flex-direction: column; gap: 2px; }
.snav a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; font-size: 14px; font-weight: 500; color: var(--pk-slate, #646C6C); text-decoration: none; }
.snav a.on { background: var(--pk-deepteal-tint, #E7F3F7); color: var(--pk-deepteal-ink, #1A5768); }
.snav a i { font-size: 18px; }
.side2 { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 24px; align-items: start; }
.vp-phone .side2 { grid-template-columns: minmax(0, 1fr); gap: 16px; }

/* Statement letterhead */
.stmt { background: #fff; border: 1px solid var(--pk-silver, #DCDCDC); border-radius: 12px; padding: 32px; display: flex; flex-direction: column; gap: 20px; }
.vp-phone .stmt { padding: 16px; gap: 16px; }
.stmt .lh { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; border-bottom: 2px solid var(--pk-green-fill, #3CB54B); padding-bottom: 16px; }
.vp-phone .stmt .lh { flex-direction: column; }
.stmt .meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 24px; font-size: 13px; }
.vp-phone .stmt .meta { grid-template-columns: minmax(0, 1fr); }
.stmt .meta span { display: block; color: var(--pk-slate, #646C6C); font-size: 12px; }
.stmt .meta b { color: var(--pk-navy-ink, #1B4353); }
.net { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 10px; background: var(--pk-green-tint, #EFFCF1); }
.net b { font-size: 22px; color: var(--pk-green-ink, #2A7F36); font-variant-numeric: tabular-nums; }
.phx2 { display: inline-block; padding: 0 6px; border: 1px dashed var(--pk-silver, #DCDCDC); border-radius: 4px; color: var(--pk-slate, #646C6C); font-size: 12px; }

/* Stars */
.stars { display: inline-flex; gap: 2px; color: var(--pk-gold-fill, #E8CA35); }
.stars i { font-size: 16px; }
.stars .off { color: var(--pk-silver, #DCDCDC); }
.starpick { display: flex; gap: 8px; }
.starpick i { font-size: 40px; color: var(--pk-gold-fill, #E8CA35); }
.starpick i.off { color: var(--pk-silver, #DCDCDC); }
.vp-phone .starpick i { font-size: 36px; }
.subpick { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 16px; align-items: center; }
.subpick .stars i { font-size: 24px; }
.dist { display: grid; grid-template-columns: 24px minmax(0, 1fr) 28px; gap: 6px 10px; align-items: center; font-size: 12px; color: var(--pk-slate, #646C6C); }
.dist .bar { height: 8px; }

/* Invite / share */
.qrbox { width: 180px; height: 180px; padding: 10px; background: #fff; border: 1px solid var(--pk-silver, #DCDCDC); border-radius: 12px; }
.qrbox svg { width: 100%; height: 100%; display: block; }
.linkbox { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1.5px solid var(--pk-silver, #DCDCDC); border-radius: 10px; background: #fff; font: 600 15px var(--pk-font-body); color: var(--pk-navy-ink, #1B4353); }
.linkbox .grow { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wamsg { background: #DCF8C6; border-radius: 10px 10px 2px 10px; padding: 10px 12px; font-size: 14px; line-height: 1.5; color: #1F2C34; white-space: pre-line; }
.pcard { width: 100%; max-width: 340px; min-height: 200px; border-radius: 12px; background: var(--pk-navy-fill, #1B4353); color: #fff; padding: 18px; display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: 12px; }
.pcard .qrbox { width: 96px; height: 96px; padding: 5px; border: 0; border-radius: 8px; }

/* Tracker steps (W-10) */
.trk { display: flex; gap: 4px; }
.trk span { flex: 1; height: 6px; border-radius: 3px; background: var(--pk-lightgrey, #F1F2F4); }
.trk span.on { background: var(--pk-green-fill, #3CB54B); }
.trk-l { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); line-height: 1.3; gap: 4px; font-size: 11px; color: var(--pk-slate, #646C6C); }

/* Public page heroes (P-07, P-10) */
.ihero { background: var(--pk-navy-fill, #1B4353); color: #fff; }
.ihero .in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 40px; align-items: center; padding-top: 48px; padding-bottom: 48px; }
.vp-phone .ihero .in { grid-template-columns: minmax(0, 1fr); gap: 20px; padding-top: 24px; padding-bottom: 24px; }
.ihero h1 { color: #fff; font: 600 36px/1.2 var(--pk-font-heading, Roboto, sans-serif); letter-spacing: -0.01em; margin: 0; }
.vp-phone .ihero h1 { font-size: 26px; }
.ihero p { color: #DCE8EC; font-size: 16px; line-height: 1.6; margin: 0; }
.ihero .hostcard { background: #fff; color: var(--pk-charcoal, #343434); border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.bens { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.vp-phone .bens { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.ben { display: flex; flex-direction: column; gap: 8px; }
.ben .ic { width: 44px; height: 44px; border-radius: 12px; background: var(--pk-green-tint, #EFFCF1); color: var(--pk-green-ink, #2A7F36); display: inline-flex; align-items: center; justify-content: center; font-size: 22px; }

/* Legal page (P-09) */
.legal { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 40px; align-items: start; }
.vp-phone .legal { grid-template-columns: minmax(0, 1fr); gap: 16px; }
.toc { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.toc a { padding: 6px 10px; border-left: 2px solid var(--pk-silver, #DCDCDC); color: var(--pk-slate, #646C6C); text-decoration: none; }
.toc a.on { border-left-color: var(--pk-green-fill, #3CB54B); color: var(--pk-navy-ink, #1B4353); font-weight: 600; }
.lsec { display: flex; flex-direction: column; gap: 10px; padding-bottom: 24px; border-bottom: 1px solid var(--pk-silver, #DCDCDC); }
.lsec:last-child { border-bottom: 0; }
.lsec h2 { font: 600 20px var(--pk-font-heading); color: var(--pk-navy-ink, #1B4353); margin: 0; }
.lsec p, .lsec li { font-size: 15px; line-height: 1.7; color: var(--pk-charcoal, #343434); margin: 0; }
.lsec ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.setv { font-weight: 600; color: var(--pk-navy-ink, #1B4353); border-bottom: 1px dotted var(--pk-deepteal-fill, #216E85); }

/* Mock existing guest pages (P-08) */
.mock { background: #fff; border: 1px solid var(--pk-silver, #DCDCDC); border-radius: 12px; }
.mockbar { display: flex; gap: 8px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--pk-silver, #DCDCDC); font-size: 14px; color: var(--pk-slate, #646C6C); background: var(--pk-iceblue, #F5FEFF); }
.mhotel { display: grid; grid-template-columns: 200px minmax(0, 1fr) 160px; gap: 16px; padding: 16px; border-bottom: 1px solid var(--pk-silver, #DCDCDC); opacity: .8; }
.vp-phone .mhotel { grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 12px; }
.mhotel .ph { background: var(--pk-lightgrey, #F1F2F4); border-radius: 8px; min-height: 120px; }
.vp-phone .mhotel .ph { min-height: 88px; }
.gline2 { height: 10px; border-radius: 5px; background: var(--pk-lightgrey, #F1F2F4); }
.prompt { outline: 3px solid var(--pk-gold-fill, #E8CA35); outline-offset: 4px; border-radius: 10px; position: relative; }
.ptag { position: absolute; top: -14px; right: 12px; background: var(--pk-gold-fill, #E8CA35); color: #3B3203; font: 700 11px var(--pk-font-body); padding: 2px 8px; border-radius: 10px; letter-spacing: .03em; z-index: 2; }
.newprompt { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 10px; background: var(--pk-deepteal-tint, #E7F3F7); color: var(--pk-deepteal-ink, #1A5768); font-size: 14px; }
.newprompt i { font-size: 22px; }

/* Profile preview frame (W-14) */
.pvw { border: 1px solid var(--pk-silver, #DCDCDC); border-radius: 12px; overflow: hidden; background: var(--pk-iceblue, #F5FEFF); }
.pvw .bar2 { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: #fff; border-bottom: 1px solid var(--pk-silver, #DCDCDC); font-size: 12px; color: var(--pk-slate, #646C6C); }
.pvw .dots { display: inline-flex; gap: 4px; }
.pvw .dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--pk-silver, #DCDCDC); }
.pend { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--pk-gold-ink, #7A6407); background: var(--pk-gold-tint, #FBF6D8); padding: 2px 8px; border-radius: 6px; }

/* Notification matrix (W-17) */
.nm { width: 100%; border-collapse: collapse; font-size: 14px; }
.nm th { font: 600 11px var(--pk-font-body); text-transform: uppercase; letter-spacing: .04em; color: var(--pk-slate, #646C6C); padding: 8px; text-align: center; border-bottom: 1px solid var(--pk-silver, #DCDCDC); }
.nm th:first-child { text-align: left; }
.nm td { padding: 10px 8px; border-bottom: 1px solid var(--pk-silver, #DCDCDC); text-align: center; }
.nm td:first-child { text-align: left; }
.nm .box { display: inline-flex; vertical-align: middle; }
.nm .lock { color: var(--pk-muted, #8A9191); font-size: 16px; }
.otp4 { display: flex; gap: 10px; }
.otp4 span { width: 52px; height: 56px; border: 1.5px solid var(--pk-silver, #DCDCDC); border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font: 600 22px var(--pk-font-body); color: var(--pk-navy-ink, #1B4353); background: #fff; }
.otp4 span.f { border-color: var(--pk-deepteal-fill, #216E85); box-shadow: 0 0 0 3px rgba(33, 110, 133, .18); }

.vp-phone .pcard { grid-template-columns: minmax(0, 1fr) 84px; padding: 14px; }
.vp-phone .pcard .qrbox { width: 84px; height: 84px; }