/* INDIANMARK EXPO — visitor portal. --brand is set per client/event. */
:root { --brand: #1f5f99; --ink: #1d2733; --muted: #5d6b7a; --line: #d8dee6; --bg: #f4f6f9; --err: #b42318; --ok: #157347; }
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: "Segoe UI", Roboto, Arial, sans-serif; font-size: 16px; line-height: 1.5; color: var(--ink); background: var(--bg); }
.wrap { max-width: 640px; margin: 0 auto; padding: 0 16px; }
.wrap.narrow { max-width: 460px; padding-top: 20px; padding-bottom: 32px; }

.hero { background: var(--brand); color: #fff; padding: 28px 0 56px; }
.hero h1 { margin: 4px 0 6px; font-size: 1.6rem; line-height: 1.2; }
.hero .org { margin: 0; opacity: .85; font-size: .9rem; text-transform: uppercase; letter-spacing: .04em; }
.hero .meta { margin: 0; opacity: .92; }
.hero .logo { max-height: 56px; max-width: 200px; background: #fff; border-radius: 6px; padding: 4px; margin-bottom: 10px; }

.card { background: #fff; border-radius: 10px; box-shadow: 0 1px 3px rgba(16,24,40,.12); padding: 20px; margin: -36px 0 20px; }
.wrap.narrow .card { margin-top: 0; }
.card h2 { margin-top: 0; font-size: 1.25rem; }
.card.notice { border-left: 4px solid var(--brand); }
.card.done h1 { margin-top: 0; color: var(--ok); font-size: 1.4rem; }
.intro { color: var(--muted); }
.invited { background: #fff7e0; border: 1px solid #f2d27a; border-radius: 8px; padding: 8px 12px; margin-bottom: 14px; }

.fld { margin-bottom: 16px; }
.fld label, .fld legend { display: block; font-weight: 600; margin-bottom: 6px; }
.fld fieldset { border: 0; padding: 0; margin: 0; }
.fld input[type=text], .fld input[type=email], .fld input[type=tel], .fld input[type=date], .fld select, .fld textarea {
  width: 100%; font: inherit; padding: 11px 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink);
}
.fld input:focus, .fld select:focus, .fld textarea:focus { outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand); }
.fld .opt { display: flex; gap: 8px; align-items: center; font-weight: 400; margin: 6px 0; }
.fld .opt input { width: 20px; height: 20px; }
.fld .help { color: var(--muted); font-size: .875rem; margin-top: 4px; }
.fld.has-error input, .fld.has-error select, .fld.has-error textarea { border-color: var(--err); }
.fld .err { color: var(--err); font-size: .875rem; margin-top: 4px; }
.fld[hidden] { display: none; }
.req { color: var(--err); }

.existing { background: #e8f5ee; border: 1px solid #9fd3b4; color: #14532d; border-radius: 8px; padding: 10px 12px; margin-bottom: 16px; }
.existing .btn { margin-top: 8px; }
.btn-small { width: auto; padding: 7px 12px; font-size: .9rem; }
.btn-whatsapp { background: #128c4b; }
/* "How did you hear" and similar choice lists as tiles (United Trade Fairs layout) */
.fld fieldset { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.fld fieldset legend { grid-column: 1 / -1; padding: 0; }
.fld fieldset .opt { border: 1.5px solid var(--line); border-radius: 8px; padding: 9px 10px; margin: 0; cursor: pointer; }
.fld fieldset .opt:has(input:checked) { border-color: var(--brand); background: #eef5fb; font-weight: 600; }
.msg { background: #fdecea; color: var(--err); border-radius: 8px; padding: 10px 12px; margin-bottom: 16px; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.btn { display: inline-block; width: 100%; padding: 13px 18px; font: inherit; font-weight: 700; color: #fff; background: var(--brand);
       border: 0; border-radius: 8px; cursor: pointer; text-align: center; text-decoration: none; }
.btn:hover { filter: brightness(1.08); }
.btn:focus-visible { outline: 3px solid #ffbf47; outline-offset: 2px; }
.btn-outline { background: #fff; color: var(--brand); border: 2px solid var(--brand); }
.actions { display: grid; gap: 10px; margin: 16px 0; }
.fineprint { color: var(--muted); font-size: .8rem; }
.foot { color: var(--muted); font-size: .8rem; padding-bottom: 24px; text-align: center; }

/* pass */
.pass { background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 2px 10px rgba(16,24,40,.15); text-align: center; }
.pass-head { background: var(--brand); color: #fff; padding: 14px 16px; }
.pass-event { font-weight: 700; font-size: 1.1rem; }
.pass-meta { font-size: .85rem; opacity: .9; }
.pass-body { padding: 18px 16px; }
.pass-cat { display: inline-block; background: #eef3f8; color: var(--brand); font-weight: 700; font-size: .8rem; letter-spacing: .06em;
            text-transform: uppercase; border-radius: 999px; padding: 3px 12px; }
.pass-name { font-size: 1.45rem; font-weight: 800; margin-top: 10px; word-wrap: break-word; }
.pass-org, .pass-city { color: var(--muted); }
.pass-qr { width: 220px; height: 220px; margin: 14px auto 6px; display: block; image-rendering: pixelated; }
.pass-no { font-family: Consolas, monospace; font-weight: 700; letter-spacing: .08em; }
.pass-foot { background: #f7f9fb; color: var(--muted); font-size: .8rem; padding: 10px 14px; border-top: 1px dashed var(--line); }
.pass-void .pass-head { background: #8a8f98; }
.pass-void-msg { color: var(--err); font-weight: 700; margin: 18px 0; }

@media print {
  body { background: #fff; }
  .no-print, .card.done, .fineprint { display: none !important; }
  .pass { box-shadow: none; border: 1px solid #999; }
  .pass-head { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* exhibitor gate pass, out pass and e-invitation */
.pass-exhibitor .pass-head { background: #14532d; }
.pass-exhibitor .pass-cat { background: #e7f6ec; color: #14532d; }
.pass-outpass .pass-head { background: #7c2d12; }
.pass-outpass .pass-cat { background: #fdf0e7; color: #7c2d12; }
.pass-booth { display: inline-block; margin-top: 8px; padding: 4px 12px; border-radius: 6px; background: #f0f4f8; font-weight: 700; }
.pass-facts { text-align: left; margin: 14px 0 4px; display: grid; grid-template-columns: max-content 1fr; gap: 6px 12px; font-size: .92rem; }
.pass-facts dt { color: var(--muted); }
.pass-facts dd { margin: 0; font-weight: 600; white-space: pre-line; word-break: break-word; }
.invite-card { background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 18px rgba(16,24,40,.16); }
.invite-top { background: var(--brand); color: #fff; padding: 18px 20px; }
.invite-event { font-weight: 800; font-size: 1.15rem; letter-spacing: .02em; }
.invite-meta { opacity: .9; font-size: .9rem; margin-top: 2px; }
.invite-body { padding: 22px 20px 6px; text-align: center; }
.invite-logo { max-width: 140px; max-height: 70px; object-fit: contain; margin-bottom: 8px; }
.invite-lead { color: var(--muted); margin: 0; }
.invite-company { font-size: 1.7rem; margin: 6px 0 4px; line-height: 1.2; word-wrap: break-word; }
.invite-cat { color: var(--muted); margin: 0 0 10px; }
.invite-booth { display: inline-block; background: var(--brand); color: #fff; font-weight: 800; padding: 8px 16px; border-radius: 8px; letter-spacing: .03em; }
.invite-about { color: var(--ink); font-size: .95rem; margin: 14px 0 0; }
.invite-actions { padding: 0 20px 20px; }
.pass-logo { float: right; max-height: 44px; max-width: 110px; margin-left: 10px; padding: 3px; border-radius: 6px; background: #fff; object-fit: contain; }