:root{ --bg:#f7f8fb; --card:#ffffff; --txt:#111827; --muted:#6b7280; --primary:#2563eb; --accent:#f0f4ff; }

html, body { height: 100%; }
body { margin:0; background:var(--bg); color:var(--txt); font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, Noto Sans, "Apple Color Emoji","Segoe UI Emoji"; }

.shell { min-height:100vh; display:grid; grid-template-rows:auto 1fr auto; }
.header { display:flex; gap:12px; align-items:center; justify-content:space-between; padding:14px 20px; background:var(--card); box-shadow:0 1px 0 rgba(0,0,0,.06); }
.brand { font-weight:700; text-decoration:none; color:var(--txt); }
.nav a{ color:var(--txt); text-decoration:none; margin-left:14px; }
.nav a:hover{ color:var(--primary); }
.content{ padding:20px; }

h1{ font-size:1.5rem; margin:0 0 12px; }
.card {
    background: var(--card);
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 1px 6px rgba(0,0,0,0.06);
    overflow: hidden;
}
.grid{ display:grid; gap:12px; }
.grid.cols-2 {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.grid.cols-3 {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
@media (max-width: 900px){ .grid.cols-2,.grid.cols-3{ grid-template-columns: 1fr; } }

.label{ display:block; font-size:.9rem; color:var(--muted); margin-bottom:6px; }
.input,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
select,
textarea {
    width: 100%;
    max-width: 100%;
    padding: 10px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    box-sizing: border-box;
    font-size: 1rem;
    display: block;
}

.checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
}
.row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width: 900px){ .row{ grid-template-columns:1fr; } }

.btn-primary{ background:var(--primary); color:white; border:none; padding:10px 14px; border-radius:12px; cursor:pointer; }
.btn-primary:hover{ filter:brightness(1.05); }
.btn{ background:#e5e7eb; color:#111827; border:none; padding:8px 12px; border-radius:10px; cursor:pointer; }
.btn:hover{ filter:brightness(1.03); }

.alert{ background:#fff7ed; border:1px solid #fed7aa; padding:10px; border-radius:10px; }

.table{ width:100%; border-collapse: collapse; }
.table th, .table td{ text-align:left; padding:10px; border-bottom:1px solid #eef2f7; }
.center{ text-align:center; }

.badge{ display:inline-block; background:var(--accent); color:var(--primary); padding:2px 8px; border-radius:999px; font-size:.8rem;}

/* Layout fixes for Boeking pages */

/* Make sizing predictable so 100% width respects padding */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Responsive grid helpers used in markup: .grid.cols-2 / .grid.cols-3 */
.grid {
  display: grid;
  gap: 16px;
}
.grid.cols-2 {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.grid.cols-3 {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/* Card visual and containment so fields stay inside the white box */
.card {
  background: #ffffff;
  padding: 16px;
  border-radius: 8px;
  box-shadow: 0 1px 6px rgba(0,0,0,0.06);
  overflow: hidden;
}

/* Make form controls respect container width and not overflow */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
select,
textarea,
.input {
  width: 100%;
  max-width: 100%;
  padding: 8px 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #fff;
}

/* Small spacing helpers */
.label { display:block; margin-top:12px; font-weight:600; }
.btn { display:inline-block; padding:8px 12px; border-radius:6px; text-decoration:none; }
.btn-primary { background:#0078d4; color:#fff; padding:8px 12px; border-radius:6px; text-decoration:none; }