:root {
  --bg-a: #0a1630;
  --bg-b: #113468;
  --card: rgba(9, 21, 43, 0.86);
  --stroke: rgba(151, 186, 240, 0.34);
  --text: #ebf4ff;
  --muted: #a9c1e6;
  --ok: #16b67f;
  --primary: #2f79ff;
  --danger: #d05871;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Segoe UI", "SF Pro Text", "Helvetica Neue", sans-serif;
  color: var(--text);
  min-height: 100vh;
  background:
    radial-gradient(circle at 15% 15%, rgba(78, 148, 255, 0.22), transparent 32%),
    radial-gradient(circle at 90% 20%, rgba(35, 177, 132, 0.16), transparent 36%),
    linear-gradient(140deg, var(--bg-a), var(--bg-b));
}

.guest-shell {
  max-width: 1100px;
  margin: 0 auto;
  padding: 22px 16px 28px;
  display: grid;
  gap: 14px;
}

.guest-header h1 { margin: 0; font-size: 32px; }
.guest-header p { margin: 8px 0 0; color: var(--muted); }

.properties {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 10px;
}

.property-card {
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: 14px;
  overflow: hidden;
}

.property-photo {
  width: 100%;
  height: 170px;
  object-fit: cover;
  display: block;
  background: linear-gradient(135deg, #214273, #183052);
}

.property-body { padding: 10px; }
.property-body h3 { margin: 0; font-size: 18px; }
.property-body p { margin: 6px 0; font-size: 14px; color: var(--muted); }
.property-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.property-tags span {
  border: 1px solid rgba(130, 161, 208, 0.4);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 12px;
}

.booking-card,
.confirmation,
.status {
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: 14px;
  padding: 12px;
}

.booking-card h2,
.booking-card h3 {
  margin: 0 0 10px;
}

.grid-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.grid-form .full { grid-column: 1 / -1; }

label {
  display: grid;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
}

input, select, textarea, button {
  border-radius: 10px;
  border: 1px solid rgba(142, 172, 219, 0.42);
  background: rgba(12, 28, 53, 0.92);
  color: var(--text);
  padding: 10px;
  font-size: 14px;
}

textarea { resize: vertical; }

.btn {
  cursor: pointer;
  border: 0;
  font-weight: 700;
}
.btn.primary { background: linear-gradient(135deg, #2f79ff, #38a4ff); }
.btn.success { background: linear-gradient(135deg, #139a6d, #18cf92); }

.quote-result {
  margin-top: 10px;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid rgba(136, 168, 214, 0.35);
  background: rgba(13, 31, 57, 0.75);
}

.quote-ok { color: #9cf7d2; }
.quote-no { color: #ffb5c5; }

.confirmation h3 { margin: 0 0 8px; }
.confirmation p { margin: 5px 0; color: var(--muted); }

.status { color: #ffe2a6; }
.hidden { display: none; }

@media (max-width: 760px) {
  .grid-form { grid-template-columns: 1fr; }
}