*, *::before, *::after {
  margin: 0;
  padding: 0;
  font-family: "Segoe UI", Tahoma, sans-serif;
}

h1 { text-align: center; margin-bottom: 1.5rem; font-size: clamp(1.5rem, 4vw, 2rem); color: #333; }
label { display: block; margin: 1rem 0 0.4rem; font-weight: 600; color: #444; }
input[type="text"],[type="number"] { width: 40vh; padding: 0.75rem 0.9rem; border: 1px solid #ccc; border-radius: 8px; font-size: 1rem; }
input[type="text"]:focus { outline: none; border-color: #3b3a3d; }
input[type="number"]:focus { outline: none; border-color: #3b3a3d; }
.radio-group { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 0.4rem; }
.radio-group label { font-weight: normal; cursor: pointer; font-size: 1rem; }
.radio-group input { margin-right: 0.4rem; }
.btn { width: 100%; padding: 0.9rem; margin-top: 2rem; background: linear-gradient(135deg, #3b3a3d, #4f4f4f); color: #fff; border: none; border-radius: 10px; font-size: 1.1rem; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 15px rgba(0,0,0,0.2); }
#summary { display: none; color: #333; }
#hiddenData { display: none; }

#summary p { margin: 0.6rem 0; font-size: 1rem; }
#receipt { display: none; color: #333; }
#receipt p { margin: 0.6rem 0; font-size: 1rem; }
.namegroup { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.namegroup label { grid-column: span 2; }

html, body { height: 100%; }
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ---- Footer gap you can tweak ---- */
:root {
  --footer-gap: 56px; /* space between last content/button and the footer */
}

/* ---- Sticky footer layout ---- */
html, body { height: 100%; }
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding-top:50px;
}

/* Your main content wrapper (already on your page) */
.container {
  max-width: 500px;
  margin: 0 auto;
  padding: 0 5vw var(--footer-gap); /* bottom padding creates the gap above footer */
  width: 100%;
}

/* ---- Footer styles ---- */
.site-footer {
  margin-top: auto;           /* makes the footer stick to the bottom */
  width: 100%;
  background: #ffffff;        /* white background */
  border-top: 1px solid #e6e6e6;
  text-align: center;
  padding: 16px 5vw;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); /* iOS safe-area */
}

.footer-link {
  font-size: 14px;
  color: #707070;             /* link color */
  text-decoration: none;
}

.footer-link:hover,
.footer-link:focus {
  text-decoration: underline;
  color: #505050;             /* subtle hover */
}