/* ==========================================================
   FAIM JEWELLERY ARABIA EXPERIENCE  |  register.css
   Register Interest panel, confirmation, gift page, gift
   redemption widget, WhatsApp and email review, feedback.
   Follows kiosk.css: 1rem = 16px on the 1920 x 1080 stage.
   ========================================================== */

/* ---------- shared bits ---------- */
a.btn { color: inherit; text-decoration: none; }
a.btn.btn--solid { color: var(--velvet); }
.rg-kicker { color: var(--gold); font-size: 1rem; letter-spacing: .04em; }
.rg-field { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.rg-field > span { color: var(--smoke); font-size: 1.05rem; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.rg-field input, .rg-field textarea { min-height: 5rem; width: 100%; background: var(--tray); border: 1px solid var(--gold-faint); border-radius: var(--r-s); padding: 0 1.5rem; font-size: 1.5rem; color: var(--ivory); }
.rg-field textarea { padding: 1rem 1.5rem; resize: none; line-height: 1.4; font-size: 1.25rem; }
.rg-field input:focus, .rg-field textarea:focus { border-color: var(--gold); outline: none; }
.rg-field input::placeholder { color: var(--ash); }
.rg-count { font-style: normal; color: var(--ash); font-size: .9rem; }
.rg-pills { display: flex; flex-wrap: wrap; gap: .6rem; }
.rg-pill { min-height: 5rem; padding: 0 1.75rem; border-radius: 999px; border: 1px solid var(--gold-dim); font-size: 1.15rem; display: inline-flex; align-items: center; transition: all var(--t-fast); }
.rg-pill[aria-pressed="true"] { background: var(--ivory); color: var(--velvet); border-color: var(--ivory); }
.rg-pill[lang="ar"] { font-family: 'Plex Arabic', sans-serif; }
.rg-pill[lang="en"] { font-family: 'Jost', sans-serif; }
.rg-chips { display: flex; flex-wrap: wrap; gap: .6rem; }
.rg-chips .chip { min-height: 3.75rem; }
.rg-flag { font-size: 1.6rem; line-height: 1; }

/* ---------- register panel ---------- */
.rg-wrap { height: 100%; display: grid; grid-template-columns: 42rem 1fr; }
.rg-side { padding: 2.5rem 3rem 2.5rem 3.5rem; border-inline-end: 1px solid var(--gold-faint); display: flex; flex-direction: column; gap: 1rem; overflow-y: auto; scrollbar-width: thin; }
html[dir="rtl"] .rg-side { padding: 2.5rem 3.5rem 2.5rem 3rem; }
.rg-vitrine { aspect-ratio: 1.3; width: 100%; }
.rg-vitrine img { padding: 6%; }
.rg-pname { font-size: 2.8rem; line-height: 1.05; }
.rg-mat { color: var(--smoke); font-size: 1.15rem; }
.rg-price { font-family: var(--display); font-size: 1.5rem; font-style: italic; }
html[lang="ar"] .rg-price { font-style: normal; }
.rg-nop { display: flex; flex-direction: column; gap: 1rem; }
.rg-mono { width: 4rem; height: 4rem; }
.rg-perk { margin-top: auto; display: flex; gap: 1rem; align-items: flex-start; padding: 1.5rem; border: 1px solid var(--gold-dim); border-radius: var(--r-m); background: var(--tray); }
.rg-perk + .rg-perk { margin-top: 0; }
.rg-perk svg { width: 1.8rem; height: 1.8rem; color: var(--gold); flex: none; margin-top: .2rem; }
.rg-perk h3 { font-family: var(--display); font-size: 1.7rem; margin-bottom: .3rem; }
.rg-perk p { color: var(--smoke); font-size: 1.05rem; }

.rg-form { padding: 2.5rem 3.5rem 3rem; display: flex; flex-direction: column; gap: 1.5rem; overflow-y: auto; }
.rg-head h1 { font-size: 3.6rem; margin-bottom: .4rem; }
.rg-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 2rem; }
.rg-phone { display: flex; gap: .6rem; }
.rg-cc { min-height: 5rem; min-width: 11rem; padding: 0 1.1rem 0 1.25rem; display: inline-flex; align-items: center; gap: .7rem; background: var(--tray); border: 1px solid var(--gold-faint); border-radius: var(--r-s); font-size: 1.35rem; transition: border-color var(--t-fast); }
.rg-cc:hover { border-color: var(--gold); }
.rg-cc svg, html[dir="rtl"] .rg-cc svg.flip-rtl { width: 1.1rem; height: 1.1rem; color: var(--smoke); transform: rotate(90deg); }
.rg-cc-code { font-family: 'Jost', sans-serif; letter-spacing: .02em; }
.rg-phone input { flex: 1; font-family: 'Jost', sans-serif; letter-spacing: .06em; }
.rg-hint { min-height: 1.4em; font-size: .95rem; color: var(--smoke); font-family: 'Jost', sans-serif; direction: ltr; text-align: start; }
html[dir="rtl"] .rg-hint { text-align: right; }
.rg-hint.is-bad { color: var(--alert); }
.rg-consents { display: flex; flex-direction: column; gap: .9rem; padding-top: .5rem; border-top: 1px solid var(--gold-faint); }
.rg-check { align-items: center; min-height: var(--touch); }
.rg-check input { width: 2.2rem; height: 2.2rem; }
.rg-links { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; padding-inline-start: 3.2rem; }
.rg-link { min-height: 2.75rem; color: var(--smoke); font-size: .95rem; border-bottom: 1px solid var(--gold-dim); transition: color var(--t-fast); }
.rg-link:hover { color: var(--ivory); }
.rg-ack { display: flex; gap: .75rem; align-items: flex-start; }
.rg-ack svg { width: 1.3rem; height: 1.3rem; color: var(--gold); flex: none; margin-top: .15rem; }
.rg-submit { display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; }
.rg-send { min-height: 5rem; padding: 0 3rem; font-size: 1.25rem; }
.rg-reasons { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .2rem; color: var(--smoke); font-size: .95rem; }
.rg-reasons li::before { content: '·'; color: var(--gold); margin-inline-end: .5rem; }

/* country picker */
.rg-cc-modal { width: 40rem; max-height: 86vh; display: flex; }
.rg-cc-pick { display: flex; flex-direction: column; gap: 1.25rem; width: 100%; min-height: 0; }
.rg-cc-pick h2 { font-size: 2.4rem; }
.rg-cc-search { display: flex; align-items: center; gap: .8rem; border-bottom: 1px solid var(--gold-dim); padding-bottom: .4rem; }
.rg-cc-search svg { width: 1.5rem; height: 1.5rem; color: var(--gold); flex: none; }
.rg-cc-search input { flex: 1; min-height: var(--touch); background: transparent; border: 0; outline: none; font-size: 1.4rem; color: var(--ivory); }
.rg-cc-list { flex: 1; min-height: 0; max-height: 52vh; display: flex; flex-direction: column; gap: .2rem; }
.rg-cc-label { color: var(--gold); font-size: .9rem; letter-spacing: .08em; text-transform: uppercase; padding: .6rem .5rem .2rem; }
.rg-cc-div { border: 0; border-top: 1px solid var(--gold-faint); margin: .6rem 0; }
.rg-cc-item { min-height: var(--touch); display: grid; grid-template-columns: 2.6rem 1fr auto; align-items: center; gap: .9rem; padding: 0 1rem; border-radius: var(--r-s); text-align: start; font-size: 1.2rem; transition: background var(--t-fast); }
.rg-cc-item:hover { background: var(--tray-2); }
.rg-cc-item[aria-pressed="true"] { background: var(--tray-2); color: var(--gold); }
.rg-cc-item .rg-cc-code { color: var(--smoke); }
.rg-cc-none { padding: 1rem .5rem; }

/* legal modal */
.rg-legal-modal { width: 56rem; }
.rg-legal h2 { font-size: 2.4rem; margin-bottom: 1.25rem; }
.rg-legal__body { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2rem; font-size: 1.15rem; max-height: 55vh; overflow: auto; }

/* ---------- confirmation ---------- */
.rd-wrap { height: 100%; display: grid; grid-template-columns: 1fr 34rem; gap: 3rem; padding: 2.5rem 3.5rem 3rem; align-items: center; }
.rd-main { display: flex; flex-direction: column; gap: 1.25rem; align-items: flex-start; }
.rd-mono { width: 4rem; height: 4rem; }
.rd-title { font-size: 4.6rem; }
.rd-sub { font-size: 1.35rem; color: var(--smoke); max-width: 40ch; }
.rd-dup { color: var(--alert); }
.rd-piece, .gf-piece { display: flex; gap: 1.25rem; align-items: center; }
.rd-piece .vitrine, .gf-piece .vitrine { width: 6.5rem; height: 6.5rem; flex: none; }
.rd-piece img, .gf-piece img { padding: 8%; }
.rd-pname { font-family: var(--display); font-size: 1.9rem; line-height: 1.1; }
.rd-offer { display: flex; gap: .75rem; align-items: flex-start; font-size: 1.15rem; color: var(--ivory); }
.rd-offer svg { width: 1.4rem; height: 1.4rem; color: var(--gold); flex: none; margin-top: .25rem; }
.rd-offline { display: flex; gap: .75rem; align-items: flex-start; color: var(--alert); }
.rd-offline svg { width: 1.3rem; height: 1.3rem; flex: none; margin-top: .2rem; }
.rd-acts { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1rem; }
.rd-gift { border: 1px solid var(--gold-dim); border-radius: var(--r-m); background: var(--tray); padding: 2.5rem; display: flex; flex-direction: column; gap: 1rem; align-items: center; text-align: center; }
.rd-qr { width: 20rem; }
.rd-code { font-family: 'Jost', sans-serif; font-size: 1.15rem; color: var(--smoke); }
.rd-code strong { color: var(--gold); letter-spacing: .14em; font-weight: 500; font-size: 1.5rem; margin-inline-start: .5rem; }
.rd-instr { font-family: var(--display); font-size: 1.5rem; line-height: 1.25; max-width: 24ch; }
.rd-spark { background: var(--gold); box-shadow: 0 0 10px 2px rgba(210,178,113,.75); }

/* ---------- gift page (phone first) ---------- */
#gift { position: fixed; inset: 0; z-index: 55; background: var(--velvet); overflow-y: auto; -webkit-overflow-scrolling: touch; }
body[data-area="gift"] { overflow: auto; }
.gf-page { min-height: 100%; display: flex; flex-direction: column; max-width: 44rem; margin: 0 auto; padding: 1.5rem 1.5rem 2.5rem; }
.gf-head { display: flex; align-items: center; justify-content: center; position: relative; padding: 1rem 0 2rem; }
.gf-logo { height: 2.6rem; width: auto; }
.gf-lang { position: absolute; inset-inline-end: 0; top: .4rem; }
.gf-main { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.1rem; }
.gf-name { font-size: 3.4rem; line-height: 1; }
.gf-status { display: inline-flex; align-items: center; gap: .6rem; padding: .6rem 1.4rem; border-radius: 999px; border: 1px solid var(--gold-dim); font-size: 1.1rem; }
.gf-status svg { width: 1.3rem; height: 1.3rem; color: var(--gold); }
.gf-status.is-redeemed { color: var(--smoke); border-color: var(--gold-faint); }
.gf-status.is-redeemed svg { color: var(--ok); }
.gf-status.is-invalid, .gf-status.is-expired { color: var(--alert); border-color: rgba(226,161,92,.5); }
.gf-status.is-invalid svg, .gf-status.is-expired svg { color: var(--alert); }
.gf-qr { width: min(26rem, 82vw); margin-top: .5rem; }
.gf-qr.is-done { opacity: .35; }
.gf-instr { font-family: var(--display); font-size: 1.7rem; line-height: 1.25; max-width: 24ch; }
.gf-piece { text-align: start; margin-top: .5rem; }
.gf-help { max-width: 30ch; }
.gf-explore { margin-top: 1.5rem; }
.gf-foot { text-align: center; padding-top: 2rem; }

/* ---------- gift redemption widget (inside the staff dashboard) ---------- */
.gr-wrap { display: flex; flex-direction: column; gap: 1.5rem; max-width: 60rem; }
.gr-head { display: flex; justify-content: space-between; align-items: baseline; gap: 2rem; flex-wrap: wrap; }
.gr-head h2 { font-size: 2.4rem; }
.gr-form { display: grid; grid-template-columns: 1fr auto auto; gap: 1rem; align-items: end; }
.gr-code input { font-family: 'Jost', sans-serif; letter-spacing: .12em; }
.gr-form .btn { min-height: 5rem; }
.gr-scan video { width: 100%; max-width: 32rem; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-s); background: #000; }
.gr-card { border: 1px solid var(--gold-dim); border-radius: var(--r-m); background: var(--tray); padding: 2rem; display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
.gr-card.is-redeemed { border-color: var(--gold-faint); }
.gr-redeem { min-height: 5rem; padding: 0 3rem; }

/* ---------- WhatsApp review ---------- */
.wa-wrap { height: 100%; display: grid; grid-template-columns: 52rem 1fr; }
.wa-side { padding: 2.5rem 3rem 2.5rem 3.5rem; border-inline-end: 1px solid var(--gold-faint); display: flex; flex-direction: column; gap: 1.25rem; overflow-y: auto; }
html[dir="rtl"] .wa-side { padding: 2.5rem 3.5rem 2.5rem 3rem; }
.wa-side h1 { font-size: 3rem; }
.wa-kinds { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.wa-kind { font-size: 1.05rem; padding: 0 1.1rem; }
.wa-kind svg { width: 1.3rem; height: 1.3rem; }
.wa-kind[aria-pressed="true"] { border-color: var(--gold); background: var(--tray-2); color: var(--ivory); }
.wa-main { padding: 2.5rem 3.5rem 3rem; display: grid; grid-template-columns: 1fr 18rem; grid-template-rows: auto 1fr auto; gap: 1.25rem 3rem; min-height: 0; }
.wa-modes { grid-column: 1; display: flex; gap: .6rem; }
.wa-modes .chip svg { width: 1.2rem; height: 1.2rem; }
.wa-msg { grid-column: 1; min-height: 0; display: flex; }
.wa-text { width: 100%; min-height: 20rem; background: var(--tray); border: 1px solid var(--gold-faint); border-radius: var(--r-m); padding: 1.75rem 2rem; font-size: 1.35rem; line-height: 1.6; color: var(--ivory); resize: none; white-space: pre-wrap; direction: inherit; }
.wa-text:focus { outline: none; }
.wa-text.is-editing { border-color: var(--gold); }
.wa-acts { grid-column: 1; display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }
.wa-qr { grid-column: 2; grid-row: 1 / 4; align-self: start; display: flex; flex-direction: column; gap: 1rem; text-align: center; }
.wa-qr .qr { width: 18rem; }

/* ---------- email modal ---------- */
.em-modal { width: min(84rem, 94vw); }
.em-wrap { display: grid; grid-template-columns: 1fr 16rem; gap: 3rem; align-items: start; }
.em-main { display: flex; flex-direction: column; gap: .75rem; }
.em-main h2 { font-size: 2.6rem; }
.em-label { color: var(--gold); font-size: .95rem; letter-spacing: .04em; margin-top: .75rem; }
.em-subject { font-family: var(--display); font-size: 1.8rem; }
.em-body { margin: 0; font: inherit; font-size: 1.15rem; line-height: 1.6; white-space: pre-wrap; background: var(--velvet); border: 1px solid var(--gold-faint); border-radius: var(--r-s); padding: 1.25rem 1.5rem; max-height: 30vh; }
.em-main .wa-acts { margin-top: 1rem; }
.em-qr { display: flex; flex-direction: column; gap: 1rem; text-align: center; }

/* ---------- feedback modal ---------- */
.fb-modal { width: 48rem; }
.fb-wrap { display: flex; flex-direction: column; gap: 1rem; }
.fb-wrap h2 { font-size: 2.6rem; margin-bottom: .5rem; }
.fb-dots { display: flex; gap: .75rem; }
.fb-dot { width: var(--touch); height: var(--touch); border-radius: 50%; display: grid; place-items: center; }
.fb-dot::before { content: ''; width: 1.8rem; height: 1.8rem; border-radius: 50%; border: 1px solid var(--gold); transition: background var(--t-fast), transform var(--t-fast); }
.fb-dot.is-on::before { background: var(--gold); transform: scale(1.15); }
.fb-comment textarea { min-height: 4rem; }
.fb-note { display: flex; gap: .75rem; align-items: flex-start; }
.fb-note svg { width: 1.3rem; height: 1.3rem; color: var(--gold); flex: none; margin-top: .15rem; }

/* ---------- smaller screens ---------- */
@media (max-width: 1200px), (max-aspect-ratio: 4/3) {
  .rg-wrap, .wa-wrap, .rd-wrap { grid-template-columns: 1fr; height: auto; }
  .rg-side, .wa-side { border: 0; padding: 2rem 2rem 0; overflow: visible; }
  .rg-perk { margin-top: 0; }
  .rg-form, .wa-main { padding: 2rem; overflow: visible; }
  .wa-main { grid-template-columns: 1fr; grid-template-rows: auto; }
  .wa-kinds { grid-template-columns: 1fr; }
  .wa-qr { grid-column: 1; grid-row: auto; align-items: center; }
  .rd-wrap { align-items: start; }
  .rd-gift { width: 100%; }
}
@media (max-width: 700px) {
  .rg-row, .em-wrap { grid-template-columns: 1fr; }
  .rg-cc-modal, .fb-modal, .rg-legal-modal { width: 92vw; }
  .gr-form { grid-template-columns: 1fr; }
  .rd-title { font-size: 3.2rem; }
  .gf-page { padding: 1rem 1rem 2rem; }
  .rg-links { padding-inline-start: 0; }
}