
/* Mobile customer page v0.6.9: independent of theme and old mobile builder */
body.ztc-mobile-standalone{margin:0!important;background:#f6f6f6!important;color:#171717!important;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important}
body.ztc-mobile-standalone *{box-sizing:border-box}
body.ztc-mobile-standalone .ztc-mobile-page{width:100%;max-width:760px;margin:0 auto;padding:14px 12px 35px}
.ztc-public.ztc-v069{width:100%!important;max-width:760px!important;margin:0 auto!important;padding:0 10px 32px!important;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important}
.ztc-public.ztc-v069 #ztc-form.card{max-width:700px!important;margin:16px auto!important;padding:clamp(20px,4vw,36px)!important;border:1px solid #e8e8e8!important;border-radius:18px!important;box-shadow:0 10px 30px rgba(0,0,0,.035)!important;background:#fff!important}
.ztc-public.ztc-v069 #ztc-form .ztc-intro{margin:0 0 24px!important}
.ztc-public.ztc-v069 #ztc-form .eyebrow{font-size:11px!important;letter-spacing:.16em!important;font-weight:750!important;color:#777!important}
.ztc-public.ztc-v069 #ztc-form h1{font-size:clamp(30px,5vw,42px)!important;line-height:1.14!important;letter-spacing:-.04em!important;margin:10px 0!important;color:#161616!important}
.ztc-public.ztc-v069 #ztc-form .ztc-intro p{font-size:14px!important;line-height:1.6!important;color:#686868!important;margin:0!important}
.ztc-public.ztc-v069 #ztc-entry .ztc-receipt-picker{display:flex!important;flex-direction:column!important;gap:12px!important;width:100%!important}
.ztc-public.ztc-v069 #ztc-entry .ztc-picker-intro{display:flex!important;flex-direction:column!important;gap:4px!important}
.ztc-public.ztc-v069 #ztc-entry .ztc-picker-intro strong{font-size:16px!important;line-height:1.4!important}
.ztc-public.ztc-v069 #ztc-entry .ztc-picker-intro small{font-size:13px!important;line-height:1.5!important;color:#777!important}
.ztc-public.ztc-v069 #ztc-entry .ztc-photo-actions{display:flex!important;flex-direction:column!important;gap:10px!important;align-items:stretch!important;width:100%!important}
.ztc-public.ztc-v069 #ztc-entry label.ztc-photo-action{position:relative!important;display:flex!important;align-items:center!important;justify-content:center!important;width:100%!important;min-width:0!important;min-height:56px!important;margin:0!important;padding:15px!important;border-radius:12px!important;overflow:hidden!important;cursor:pointer!important;text-align:center!important}
.ztc-public.ztc-v069 #ztc-entry label#ztc-take-photo{background:#171717!important;border:1px solid #171717!important;color:#fff!important}
.ztc-public.ztc-v069 #ztc-entry label#ztc-choose-photo{background:#fff!important;border:1px solid #d5d5d5!important;color:#171717!important}
.ztc-public.ztc-v069 #ztc-entry label.ztc-photo-action strong{display:block!important;font-size:15px!important;line-height:1.4!important;color:inherit!important;font-weight:700!important;pointer-events:none!important}
.ztc-public.ztc-v069 #ztc-entry label.ztc-photo-action input.ztc-native-picker{position:absolute!important;inset:0!important;display:block!important;visibility:visible!important;width:100%!important;min-width:100%!important;max-width:100%!important;height:100%!important;min-height:100%!important;max-height:100%!important;opacity:0!important;z-index:5!important;margin:0!important;padding:0!important;border:0!important;pointer-events:auto!important;cursor:pointer!important}
.ztc-public.ztc-v069 #ztc-entry .ztc-selected{display:flex!important;flex-direction:column!important;align-items:center!important;gap:3px!important;background:#fafafa!important;border:1px dashed #ddd!important;border-radius:10px!important;padding:12px!important}
.ztc-public.ztc-v069 #ztc-entry .ztc-selected span{font-size:13px!important;line-height:1.4!important;font-weight:650!important;overflow-wrap:anywhere!important}
.ztc-public.ztc-v069 #ztc-entry .ztc-selected small{font-size:11px!important;line-height:1.4!important;color:#888!important}
.ztc-public.ztc-v069 #ztc-entry #ztc-receipt-preview[hidden]{display:none!important}
.ztc-public.ztc-v069 #ztc-entry #ztc-receipt-preview:not([hidden]){display:block!important;max-width:100%!important;max-height:260px!important;object-fit:contain!important;margin:0 auto!important}
.ztc-public.ztc-v069 .ztc-customer-summary{margin:0 0 22px!important;padding:16px!important;border:1px solid #ececec!important;border-radius:14px!important;background:#fafafa!important}
.ztc-public.ztc-v069 .ztc-account-top{display:flex!important;justify-content:space-between!important;align-items:center!important;flex-wrap:wrap!important;gap:12px!important}
.ztc-public.ztc-v069 .ztc-account-top form{margin:0!important}
.ztc-public.ztc-v069 .ztc-account-top button{width:auto!important;min-height:0!important;margin:0!important;padding:8px 12px!important;font-size:12px!important}
.ztc-public.ztc-v069 .ztc-reward-stats{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;margin:16px 0!important}
.ztc-public.ztc-v069 .ztc-reward-stats>div{display:flex!important;flex-direction:column!important;gap:4px!important;padding:14px!important;border:1px solid #ececec!important;border-radius:12px!important;background:#fff!important}
.ztc-public.ztc-v069 .ztc-reward-stats b{display:block!important;font-size:27px!important;line-height:1.1!important}
.ztc-public.ztc-v069 .ztc-reward-stats span{display:block!important;font-size:12px!important;line-height:1.5!important;color:#777!important}
.ztc-public.ztc-v069 #ztc-entry .check{font-size:13px!important;line-height:1.5!important}
.ztc-public.ztc-v069 #ztc-entry .ztc-submit{width:100%!important;min-height:54px!important;background:#171717!important;color:#fff!important;border-radius:11px!important;font-size:15px!important}
@media(max-width:640px){.ztc-public.ztc-v069{padding:0 4px 24px!important}.ztc-public.ztc-v069 #ztc-form.card{margin:10px auto!important;padding:23px 18px!important;border-radius:16px!important}.ztc-public.ztc-v069 #ztc-form h1{font-size:30px!important}}

/* v0.11.3: Keep camera control identical in size to Submit receipt. */
body .ztc.ztc-public #ztc-entry .ztc-photo-actions,
body .ztc.ztc-public #ztc-entry #ztc-take-photo,
body .ztc.ztc-public #ztc-entry .ztc-submit{box-sizing:border-box!important;max-width:100%!important;}
body .ztc.ztc-public #ztc-entry #ztc-take-photo{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:center!important;width:100%!important;min-width:0!important;height:54px!important;min-height:54px!important;max-height:54px!important;padding:0 16px!important;margin:0!important;border:1px solid #171717!important;border-radius:11px!important;background:#171717!important;color:#fff!important;box-shadow:none!important;}
body .ztc.ztc-public #ztc-entry #ztc-take-photo strong{font-size:15px!important;line-height:1.3!important;font-weight:700!important;}
body .ztc.ztc-public #ztc-entry .ztc-submit{height:54px!important;min-height:54px!important;padding:0 16px!important;border-radius:11px!important;}

/* v0.16.54 — tablet layout and secure customer gate. No changes to approved mobile design. */
.ztc-public .ztc-customer-gate{width:100%;max-width:540px;margin:12px auto 22px;padding:clamp(20px,3vw,34px);border:1px solid #e8e8e8;border-radius:18px;background:#fff;box-sizing:border-box;box-shadow:0 10px 32px #00000008}
.ztc-public .ztc-customer-gate h2{font-size:clamp(23px,3vw,30px);line-height:1.2;margin:0 0 10px;color:#1c2420}
.ztc-public .ztc-customer-gate p{font-size:14px;line-height:1.55;color:#59615d;margin:0 0 20px}
.ztc-public .ztc-customer-gate form{display:flex;flex-direction:column;gap:15px}
.ztc-public .ztc-customer-gate label{display:block;font-weight:650;font-size:13px;color:#28302c}
.ztc-public .ztc-customer-gate input:not([type=checkbox]),.ztc-public .ztc-customer-gate select{display:block;box-sizing:border-box;width:100%;min-width:0;min-height:49px;margin-top:7px;padding:11px 12px;border:1px solid #cdd3cf;border-radius:10px;background:white;color:#17221b;font-size:16px}
.ztc-public .ztc-customer-gate input:focus-visible,.ztc-public .ztc-customer-gate select:focus-visible{outline:2px solid #4d7961;outline-offset:1px}
.ztc-public .ztc-customer-gate button{width:100%;min-height:52px;padding:13px;border:0;border-radius:11px;background:#1e2b24;color:#fff;font-size:15px;font-weight:750;cursor:pointer}
.ztc-public .ztc-customer-gate fieldset{border:0;padding:0;margin:0;min-width:0}
.ztc-public .ztc-customer-gate legend{font-size:13px;font-weight:700;margin-bottom:8px}
.ztc-public .ztc-gate-dob{display:grid;grid-template-columns:.8fr 1.35fr 1fr;gap:9px}
.ztc-public .ztc-gate-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.ztc-public .ztc-customer-gate .ztc-gate-check{display:flex;align-items:flex-start;gap:10px;font-weight:500;line-height:1.4}
.ztc-public .ztc-customer-gate .ztc-gate-check input{width:19px;height:19px;flex-shrink:0;margin:0}
.ztc-public .ztc-customer-gate .ztc-gate-alert{padding:12px;border-radius:10px;background:#eef6f0;color:#244c33;font-weight:650}
.ztc-public .ztc-customer-gate .ztc-gate-foot{font-size:12px;margin:16px 0 0}
/* v0.16.56: tablet artwork is full-width; keep the form comfortably padded. */
@media(min-width:701px) and (max-width:1199px){
 body.ztc-mobile-standalone .ztc-mobile-page{max-width:none!important;width:100%!important;padding:0 0 32px!important;margin:0!important}
 body.ztc-mobile-standalone .ztc-public.ztc-v069{max-width:none!important;width:100%!important;padding:0!important;margin:0!important}
 body.ztc-mobile-standalone .ztc-public.ztc-v069 #ztc-form.card{max-width:none!important;width:100%!important;margin:0 auto 20px!important;padding:clamp(22px,3vw,36px)!important}
 body.ztc-mobile-standalone .ztc-public .ztc-hero,body.ztc-mobile-standalone .ztc-public .ztc-campaign-banner{max-width:none!important;width:100%!important;margin:0!important;overflow:hidden!important;border-radius:0!important}
 body.ztc-mobile-standalone .ztc-public .ztc-hero img,body.ztc-mobile-standalone .ztc-public .ztc-campaign-banner img{display:block;width:100%!important;height:auto!important;max-height:none!important;object-fit:cover!important;object-position:center!important}
}
@media(max-width:540px){.ztc-public .ztc-gate-grid{grid-template-columns:1fr}.ztc-public .ztc-gate-dob{gap:6px}.ztc-public .ztc-customer-gate{padding:20px 15px}}

/* v0.16.74: compact, centered post-photo preview; keep submit in sight on phones. */
@media(max-width:700px){
 .ztc.ztc-public #ztc-entry .ztc-receipt-alignment:has(#ztc-receipt-preview:not([hidden])){max-width:100%!important;margin:6px auto!important;min-height:0!important;text-align:center!important}
 .ztc.ztc-public #ztc-entry #ztc-receipt-preview:not([hidden]){display:block!important;width:auto!important;max-width:100%!important;max-height:145px!important;object-fit:contain!important;margin:0 auto!important}
 .ztc.ztc-public #ztc-entry .ztc-selected:has(~ .ztc-receipt-alignment #ztc-receipt-preview:not([hidden])){padding:7px 10px!important}
 .ztc.ztc-public #ztc-entry .ztc-once-terms{margin:5px 0!important}
}

/* v0.16.75: compact camera return; no jump to the submit button. */
@media(max-width:700px){
 .ztc.ztc-public #ztc-entry:has(#ztc-receipt-preview:not([hidden])) .ztc-receipt-picker{gap:5px!important;margin:4px 0!important}
 .ztc.ztc-public #ztc-entry:has(#ztc-receipt-preview:not([hidden])) .ztc-receipt-alignment{padding:2px!important;margin:2px auto!important}
 .ztc.ztc-public #ztc-entry #ztc-receipt-preview:not([hidden]){max-height:112px!important}
 .ztc.ztc-public #ztc-entry:has(#ztc-receipt-preview:not([hidden])) .ztc-submit{margin-top:5px!important}
}

/* v0.17.90: enforce exactly two promotion cards per row on mobile.
   This stylesheet loads after app.css. */
html body .ztc-public #ztc-promotion-panel .ztc-promotions-grid,
html body #ztc-promotion-panel .ztc-promotions-grid{
 display:grid!important;
 grid-template-columns:repeat(2,minmax(0,1fr))!important;
 grid-auto-flow:row!important;gap:10px!important;
 width:100%!important;max-width:100%!important;
 align-items:start!important;box-sizing:border-box!important;
}
html body .ztc-public #ztc-promotion-panel .ztc-promotions-grid > details.ztc-promo-item,
html body #ztc-promotion-panel .ztc-promotions-grid > details.ztc-promo-item{
 display:block!important;grid-column:auto!important;
 width:auto!important;min-width:0!important;max-width:100%!important;
 margin:0!important;box-sizing:border-box!important;
}
html body #ztc-promotion-panel .ztc-promotions-grid .ztc-promo-preview{
 min-width:0!important;max-width:100%!important;box-sizing:border-box!important;
}
html body #ztc-promotion-panel .ztc-promotions-grid .ztc-promo-preview img{
 width:100%!important;max-width:100%!important;height:auto!important;
 aspect-ratio:4/5!important;object-fit:cover!important;
}

/* v0.18.27: three-app visual alignment */

/* Customer: edge-to-edge campaign image, including the slideshow variant. */
@media(max-width:800px){
 html body.ztc-mobile-standalone{margin:0!important;padding:0!important;overflow-x:hidden!important;background:#fff!important}
 html body.ztc-mobile-standalone main.ztc-mobile-page{width:100%!important;max-width:none!important;margin:0!important;padding:0!important;overflow:visible!important}
 html body.ztc-mobile-standalone .ztc.ztc-public.ztc-app-clean{width:100%!important;max-width:none!important;margin:0!important;padding:0!important;overflow:visible!important}
 html body.ztc-mobile-standalone .ztc-public .ztc-hero,
 html body.ztc-mobile-standalone .ztc-public .ztc-campaign-banner{
   display:block!important;position:relative!important;left:0!important;transform:none!important;
   width:100%!important;max-width:none!important;margin:0!important;padding:0!important;
   border:0!important;border-radius:0!important;box-shadow:none!important;overflow:hidden!important;
 }
 html body.ztc-mobile-standalone .ztc-public .ztc-hero picture,
 html body.ztc-mobile-standalone .ztc-public .ztc-campaign-banner picture{display:block!important;width:100%!important;margin:0!important;padding:0!important}
 html body.ztc-mobile-standalone .ztc-public .ztc-hero img,
 html body.ztc-mobile-standalone .ztc-public .ztc-campaign-banner img{display:block!important;width:100%!important;max-width:100%!important;border-radius:0!important;margin:0!important;padding:0!important}
 html body.ztc-mobile-standalone .ztc-public #ztc-form.card{
   width:100%!important;max-width:none!important;margin:-14px 0 0!important;
   border-radius:23px 23px 0 0!important;position:relative!important;
 }
}


/* v0.18.28: actual customer wrapper is .ztc-v071; older v069 overrides
   used important padding and were not addressed by previous generic rules. */
@media(max-width:800px){
 html body.ztc-mobile-standalone main.ztc-mobile-page,
 html body.ztc-mobile-standalone .ztc.ztc-public.ztc-v071.ztc-app-clean{
   width:100%!important;max-width:none!important;margin:0!important;
   padding:0!important;border:0!important;box-sizing:border-box!important;
 }
 html body.ztc-mobile-standalone .ztc.ztc-public.ztc-v071.ztc-app-clean>.ztc-hero,
 html body.ztc-mobile-standalone .ztc.ztc-public.ztc-v071.ztc-app-clean>.ztc-campaign-banner{
   width:100vw!important;max-width:none!important;margin:0!important;padding:0!important;
   left:50%!important;transform:translateX(-50%)!important;
   border-radius:0!important;box-sizing:border-box!important;
 }
 html body.ztc-mobile-standalone .ztc.ztc-public.ztc-v071 .ztc-hero-track,
 html body.ztc-mobile-standalone .ztc.ztc-public.ztc-v071 .ztc-hero-slide,
 html body.ztc-mobile-standalone .ztc.ztc-public.ztc-v071 .ztc-hero-slide picture{
   width:100%!important;max-width:none!important;margin:0!important;padding:0!important;
 }
 html body.ztc-mobile-standalone .ztc.ztc-public.ztc-v071 .ztc-hero-slide img,
 html body.ztc-mobile-standalone .ztc.ztc-public.ztc-v071 .ztc-campaign-banner img{
   display:block!important;width:100%!important;max-width:none!important;
   margin:0!important;padding:0!important;border-radius:0!important;
 }
}

/* 0.18.59: CUSTOMER ONLY. Match merchant outer shell without affecting admin/merchant.
   No viewport-width elements, no global theme rules, no changes to wallet cards. */
html body.ztc-mobile-standalone{margin:0!important;padding:0!important;overflow-x:clip!important;background:#f7f7f7!important}
html body.ztc-mobile-standalone main.ztc-mobile-page{width:100%!important;max-width:780px!important;margin:0 auto!important;padding:0!important;box-sizing:border-box!important}
html body.ztc-mobile-standalone main.ztc-mobile-page>.ztc.ztc-public.ztc-v071.ztc-app-clean{width:100%!important;max-width:760px!important;margin:0 auto!important;padding:0!important;box-sizing:border-box!important}
@media(max-width:800px){
 html body.ztc-mobile-standalone main.ztc-mobile-page{max-width:100%!important}
 html body.ztc-mobile-standalone main.ztc-mobile-page>.ztc.ztc-public.ztc-v071.ztc-app-clean{max-width:100%!important}
 html body.ztc-mobile-standalone main.ztc-mobile-page>.ztc.ztc-public.ztc-v071.ztc-app-clean>.ztc-hero,
 html body.ztc-mobile-standalone main.ztc-mobile-page>.ztc.ztc-public.ztc-v071.ztc-app-clean>.ztc-campaign-banner{width:100%!important;max-width:100%!important;left:auto!important;transform:none!important;margin:0!important;padding:0!important}
}

/* 0.18.60: CUSTOMER APP ONLY. iPhone edge alignment: do not alter
   Merchant, Admin, wallet cards or the internal form padding. */
@media(max-width:800px){
 html body.ztc-mobile-standalone,
 html body.ztc-mobile-standalone main.ztc-mobile-page,
 html body.ztc-mobile-standalone main.ztc-mobile-page>.ztc.ztc-public.ztc-v071.ztc-app-clean{
  width:100%!important;max-width:none!important;min-width:0!important;
  margin-left:0!important;margin-right:0!important;padding-left:0!important;padding-right:0!important;
  border-left:0!important;border-right:0!important;box-sizing:border-box!important;
 }
 html body.ztc-mobile-standalone main.ztc-mobile-page>.ztc.ztc-public.ztc-v071.ztc-app-clean>.ztc-hero,
 html body.ztc-mobile-standalone main.ztc-mobile-page>.ztc.ztc-public.ztc-v071.ztc-app-clean>.ztc-campaign-banner{
  width:100vw!important;max-width:none!important;
  position:relative!important;left:50%!important;transform:translateX(-50%)!important;
  margin:0!important;padding:0!important;border-radius:0!important;
 }
 html body.ztc-mobile-standalone main.ztc-mobile-page>.ztc.ztc-public.ztc-v071.ztc-app-clean>#ztc-form.card{
  width:100%!important;max-width:none!important;margin-left:0!important;margin-right:0!important;
  box-sizing:border-box!important;
 }
}
/* Keep the customer magic-link status as the existing plain introduction,
   not a persistent tinted alert panel. */
html body .ztc-public #ztc-customer-gate>p.ztc-gate-alert:empty{display:none!important}

/* v0.18.61: CUSTOMER SIGN-IN ONLY. The #ztc-form card already wraps
   .ztc-customer-gate; render ONE white panel rather than two nested cards.
   This intentionally does not touch the logged-in wallet, merchant or admin. */
html body.ztc-mobile-standalone{background:#fff!important}
html body.ztc-mobile-standalone main.ztc-mobile-page{background:#fff!important}
html body.ztc-mobile-standalone .ztc.ztc-public.ztc-app-clean #ztc-form.card:has(> .ztc-customer-gate){
  width:100%!important;max-width:none!important;
  margin:-15px 0 0!important;padding:clamp(22px,4vw,34px)!important;
  border:0!important;border-radius:24px 24px 0 0!important;
  box-shadow:none!important;background:#fff!important;
  box-sizing:border-box!important;position:relative!important;
  min-height:0!important;
}
html body.ztc-mobile-standalone .ztc.ztc-public.ztc-app-clean #ztc-form.card>.ztc-customer-gate{
  display:block!important;width:100%!important;max-width:none!important;
  margin:0!important;padding:0!important;border:0!important;
  border-radius:0!important;box-shadow:none!important;background:transparent!important;
  box-sizing:border-box!important;
}
html body.ztc-mobile-standalone .ztc.ztc-public.ztc-app-clean #ztc-form.card>.ztc-customer-gate>.ztc-gate-alert[hidden]{display:none!important}
@media(max-width:700px){
 html body.ztc-mobile-standalone .ztc.ztc-public.ztc-app-clean #ztc-form.card:has(> .ztc-customer-gate){
  padding:26px 22px 34px!important;
  border-radius:22px 22px 0 0!important;
 }
}
/* Preserve natural edge-to-edge image on small screens. No 100vw hacks. */
@media(max-width:800px){
 html body.ztc-mobile-standalone main.ztc-mobile-page>.ztc.ztc-public.ztc-v071.ztc-app-clean>.ztc-campaign-banner,
 html body.ztc-mobile-standalone main.ztc-mobile-page>.ztc.ztc-public.ztc-v071.ztc-app-clean>.ztc-hero{
  width:100%!important;max-width:100%!important;left:auto!important;transform:none!important;
  margin:0!important;padding:0!important;border-radius:0!important;
 }
}
