/* RivieraHost — guest check-in. Brand: ink #111 / gold #c9a84c (site palette). */
:root {
  --gold: #c9a84c;
  --gold-dark: #a9892f;
  --ink: #111111;
  --text: #3a3a3a;
  --muted: #787878;
  --light: #f7f6f2;
  --border: #e4dfd6;
  --ok: #1f7a4d;
  --err: #b3261e;
  --radius: 14px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--text);
  background: var(--light);
  line-height: 1.6;
}
a { color: var(--gold-dark); }
.wrap { max-width: 860px; margin: 0 auto; padding: 0 20px; }

/* ---------- header ---------- */
.ci-header { background: var(--ink); color: #fff; padding: 30px 0 26px; }
.ci-header .wrap { display: flex; flex-direction: column; gap: 6px; }
.ci-brand { font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); font-weight: 600; }
.ci-header h1 { font-size: 1.55rem; font-weight: 600; }
.ci-header p { color: rgba(255, 255, 255, .68); font-size: .93rem; max-width: 62ch; }
.ci-langs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.ci-lang {
  background: rgba(255, 255, 255, .1); color: #fff; border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px; padding: 3px 12px; font: inherit; font-size: .78rem; cursor: pointer;
}
.ci-lang[aria-pressed="true"] { background: var(--gold); color: var(--ink); border-color: var(--gold); font-weight: 600; }

/* ---------- stepper ---------- */
.ci-steps { background: #fff; border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 5; }
.ci-steps ol { display: flex; gap: 4px; list-style: none; max-width: 860px; margin: 0 auto; padding: 0 20px; overflow-x: auto; }
.ci-steps li { flex: 1 0 auto; padding: 12px 10px; font-size: .82rem; color: var(--muted); border-bottom: 3px solid transparent; white-space: nowrap; }
.ci-steps li b { display: inline-flex; width: 20px; height: 20px; margin-right: 7px; border-radius: 50%; background: var(--light); color: var(--muted); align-items: center; justify-content: center; font-size: .72rem; }
.ci-steps li[data-state="current"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--gold); }
.ci-steps li[data-state="current"] b { background: var(--gold); color: #fff; }
.ci-steps li[data-state="done"] { color: var(--ok); border-bottom-color: transparent; }
.ci-steps li[data-state="done"] b { background: var(--ok); color: #fff; }

/* ---------- cards ---------- */
main { padding: 26px 0 60px; }
.ci-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 24px 26px; margin-bottom: 20px; }
.ci-card > h2 { font-size: 1.15rem; color: var(--ink); margin-bottom: 6px; }
.ci-card > h3 { font-size: .95rem; color: var(--ink); margin: 22px 0 10px; }
.ci-intro { color: var(--muted); font-size: .9rem; margin-bottom: 16px; max-width: 68ch; }
.ci-note { background: var(--light); border-left: 3px solid var(--gold); padding: 10px 14px; border-radius: 0 8px 8px 0; font-size: .86rem; margin: 14px 0; }

.ci-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.ci-grid.three { grid-template-columns: repeat(3, 1fr); }
.ci-field { display: flex; flex-direction: column; gap: 5px; }
.ci-field.full { grid-column: 1 / -1; }
.ci-field label { font-size: .82rem; font-weight: 600; color: var(--ink); }
.ci-field .hint { font-size: .76rem; color: var(--muted); font-weight: 400; }
.ci-field input, .ci-field select, .ci-field textarea {
  font: inherit; font-size: .92rem; color: var(--text); background: #fff;
  border: 1px solid var(--border); border-radius: 9px; padding: 9px 11px; width: 100%;
}
.ci-field input:focus, .ci-field select:focus, .ci-field textarea:focus { outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--gold); }
.ci-field input[aria-invalid="true"], .ci-field select[aria-invalid="true"] { border-color: var(--err); }
.ci-field .err { color: var(--err); font-size: .76rem; }
.req::after { content: ' *'; color: var(--err); }

/* ---------- occupants ---------- */
.ci-occ { border: 1px dashed var(--border); border-radius: 10px; padding: 12px; margin-bottom: 10px; }
.ci-occ .ci-grid { grid-template-columns: 1.4fr 1fr 1fr; }
.ci-occ-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: .8rem; color: var(--muted); }
.ci-x { background: none; border: 0; color: var(--err); font: inherit; font-size: .8rem; cursor: pointer; }

/* ---------- file upload ---------- */
.ci-file { border: 1px dashed var(--border); border-radius: 10px; padding: 14px; background: var(--light); }
.ci-file-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ci-thumb { width: 96px; height: 96px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); background: #fff; }
.ci-file-name { font-size: .82rem; color: var(--ok); }
.ci-file input[type=file] { display: none; }
.btn {
  font: inherit; font-size: .88rem; font-weight: 600; border-radius: 9px; padding: 9px 16px;
  border: 1px solid var(--border); background: #fff; color: var(--ink); cursor: pointer;
}
.btn:hover { border-color: var(--gold); }
.btn-primary { background: var(--gold); border-color: var(--gold); color: #fff; }
.btn-primary:hover { background: var(--gold-dark); border-color: var(--gold-dark); }
.btn-primary[disabled] { opacity: .55; cursor: default; }
.btn-ghost { background: transparent; color: var(--muted); }
.btn-sm { padding: 6px 11px; font-size: .8rem; }

.ci-actions { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-top: 4px; }
.ci-actions .spacer { flex: 1; }

/* ---------- consent ---------- */
.ci-check { display: flex; gap: 10px; align-items: flex-start; font-size: .87rem; margin: 12px 0; }
.ci-check input { width: 18px; height: 18px; margin-top: 2px; flex: 0 0 auto; accent-color: var(--gold); }
.ci-check.err { color: var(--err); }

/* ---------- rules ---------- */
.ci-rules { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.ci-rules-head { background: var(--light); padding: 12px 16px; font-size: .84rem; color: var(--muted); }
.ci-rules-head strong { color: var(--ink); display: block; font-size: .95rem; }
.ci-rule { border-top: 1px solid var(--border); }
.ci-rule[data-open="true"] { background: #fdfcf9; }
.ci-rule-head { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; cursor: pointer; }
.ci-rule-num { font-size: .72rem; font-weight: 700; color: var(--gold-dark); background: var(--light); border-radius: 6px; padding: 2px 7px; min-width: 30px; text-align: center; flex: 0 0 auto; margin-top: 3px; }
.ci-rule-title { font-size: .93rem; font-weight: 600; color: var(--ink); flex: 1; }
.ci-rule-body { padding: 0 16px 14px 16px; font-size: .88rem; display: none; }
.ci-rule[data-open="true"] .ci-rule-body { display: block; }
.ci-rule-body p { margin-bottom: 9px; }
.ci-rule-body ul { margin: 0 0 9px 6px; list-style: none; }
.ci-rule-body li { position: relative; padding-left: 16px; margin-bottom: 5px; }
.ci-rule-body li::before { content: '·'; position: absolute; left: 3px; color: var(--gold); font-weight: 700; }
.ci-rule-ack { padding: 0 16px 14px; display: flex; gap: 10px; align-items: center; font-size: .84rem; color: var(--muted); }
.ci-rule-ack input { width: 18px; height: 18px; accent-color: var(--gold); }
.ci-rule-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.ci-rule-hint { padding: 12px 16px; margin: 0; font-size: .84rem; color: var(--muted); border-top: 1px solid var(--border); }

/* ---------- review ---------- */
.ci-sum { border: 1px solid var(--border); border-radius: 10px; padding: 4px 16px 12px; margin-bottom: 14px; }
.ci-sum h3 { font-size: .86rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 14px 0 8px; }
.ci-sum dl { display: grid; grid-template-columns: minmax(140px, 34%) 1fr; gap: 6px 14px; font-size: .88rem; margin-bottom: 6px; }
.ci-sum dt { color: var(--muted); }
.ci-sum dd { color: var(--ink); word-break: break-word; }
.ci-sum img { max-width: 120px; border-radius: 6px; border: 1px solid var(--border); }
.ci-sum .ci-missing { color: #b3261e; }
.ci-sum .ci-thumbs { display: flex; gap: 8px; align-items: center; margin: 4px 0 0; }

/* ---------- success ---------- */
.ci-done { text-align: center; }
.ci-done .tick { width: 54px; height: 54px; margin: 0 auto 12px; border-radius: 50%; background: var(--ok); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.7rem; }
.ci-ref { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1.05rem; background: var(--light); border: 1px solid var(--border); border-radius: 8px; padding: 6px 12px; display: inline-block; margin: 6px 0 14px; }
.ci-guide-block { text-align: left; border-top: 1px solid var(--border); padding: 14px 0; }
.ci-guide-block h3 { font-size: .95rem; color: var(--ink); margin-bottom: 6px; }
.ci-guide-block p { font-size: .9rem; margin-bottom: 4px; }
.ci-guide-block.sensitive { background: #fffaf0; border-left: 3px solid var(--gold); border-radius: 0 8px 8px 0; padding: 14px 16px; }
/* Arrival documents (PDF) on the success screen. */
.ci-docs { list-style: none; margin: 8px 0 2px; padding: 0; }
.ci-docs li { padding: 7px 0; border-top: 1px solid var(--border); }
.ci-docs li:first-child { border-top: 0; }
.ci-doc { font-weight: 600; }
.ci-doc-meta { display: block; color: var(--muted); font-size: .78rem; margin-top: 2px; }
.ci-doc-alt { font-size: .78rem; color: var(--muted); text-decoration: underline; }

/* Entry photos (entrance, key box) on the success screen — the guest has never
   seen the place, so a picture beats a paragraph. Two per row on a phone. */
.ci-photos { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0 2px; }
.ci-photo { flex: 1 1 44%; max-width: 48%; text-decoration: none; }
.ci-photo img { width: 100%; height: auto; display: block; border: 1px solid var(--border); border-radius: 8px; }
.ci-photo-cap { display: block; color: var(--muted); font-size: .76rem; line-height: 1.3; margin-top: 4px; }

.ci-fatal { border-left: 3px solid var(--err); background: #fdf3f2; padding: 12px 16px; border-radius: 0 8px 8px 0; font-size: .88rem; color: var(--err); margin-bottom: 16px; }
.ci-footer { text-align: center; color: var(--muted); font-size: .8rem; padding: 22px 20px 40px; }
.ci-footer a { color: var(--gold-dark); }
[hidden] { display: none !important; }
.ci-print-only { display: none; }

@media (max-width: 680px) {
  .ci-grid, .ci-grid.three, .ci-occ .ci-grid, .ci-sig-meta { grid-template-columns: 1fr; }
  .ci-card { padding: 18px 16px; }
  .ci-sum dl { grid-template-columns: 1fr; gap: 2px; }
  .ci-actions { flex-direction: column-reverse; }
  .ci-actions .btn { width: 100%; }
}
@media print {
  .ci-header, .ci-steps, .ci-actions, .ci-footer, .no-print { display: none !important; }
  .ci-card { border: 1px solid #ccc; page-break-inside: avoid; }
  .ci-print-only { display: block; }
}

/* ---------- right-to-left (Arabic) ---------- */
/* The page is authored LTR; only the few physical properties need flipping.
   Everything else (padding-inline, flex order) already mirrors itself. */
[dir="rtl"] body { text-align: right; }
[dir="rtl"] .ci-steps li b { margin-right: 0; margin-left: 7px; }
[dir="rtl"] .ci-rule-num { margin-right: 0; margin-left: 10px; }
[dir="rtl"] .ci-rule-ack, [dir="rtl"] .ci-check { flex-direction: row-reverse; }
[dir="rtl"] .ci-sum dt, [dir="rtl"] .ci-hint, [dir="rtl"] .ci-intro { text-align: right; }
[dir="rtl"] input, [dir="rtl"] select, [dir="rtl"] textarea { text-align: right; }
[dir="rtl"] .ci-actions { flex-direction: row-reverse; }
/* Email addresses, phone numbers and the reference stay left-to-right. */
[dir="rtl"] input[type="email"], [dir="rtl"] input[type="tel"], [dir="rtl"] .ci-ltr { direction: ltr; text-align: left; }