/* ================================================================
   guestbook.css — VISITOR MANIFEST
   A guestbook that feels like signing a station's paper log:
   wax-seal stamps, a live preview of your entry, and a manifest
   of every traveler who passed through.
================================================================ */

/* ── Header strip ─────────────────────────────────────────────── */
.gbHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #2d0048;
  background: rgba(8,0,24,0.75);
  padding: 12px 16px;
  margin-bottom: 22px;
  flex-wrap: wrap;
  gap: 10px;
}

.gbHeaderLabel {
  font-family: monospace;
  font-size: 9px;
  color: #7a00aa;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.gbHeaderTitle {
  font-size: 14px;
  color: #d4c8ff;
  letter-spacing: 2px;
  margin-top: 4px;
  text-shadow: 0 0 10px #aa66ff;
}

.gbCount {
  font-family: monospace;
  font-size: 10px;
  color: #44ff99;
  letter-spacing: 2px;
}

/* ── Sign panel ───────────────────────────────────────────────── */
.gbForm {
  border: 1px solid #2d0048;
  border-left: 3px solid #7a00aa;
  background: rgba(8,0,24,0.6);
  padding: 16px 18px;
  margin-bottom: 26px;
}

.gbFormTitle {
  font-family: monospace;
  font-size: 9px;
  color: #7a00aa;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.gbRow {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.gbField {
  flex: 1;
  min-width: 180px;
}

.gbLabel {
  display: block;
  font-family: monospace;
  font-size: 9px;
  color: #9b86c8;
  letter-spacing: 2px;
  margin-bottom: 5px;
}

.gbLabel .gbOptional { color: #443366; }

.gbInput,
.gbTextarea {
  width: 100%;
  box-sizing: border-box;
  font-family: monospace;
  font-size: 12px;
  color: #d4c8ff;
  background: rgba(0,0,0,0.55);
  border: 1px solid #2d0048;
  padding: 9px 10px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.gbInput:focus,
.gbTextarea:focus {
  outline: none;
  border-color: #7a00aa;
  box-shadow: 0 0 8px rgba(122,0,170,0.35);
}

.gbTextarea {
  resize: vertical;
  min-height: 74px;
  line-height: 1.6;
}

.gbCounter {
  font-family: monospace;
  font-size: 9px;
  color: #443366;
  text-align: right;
  margin-top: 3px;
  letter-spacing: 1px;
}
.gbCounter.gbNearLimit { color: #ffaa44; }

/* honeypot — off-screen for humans, delicious for bots */
.gbNectar {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ── Stamp picker ─────────────────────────────────────────────── */
.gbStamps {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.gbStamp {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  background: rgba(0,0,0,0.5);
  border: 1px solid #2d0048;
  border-radius: 50%;
  cursor: pointer;
  color: #cc99ff;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
}

.gbStamp:hover { border-color: #7a00aa; transform: translateY(-2px); }

.gbStamp.gbStampOn {
  border-color: #cc99ff;
  box-shadow: 0 0 12px rgba(204,153,255,0.45);
  background: rgba(60,0,90,0.5);
}

/* ── Live preview ─────────────────────────────────────────────── */
.gbPreviewLabel {
  font-family: monospace;
  font-size: 9px;
  color: #443366;
  letter-spacing: 3px;
  margin: 4px 0 8px 0;
}

/* ── Submit ───────────────────────────────────────────────────── */
.gbSubmitRow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.gbSubmit {
  font-family: monospace;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 2px;
  color: #0a0014;
  background: linear-gradient(to bottom, #cc99ff, #9955dd);
  border: 1px solid #cc99ff;
  padding: 11px 26px;
  cursor: pointer;
  transition: box-shadow 0.2s, transform 0.15s;
}
.gbSubmit:hover {
  box-shadow: 0 0 16px rgba(204,153,255,0.5);
  transform: translateY(-1px);
}
.gbSubmit:disabled { opacity: 0.5; cursor: wait; transform: none; }

.gbStatus {
  font-family: monospace;
  font-size: 10px;
  letter-spacing: 1px;
  color: #44ff99;
}
.gbStatus.gbErr { color: #ff6688; }

/* ── Entries ──────────────────────────────────────────────────── */
.gbEntry {
  display: flex;
  gap: 14px;
  border: 1px solid #2d0048;
  background: rgba(8,0,24,0.55);
  padding: 14px 16px;
  margin-bottom: 14px;
  animation: gbAppear 0.4s ease-out;
}

@keyframes gbAppear {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* the wax-seal stamp */
.gbSeal {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  color: #cc99ff;
  background: radial-gradient(circle at 35% 30%, rgba(90,20,140,0.8), rgba(30,0,50,0.9));
  border: 1px solid #5500aa;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(122,0,170,0.35), inset 0 0 8px rgba(0,0,0,0.6);
  text-shadow: 0 0 8px rgba(204,153,255,0.6);
}

.gbEntryBody { flex: 1; min-width: 0; }

.gbEntryHead {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.gbName {
  font-size: 13px;
  color: #d4c8ff;
  letter-spacing: 1px;
  font-weight: bold;
  text-shadow: 0 0 8px rgba(170,102,255,0.35);
  word-break: break-word;
}

.gbDate {
  font-family: monospace;
  font-size: 9px;
  color: #5544aa;
  letter-spacing: 1px;
}

.gbMsg {
  font-size: 12px;
  color: #b9a8e0;
  line-height: 1.7;
  white-space: pre-line;
  word-break: break-word;
  margin: 0;
}

.gbSite {
  display: inline-block;
  font-family: monospace;
  font-size: 10px;
  letter-spacing: 1px;
  color: #44ff99;
  text-decoration: none;
  border-bottom: 1px dotted #1f4d33;
  margin-top: 7px;
  word-break: break-all;
}
.gbSite:hover { color: #88ffbb; border-bottom-color: #44ff99; }

/* ── Empty / load more / error ───────────────────────────────── */
.gbEmpty {
  font-family: monospace;
  font-size: 11px;
  color: #5544aa;
  letter-spacing: 1px;
  text-align: center;
  padding: 30px 10px;
  border: 1px dashed #2d0048;
}

.gbMore {
  display: block;
  width: 100%;
  font-family: monospace;
  font-size: 10px;
  letter-spacing: 2px;
  color: #9b86c8;
  background: rgba(8,0,24,0.6);
  border: 1px solid #2d0048;
  padding: 12px;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.gbMore:hover { border-color: #7a00aa; color: #cc99ff; }

/* ── Mobile ───────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .gbRow { flex-direction: column; gap: 10px; }
  .gbSeal { width: 38px; height: 38px; font-size: 16px; }
}