:root {
  --plum: #2E2238;
  --plum-2: #241A2C;
  --plum-3: #33263D;
  --ink-soft: #6B5A72;
  --ground: #FBF7FA;
  --card: #FFFFFF;
  --line: #EBDDE6;
  --rose: #B8467A;
  --rose-dark: #8E2F5C;
  --blush: #F7E6EF;
  --ok-fg: #2F6B47; --ok-bg: #E3F0E6;
  --wait-fg: #7A4E0E; --wait-bg: #F6EAD3;
  --brand: linear-gradient(90deg, #8CD1CC 0%, #90AEDB 22%, #A698CA 42%, #D485B7 64%, #EE87AF 78%, #F4B9CF 100%);
  --sans: 'Almarai', 'Segoe UI', Tahoma, sans-serif;
  --display: 'El Messiri', 'Almarai', serif;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --shadow: 0 1px 2px rgba(46,34,56,.04), 0 10px 26px -14px rgba(46,34,56,.16);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: var(--sans); font-size: 14px; line-height: 1.55; color: var(--plum); background: var(--ground); -webkit-tap-highlight-color: transparent; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; letter-spacing: 0; line-height: 1.3; }
:lang(en) h2, :lang(en) h3 { font-family: var(--sans); font-weight: 700; }
button { font-family: inherit; cursor: pointer; }
button:disabled { cursor: default; }
input, select, textarea { font-family: inherit; font-size: 16px; }
:focus-visible { outline: 3px solid #5B7FD1; outline-offset: 2px; }
[hidden] { display: none !important; }
html[lang="ar"] .serif, [lang="ar"] .serif { font-family: var(--display); font-weight: 600; }
.serif { font-family: var(--serif); font-weight: 700; }

.btn { min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--plum); background: var(--plum); color: #fff; font-size: 14px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.btn.ghost { background: transparent; color: var(--plum); border-color: #D9C6D3; }
.btn.rose { background: var(--rose); border-color: var(--rose); }
.btn.big { min-height: 52px; padding: 0 36px; font-size: 16px; }
.btn.block { width: 100%; border-radius: 12px; min-height: 46px; font-size: 15px; }
.btn:disabled { background: #EFE7EE; border-color: #EFE7EE; color: #8A7A92; }

.badge { font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; display: inline-block; }
.badge.ok { color: var(--ok-fg); background: var(--ok-bg); }
.badge.wait { color: var(--wait-fg); background: var(--wait-bg); }
.badge.muted { color: #5E4D66; background: #EFE7EE; }
.badge.bad { color: #8E2F2F; background: #F7E1E1; }

.toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); background: var(--plum); color: #fff; padding: 11px 18px; border-radius: 12px; font-size: 14px; font-weight: 700; box-shadow: 0 10px 30px rgba(46,34,56,.25); z-index: 50; max-width: 90vw; }
.offline { position: fixed; top: 0; left: 0; right: 0; background: #7A4E0E; color: #fff; text-align: center; padding: 8px; font-size: 14px; z-index: 60; }

/* login */
.login { min-height: 100%; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--brand); }
.login form { background: #fff; border-radius: 20px; padding: 32px; width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 14px; }
.login img { width: 64px; align-self: center; }
.login h1 { margin: 0; text-align: center; font-size: 22px; }
.login input { min-height: 52px; border: 1px solid var(--line); border-radius: 12px; padding: 0 14px; font-size: 22px; letter-spacing: 6px; text-align: center; }
.login .err { color: #8E2F2F; font-size: 14px; min-height: 20px; margin: 0; text-align: center; }

/* photos */
.ph { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: #F3E9F0; }
.ph-empty { display: grid; place-items: center; background: linear-gradient(135deg, #E3F2F1 0%, #ECE7F5 45%, #FBE5EE 100%); color: #9C7FA8; }
.ph-empty svg { width: 42%; max-width: 72px; height: auto; filter: drop-shadow(0 1px 2px rgba(46,34,56,.18)); }
/* until R&J adds real photos, each category gets its own branded tile */
.ph-empty.ph-nails { background: linear-gradient(135deg, #F4B9CF 0%, #EE87AF 100%); color: #fff; }
.ph-empty.ph-hair { background: linear-gradient(135deg, #C5B9E3 0%, #A698CA 55%, #D485B7 100%); color: #fff; }
.ph-empty.ph-lashes { background: linear-gradient(135deg, #8CD1CC 0%, #90AEDB 100%); color: #fff; }
.ph-empty.ph-makeup { background: linear-gradient(135deg, #D485B7 0%, #B8467A 100%); color: #fff; }
.ph-empty.ph-drinks { background: linear-gradient(135deg, #E9D9C4 0%, #C9A57E 100%); color: #fff; }
.ph-empty.ph-vip { background: linear-gradient(150deg, #241A2C 0%, #4A2F4F 100%); color: #E8C987; }
.ph-empty.ph-other { background: linear-gradient(135deg, #8CD1CC 0%, #A698CA 50%, #EE87AF 100%); color: #fff; }
.av { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex: none; display: inline-grid; place-items: center; font-size: 14px; font-weight: 700; }
.av-empty { background: linear-gradient(135deg, #8CD1CC, #A698CA 50%, #EE87AF); color: #2E2238; }

/* ---------- receipts ---------- */
.rcpt-modal { position: fixed; inset: 0; z-index: 80; background: rgba(20,14,24,.72); display: flex; align-items: flex-start; justify-content: center; padding: 24px 16px; overflow-y: auto; }
.rcpt-card { background: #fff; color: #2E2238; border-radius: 18px; padding: 22px; width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.rcpt-acts { display: flex; gap: 8px; }
.rcpt-acts .btn { flex: 1; }
.receipt { font-size: 14px; display: flex; flex-direction: column; gap: 10px; color: #2E2238; }
.receipt .r-head { display: flex; gap: 12px; align-items: flex-start; padding-bottom: 10px; border-bottom: 1px dashed #D9C9D3; }
.receipt .r-head img { width: 40px; height: 40px; }
.receipt .r-head div { display: flex; flex-direction: column; gap: 2px; }
.receipt .r-head b { font-size: 16px; }
.receipt small { display: block; color: #6B5A72; font-size: 12px; }
.receipt h3 { margin: 0; font-size: 15px; letter-spacing: .5px; }
.receipt .r-meta { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; }
.receipt .r-meta dt { color: #6B5A72; }
.receipt .r-meta dd { margin: 0; font-weight: 600; }
.receipt table { width: 100%; border-collapse: collapse; }
.receipt td { padding: 6px 0; vertical-align: top; border-bottom: 1px solid #F0E6EC; }
.receipt td.n { text-align: end; white-space: nowrap; font-variant-numeric: tabular-nums; padding-inline-start: 12px; }
.receipt td s { color: #9C8AA3; font-weight: 400; }
.receipt .r-tot td { border-bottom: 0; padding: 3px 0; color: #6B5A72; }
.receipt .r-tot .grand td { color: #2E2238; font-weight: 700; font-size: 17px; border-top: 2px solid #2E2238; padding-top: 8px; }
.receipt .r-earn { margin: 0; color: #2F6B47; font-weight: 600; }
.receipt .r-note { margin: 0; color: #6B5A72; font-size: 12px; }
.receipt .r-thanks { margin: 0; text-align: center; font-weight: 600; }
.rcpt-print { display: none; }
.rcpt-info { margin: 0; color: #6B5A72; font-size: 12px; text-align: center; }
.rcpt-mail { display: flex; flex-direction: column; gap: 8px; border-top: 1px dashed #D9C9D3; padding-top: 12px; }
.rcpt-mail label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 14px; }
.rcpt-mail input[type=email] { min-height: 44px; border: 1px solid #E5D8E0; border-radius: 10px; padding: 0 12px; font: inherit; }
.rcpt-mail .rcpt-save { flex-direction: row; align-items: center; font-weight: 400; }
.rcpt-sent { margin: 0; color: #2F6B47; font-weight: 600; font-size: 13px; }
.r-copy { text-align: center; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; font-size: 12px; border: 1px solid #2E2238; border-radius: 6px; padding: 4px; margin-bottom: 10px; }
.r-sign { margin-top: 14px; font-size: 13px; display: flex; flex-direction: column; gap: 14px; }
.r-sign p { margin: 0; } .r-sign span { color: #6B5A72; }
@media print {
  body > *:not(.rcpt-modal):not(.rcpt-print) { display: none !important; }
  .rcpt-modal { position: static; background: none; padding: 0; }
  .rcpt-card { box-shadow: none; max-width: 80mm; padding: 0; }
  .rcpt-acts, .rcpt-mail, .rcpt-info { display: none !important; }
  body.printing-rcpt .rcpt-modal { display: none !important; }
  body.printing-rcpt .rcpt-print { display: block; }
  .rcpt-print .rcpt-copy { max-width: 80mm; margin: 0 auto; break-after: page; page-break-after: always; }
  .rcpt-print .rcpt-copy:last-child { break-after: auto; page-break-after: auto; }
}

.phonerow { display: flex; gap: 8px; align-items: stretch; }
.ccwrap { position: relative; flex: 0 0 auto; display: flex; }
.ccwrap .ccshow { display: flex; align-items: center; gap: 4px; min-height: 52px; padding: 0 12px; border: 1px solid var(--line, #E5D8E0); border-radius: 14px; background: #fff; color: #2E2238; font-size: 16px; font-weight: 600; white-space: nowrap; direction: ltr; }
.ccwrap select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; }
.ccwrap select:focus-visible + .ccshow, .ccwrap:focus-within .ccshow { outline: 2px solid #6F8FD8; outline-offset: 1px; }
.ccwrap.inp .ccshow { min-height: 44px; border-radius: 10px; }
.phonerow .phonein { flex: 1; min-width: 0; direction: ltr; text-align: left; }