.process-page { min-height: 100vh; background: #eef4e9; }
.process-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 16px clamp(18px, 4vw, 56px); color: var(--white); background: var(--ink); }
.process-header-actions { display: flex; align-items: center; gap: 18px; font-weight: 700; }
.process-main { width: min(1180px, calc(100% - 36px)); margin: 0 auto; padding: 54px 0 80px; }
.process-progress { display: flex; align-items: center; gap: 18px; margin-bottom: 54px; color: var(--teal-dark); font-size: .82rem; font-weight: 900; text-transform: uppercase; }
.process-progress-track { flex: 1; height: 6px; overflow: hidden; border-radius: 999px; background: #d5dfd3; }
.process-progress-track i { display: block; width: 25%; height: 100%; border-radius: inherit; background: var(--teal); }
.scanner-layout { display: grid; grid-template-columns: .85fr 1.15fr; align-items: center; gap: clamp(34px, 7vw, 100px); }
.scanner-copy h1 { font-size: clamp(2.1rem, 4.5vw, 4.4rem); }
.scanner-copy > p { max-width: 570px; font-size: 1.08rem; }
.scanner-help { max-width: 570px; margin-top: 34px; padding: 22px; border-left: 4px solid var(--teal); background: rgba(255,255,255,.6); }
.scanner-help p { margin: 7px 0 0; }
.scanner-card { padding: clamp(18px, 3vw, 30px); border: 1px solid var(--line); border-radius: 12px; background: var(--white); box-shadow: var(--shadow); }
.scanner-view { position: relative; min-height: 390px; overflow: hidden; border-radius: 8px; background: var(--ink); }
.scanner-view video { display: block; width: 100%; height: 390px; object-fit: cover; }
.scanner-placeholder { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 18px; color: rgba(255,255,255,.78); }
.scanner-placeholder svg { width: 70px; height: 70px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.scanner-frame { position: absolute; inset: 50% auto auto 50%; width: min(62%, 250px); aspect-ratio: 1; border: 3px solid rgba(255,255,255,.9); border-radius: 18px; transform: translate(-50%,-50%); box-shadow: 0 0 0 999px rgba(0,0,0,.2); pointer-events: none; }
.scanner-button, .scanner-upload { width: 100%; margin-top: 16px; }
.scanner-upload { border: 1px solid var(--line); color: var(--teal-dark); background: var(--white); }
.scanner-status { min-height: 26px; margin: 16px 0 0; text-align: center; font-weight: 700; }
.scanner-status.success { color: var(--teal); }
.scanner-status.error { color: var(--coral); }
@media (max-width: 800px) { .scanner-layout { grid-template-columns: 1fr; } .scanner-copy h1 { font-size: 2.2rem; } }
@media (max-width: 640px) { .process-header { padding: 12px 14px; } .process-header-actions { gap: 10px; font-size: .78rem; } .process-main { width: min(100% - 28px, 1180px); padding-top: 34px; } .process-progress { margin-bottom: 38px; } .scanner-view, .scanner-view video { min-height: 310px; height: 310px; } }

/* Landing-page-aligned booking shell */
.process-page { color: var(--ink); background: radial-gradient(circle at 8% 0%, rgba(184,199,172,.34), transparent 30rem), linear-gradient(180deg, var(--paper) 0%, #eef4e9 100%); }
.process-header { position: sticky; top: 0; z-index: 50; min-height: 84px; padding-block: 10px; background: rgba(23,33,31,.97); border-bottom: 3px solid var(--gold); box-shadow: 0 12px 30px rgba(23,33,31,.15); backdrop-filter: blur(12px); }
.process-header .brand-logo { height: 58px; }
.process-header .brand-tagline { color: rgba(255,255,255,.72); }
.process-header-actions { gap: 12px; }
.process-header-actions > a:first-child { padding: 10px 12px; color: rgba(255,255,255,.8); }
.process-header-actions > a:first-child:hover { color: var(--white); }
.process-header .header-cta { border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.08); }
.process-main { width: min(1120px, calc(100% - 36px)); padding: 36px 0 88px; }
.process-progress { display: grid; grid-template-columns: minmax(100px, auto) 1fr; margin-bottom: 48px; color: var(--teal-dark); letter-spacing: .12em; }
.process-progress > span { width: fit-content; padding: 8px 12px; border-radius: 999px; background: rgba(14,108,104,.1); }
.process-progress-track { height: 8px; background: rgba(14,108,104,.13); box-shadow: inset 0 1px 2px rgba(23,33,31,.08); }
.process-progress-track i { background: linear-gradient(90deg, var(--teal), var(--gold)); transition: width .35s ease; }
.scanner-help { border-left-color: var(--gold); background: rgba(255,255,255,.72); }
.scanner-card { border-radius: 14px; }
.scanner-frame { border-color: var(--gold); }
@media (max-width:640px) { .process-header { min-height:70px; padding:8px 14px; } .process-header .brand-logo { height:46px; max-width:155px; } .process-header .brand-tagline { display:none; } .process-header-actions { gap:4px; font-size:.76rem; } .process-main { width:min(100% - 24px,1120px); padding-top:24px; } .process-progress { grid-template-columns:1fr; gap:10px; margin-bottom:30px; } }

/* White landing-page shell */
.process-page {
  background:
    radial-gradient(circle at 15% 5%, rgba(213, 155, 36, 0.055), transparent 32rem),
    radial-gradient(circle at 90% 25%, rgba(14, 108, 104, 0.045), transparent 36rem),
    linear-gradient(180deg, #fdfdfb 0%, #f7f9f7 55%, #fbfaf7 100%);
}
.process-header {
  position: relative;
  min-height: 76px;
  padding: 8px max(5.5vw, 25px);
  color: #071a34;
  background: #fff;
  border-bottom: 1px solid #e6e9ee;
  box-shadow: none;
  backdrop-filter: none;
}
.process-header .brand-logo {
  height: 58px;
  filter: none;
}
.process-header .brand-tagline { color: #657184; }
.process-header-actions > a:first-child { color: #657184; }
.process-header-actions > a:first-child:hover { color: #d59b24; }
.process-header .header-cta {
  border-color: #071a34;
  color: #071a34;
  background: #fff;
}
.process-header .header-cta:hover { color: #fff; background: #071a34; }
.process-main { width: min(960px, calc(100% - 36px)); padding: 38px 0 80px; }
.process-progress { margin-bottom: 42px; color: #657184; }
.process-progress > span { padding: 0; color: #d59b24; background: transparent; }
.process-progress-track { height: 4px; background: #e6e9ee; box-shadow: none; }
.process-progress-track i { background: #d59b24; }
.scanner-help { background: #f7f4ed; }
@media (max-width:640px) {
  .process-header { min-height: 70px; padding: 7px 14px; }
  .process-main { padding-top: 26px; }
}

/* Responsive button alignment v1 */
.process-header .header-cta{display:inline-flex;align-items:center;justify-content:center;min-height:42px;line-height:1.2;text-align:center;white-space:normal}@media(max-width:640px){.process-header{gap:8px}.process-header-actions{min-width:0;flex-wrap:wrap;justify-content:flex-end}.process-header-actions>a{min-height:40px;padding:8px!important}.process-header .header-cta{max-width:120px}.process-main{width:calc(100% - 24px)}}@media(max-width:390px){.process-header{align-items:flex-start}.process-header .brand-logo{max-width:120px}.process-header-actions{font-size:.7rem}}

/* Match the public homepage header throughout the booking flow. */
.process-header{min-height:76px;padding:8px max(5.5vw,25px);align-items:center;gap:24px;background:#000;color:#fff;border-bottom:1px solid #222}
.process-header .brand-logo{width:168px;height:40.6px;max-width:100%;object-fit:contain;object-position:center;border-radius:0;background:transparent}
.process-header-actions{flex-wrap:nowrap;gap:24px;font-size:.84rem}
.process-header-actions>a,.process-header-actions>a:first-child,.process-header-actions>a:first-child:hover{color:#fff}
.process-header .header-cta{color:#fff;background:transparent;border-color:#ffffff80}
.process-header .header-cta:hover{color:#fff;background:#222}
.process-header .header-cta[hidden]{display:none}
.process-header .language{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0;flex-shrink:0}
.process-header .language-flag{display:block;width:30px;height:20px;border-radius:2px;box-shadow:0 0 0 1px #ffffff55}
.process-header .language:hover .language-flag{box-shadow:0 0 0 2px #fff}
.process-header a:focus-visible{outline:2px solid #fff;outline-offset:4px}
@media(max-width:620px){.process-header{min-height:70px;padding:7px 14px;gap:12px}.process-header .brand-logo{width:126px;height:32.2px;max-width:126px}.process-header-actions{gap:12px}}

/* Match the visible logo edge to the homepage mobile header margin. */
@media(max-width:620px){.process-header .brand-logo{object-position:left center;transform:translateX(-11.5px)}}