/* Shared styles for the visitor check-in/out, delivery and self-collect forms (checkin.php, checkout.php, delivery.php, selfcollect.php and their hq* twins). Background image per page is selected via a data-bg attribute on , e.g. . */ *, *::before, *::after { box-sizing: border-box; } html, body { min-height: 100%; } body { margin: 0; padding: 0; font-family: Roboto, Arial, sans-serif; font-size: 16px; color: #444; line-height: 1.5; background-color: #eef3ee; } .page { display: flex; justify-content: center; padding: 24px 16px 48px; background-image: url("../images/pw2.jpg"); background-size: cover; background-position: center; background-attachment: fixed; min-height: 100vh; } body[data-bg="wahkong"] .page { background-image: url("../images/wahkong.jpg"); } form { width: 100%; max-width: 620px; padding: 24px; border-radius: 10px; background: #fff; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25); align-self: flex-start; } .banner { position: relative; height: 110px; margin: -24px -24px 20px; border-radius: 10px 10px 0 0; background-image: url("../images/back.PNG"); background-size: cover; background-position: center; display: flex; justify-content: center; align-items: center; text-align: center; overflow: hidden; } .banner::after { content: ""; background-color: rgba(0, 0, 0, 0.45); position: absolute; inset: 0; } .banner h1 { position: relative; z-index: 2; margin: 0; font-size: 32px; line-height: 1.2; color: #fff; } fieldset { border: none; padding: 0; margin: 0 0 16px; } legend { width: 100%; padding: 8px 12px; margin-bottom: 12px; font-size: 16px; font-weight: 700; color: #fff; background-color: #1c87c9; border-radius: 6px; } .colums { display: flex; flex-direction: column; gap: 4px; } .item { position: relative; margin: 10px 0; } .item label { display: block; margin-bottom: 4px; font-weight: 600; color: #555; } .item span { color: #d9364f; } .phone-group { display: flex; flex-wrap: wrap; gap: 8px; } .phone-group select.phone-code { flex: 1 1 140px; max-width: 100%; } .phone-group input { flex: 2 1 160px; } input, select, textarea { width: 100%; padding: 11px 10px; font-size: 16px; font-family: inherit; color: #333; border: 1px solid #ccc; border-radius: 6px; background-color: #fff; outline: none; } textarea { resize: vertical; min-height: 80px; } input:focus, select:focus, textarea:focus { border-color: #006622; box-shadow: 0 0 0 3px rgba(0, 102, 34, 0.15); } input:disabled, select:disabled { background-color: #f2f2f2; color: #777; } .btn-block { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; } button { width: 100%; padding: 13px 10px; border: none; border-radius: 6px; background: #1c87c9; font-size: 16px; font-weight: 600; color: #fff; cursor: pointer; min-height: 46px; } button:hover, button:focus-visible { background: #0692e8; } button[type="button"] { background: #6c757d; } button[type="button"]:hover, button[type="button"]:focus-visible { background: #565e64; } /* On wider screens, put fields in a two-column grid and buttons side by side */ @media (min-width: 640px) { .page { padding: 40px 16px 56px; } form { padding: 32px; } .banner { height: 140px; margin: -32px -32px 24px; } .banner h1 { font-size: 42px; } .colums { flex-direction: row; flex-wrap: wrap; column-gap: 24px; } .colums > .item { flex: 1 1 calc(50% - 24px); } .colums > .item:has(textarea) { flex-basis: 100%; } .btn-block { flex-direction: row; justify-content: center; } button { width: 180px; } }