:root{--bg:#f7f8fc;--card:#ffffff;--muted:#6b7280;--text:#0b1220;--accent:#0a84ff;--accent2:#34c759;--border:#e8eaf0;--radius:18px;--shadow:0 12px 34px rgba(10,20,40,.06)}
*{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial}
a{color:#0a84ff;text-decoration:none}
.container{max-width:900px;margin:0 auto;padding:18px 16px 92px}

/* Header like screenshot (round avatar) */
.header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:8px}
.brand{display:flex;align-items:center;gap:12px}
.brand .mark{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,#b8d8ff,#c8fff0);display:grid;place-items:center;color:#003a73;font-weight:900}

/* Cards */
.card{background:var(--card);border-radius:22px;padding:18px;border:1px solid var(--border);box-shadow:var(--shadow)}
.grid{display:grid;gap:12px}
.small{font-size:12px;color:#7a8596}
h1{font-size:22px;margin:10px 0 6px}
h2{font-size:18px;margin:14px 0 8px;color:#2b3648}
p,li{line-height:1.6;color:#4b5665;font-size:15px}

/* "Welcome · Check‑in" pill bar */
.pillbar{display:inline-flex;gap:6px;background:#f1f5fb;border:1px solid #e4eaf5;color:#2b3648;padding:6px 10px;border-radius:999px;font-weight:600;font-size:13px}

/* List rows like screenshot */
.listpill{display:grid;gap:12px;margin-top:8px}
.listpill .row{background:#f7f9ff;border:1px solid #e6ecf7;border-radius:16px;padding:12px 14px}
.listpill .row .title{font-weight:700;color:#1f2937}
.listpill .row .desc{color:#6b7280;font-size:14px;margin-top:2px}
.listpill .row .value{font-weight:800;color:#0b1220}

/* Buttons */
.btn{display:inline-block;background:var(--accent);color:#fff;font-weight:700;padding:14px 16px;border-radius:14px;border:1px solid #0b5ed7}
.btn.block{display:block;text-align:center}
.btn.wa{background:var(--accent2);border-color:#1a9e51}
.btn.link{background:#fff;border:1px solid var(--border);color:var(--accent);font-weight:700}
.tip{font-size:12px;color:#7a8596;margin-top:8px}

/* Image cards */
.imgcard{border-radius:18px;overflow:hidden;border:1px solid var(--border);background:#fff}
.imgcard img{width:100%;display:block}
caption{display:block;text-align:center;font-size:12px;color:#7a8596;margin-top:6px}

/* Self check‑in */
.note{padding:12px 14px;border-left:4px solid var(--accent);background:#f2f9ff;border-radius:12px}
kbd{background:#f1f5f9;border:1px solid var(--border);padding:2px 6px;border-radius:6px;font-size:12px;color:#111827}

/* Footer */
footer{color:#7a8596;text-align:center;font-size:12px;margin:22px 0 110px}

/* Bottom bar (3 tabs, clear, not tall, edge padding) */
nav.appbar{position:fixed;bottom:0;left:0;right:0;background:#fffffff2;border-top:1px solid var(--border);
  display:grid;grid-template-columns:repeat(3,1fr);padding:8px env(safe-area-inset-left) 10px env(safe-area-inset-right);
  z-index:50;backdrop-filter:saturate(180%) blur(16px);padding-left:10px;padding-right:10px}
nav.appbar a{color:#4f5a6a;display:grid;grid-template-rows:auto auto;place-items:center;gap:6px;font-size:13px;padding:10px;border-radius:12px;font-weight:600}
nav.appbar a .icon{width:24px;height:24px}
nav.appbar a.active{color:#0b1220;background:#eef5ff;border:1px solid #d8e6ff}

/* Admin responsive form */
.formgrid{display:grid;gap:12px}
.formgrid.cols-2{grid-template-columns:1fr 1fr}
@media(max-width:760px){ .formgrid.cols-2{grid-template-columns:1fr} }
label{font-weight:600;color:#2b3648;font-size:14px;display:block;margin-bottom:6px}
input[type=text],input[type=time],input[type=url],input[type=tel],input[type=email],textarea{width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--border);background:#fff;color:#0b1220}
textarea{min-height:90px}
.separator{height:1px;background:#eaeef5;margin:12px 0}
.subtitle{color:#6b7280;font-size:14px;margin-top:4px}


.btn-whatsapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background-color: #25D366;
  border: none;
  color: #fff;                  /* pure white text */
  font-weight: 600;             /* bold but not too heavy */
  font-size: 17px;              /* larger, more elegant text */
  letter-spacing: 0.2px;        /* subtle spacing improves readability */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  padding: 10px 22px;
  border-radius: 40px;
  text-decoration: none;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
  transition: background-color 0.25s ease, transform 0.15s ease;
}

.btn-whatsapp:hover,
.btn-whatsapp:focus {
  background-color: #1ebe5d;
  transform: translateY(-1px);
}

.icon-wa {
  width: 48px !important;
  height: 48px !important;
  display: inline-block;
  vertical-align: middle;
  object-fit: contain;
  flex-shrink: 0;
}

.wa-glyph{
  width:24px;                 /* adjust size here */
  height:24px;
  background:url("icons/WhatsApp.webp") no-repeat center / contain;
  display:inline-block;
  flex-shrink:0;
}

/* Page fade system */
body.fade-init { opacity: 0; }
body.fade-in   { opacity: 1; transition: opacity 0.4s ease; }
body.fade-out  { opacity: 0; transition: opacity 0.4s ease; }

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  body.fade-in, body.fade-out { transition: none !important; }
}



.btn-google img {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
.btn-googleimg {
  display:inline-block;
  background:#fff;
  border:1px solid #dadce0;
  border-radius:14px;
  padding:6px 10px;
  box-shadow:0 2px 4px rgba(0,0,0,0.12);
  transition:transform .2s ease, box-shadow .2s ease;
}

.btn-googleimg:hover {
  transform:translateY(-1px);
  box-shadow:0 3px 6px rgba(0,0,0,0.18);
}

.google-rate-img {
  height:120px;       /* adjust size */
  width:auto;
  /*vertical-align: middle;*/
  display:block;
}


.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand-logo {
  width: 60px;
  height: 60px;
  border-radius: 50%;          /* makes it circular */
  object-fit: cover;           /* crops perfectly into the circle */
  background-color: #f8f8f8;   /* subtle fallback background */
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15); /* subtle depth */
}