/* WhatsApp page: one phone conversation and the kitchen ticket it produces, in the green band.
   Every new class here starts with wa-. Literal colours inside the two mockups on purpose: they imitate a WhatsApp screen and printed paper.
   Line breaking, row alignment and the phone hero size of the shared components now live in site.css; nothing of site.css is overridden here. */

.wa-stage { display: flex; justify-content: center; align-items: stretch; gap: clamp(48px, 8vw, 120px); margin-top: 72px; }
.wa-fig { margin: 0; display: flex; flex-direction: column; align-items: center; min-width: 0; }
.wa-fig figcaption { margin-top: 30px; font: 400 11.5px/1.5 "Inter", sans-serif; letter-spacing: .26em; text-transform: uppercase; color: var(--ivory-muted); }
[dir="rtl"] .wa-fig figcaption { font: 500 15px/1.5 var(--f-sans); letter-spacing: 0; text-transform: none; }

/* The phone */
.wa-phone { width: 360px; max-width: 100%; padding: 11px; border-radius: 54px; background: #1A1A1A; color: #161616; text-align: start; box-shadow: 0 50px 100px -40px rgba(0, 0, 0, .6), 0 0 0 1px rgba(244, 239, 228, .16); }
.wa-screen { position: relative; display: flex; flex-direction: column; height: 640px; border-radius: 43px; overflow: hidden; background: #EFEAE2; }
.wa-screen::before { content: ""; position: absolute; z-index: 1; top: 11px; left: 0; right: 0; width: 96px; height: 28px; margin-inline: auto; border-radius: 999px; background: #1A1A1A; }
.wa-screen::after { content: ""; position: absolute; bottom: 8px; left: 0; right: 0; width: 118px; height: 4px; margin-inline: auto; border-radius: 999px; background: #161616; }
.wa-status { flex: none; display: flex; align-items: center; height: 50px; padding-inline: 32px; background: #FFFFFF; font: 500 14px/1 var(--f-sans); }
.wa-head { flex: none; display: flex; align-items: center; gap: 12px; padding: 4px 18px 12px; background: #FFFFFF; border-bottom: 1px solid #E7E2D9; }
.wa-avatar { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--green); color: var(--gold-hi); font: italic 400 19px/1 "Instrument Serif", Georgia, serif; }
.wa-who { display: grid; gap: 2px; min-width: 0; }
.wa-who b { font: 500 15.5px/1.25 "Inter", sans-serif; }
.wa-who small { font: 400 12px/1.25 var(--f-sans); color: #6E6C66; }

.wa-chat { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 9px; padding: 14px 12px 16px; }
.wa-day { align-self: center; margin-bottom: 4px; padding: 5px 11px; border-radius: 8px; background: rgba(255, 255, 255, .9); font: 400 11.5px/1.2 var(--f-sans); color: #6E6C66; }
.wa-msg { position: relative; max-width: 88%; padding: 6px 10px 7px; border-radius: 10px; font: 400 14.5px/1.42 var(--f-sans); text-align: start; box-shadow: 0 1px .5px rgba(22, 22, 22, .13); }
.wa-msg p { margin: 0; white-space: pre-line; overflow-wrap: break-word; }
.wa-msg p::after { content: ""; display: inline-block; width: 34px; } /* keeps room for the time on the last line, as WhatsApp does */
.wa-msg time { position: absolute; bottom: 5px; inset-inline-end: 9px; font: 400 10.5px/1 "Inter", sans-serif; color: rgba(22, 22, 22, .45); }
.wa-in { align-self: flex-start; background: #FFFFFF; border-top-left-radius: 3px; }
.wa-out { align-self: flex-end; background: #DDF0D7; border-top-right-radius: 3px; }
/* Bubbles carry dir="auto" for their text, so their side and corner follow the page direction instead. */
[dir="rtl"] .wa-in { border-top-left-radius: 10px; border-top-right-radius: 3px; }
[dir="rtl"] .wa-out { border-top-right-radius: 10px; border-top-left-radius: 3px; }
.wa-label { display: block; margin-bottom: 1px; font: 500 12px/1.4 var(--f-sans); color: var(--green); }
.wa-input { flex: none; padding: 9px 13px 27px; background: #F7F5F1; }
.wa-input span { display: block; padding: 9px 16px; border-radius: 999px; background: #FFFFFF; border: 1px solid #E7E2D9; font: 400 13.5px/1.2 var(--f-sans); color: #9A968E; }
[dir="rtl"] .wa-msg { font-size: 15px; line-height: 1.6; }
[dir="rtl"] .wa-label, [dir="rtl"] .wa-day, [dir="rtl"] .wa-who small { font-size: 13px; }
[dir="rtl"] .wa-input span { font-size: 14.5px; }

/* The kitchen ticket */
.wa-ticket { width: 300px; max-width: 100%; margin-block: auto; padding: 30px 28px 28px; background: #FFFFFF; color: #161616; text-align: center; font: 400 14.5px/1.5 var(--f-sans); font-variant-numeric: tabular-nums; box-shadow: 0 50px 100px -40px rgba(0, 0, 0, .6); }
.wa-t-kicker { margin: 0; font: 400 10.5px/1.4 "Inter", sans-serif; letter-spacing: .3em; text-transform: uppercase; color: #6E6C66; }
.wa-t-no { margin: 12px 0 8px; font: 400 48px/1 "Instrument Serif", Georgia, serif; letter-spacing: -.01em; }
.wa-t-hash { margin-inline-end: 4px; font: 300 26px/1 "Inter", sans-serif; vertical-align: 14px; color: #6E6C66; }
.wa-t-src { margin: 0; font-size: 12.5px; letter-spacing: .04em; color: #6E6C66; }
.wa-t-lines { list-style: none; margin: 24px 0 0; padding: 18px 0; display: grid; gap: 8px; border-block: 1px dashed #C8C2B6; text-align: start; }
.wa-t-lines li, .wa-t-total { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.wa-t-lines li span:last-child, .wa-t-total span:last-child { white-space: nowrap; }
.wa-t-total { margin: 0; padding: 16px 0 17px; border-bottom: 1px dashed #C8C2B6; }
.wa-t-total span:first-child { font: 400 10.5px/1 "Inter", sans-serif; letter-spacing: .3em; text-transform: uppercase; color: #6E6C66; }
.wa-t-total span:last-child { font: 400 30px/1 "Instrument Serif", Georgia, serif; }
.wa-t-meta { margin: 16px 0 0; display: grid; gap: 2px; font-size: 13.5px; }
.wa-t-meta span:last-child { color: #6E6C66; }
[dir="rtl"] .wa-t-kicker, [dir="rtl"] .wa-t-total span:first-child { font: 500 14px/1.4 var(--f-sans); letter-spacing: 0; text-transform: none; }
[dir="rtl"] .wa-t-total span:last-child { font: 400 28px/1.3 var(--f-serif); }
[dir="rtl"] .wa-ticket { font-size: 15.5px; }
[dir="rtl"] .wa-t-src, [dir="rtl"] .wa-t-meta { font-size: 14px; letter-spacing: 0; }

@media (max-width: 760px) {
  .wa-stage { flex-direction: column; align-items: center; gap: 64px; margin-top: 52px; }
  .wa-fig { width: 100%; } /* lets the phone and the ticket shrink on very narrow screens */
  .wa-phone { width: 330px; padding: 10px; border-radius: 50px; }
  .wa-screen { height: 620px; border-radius: 40px; }
}

/* Phones: the hero eyebrow stacks its two halves instead of breaking mid-phrase (the chat bubbles keep WhatsApp's own wrapping). */
@media (max-width: 460px) {
  .wa-sep { display: block; height: 0; overflow: hidden; }
}
/* Small phones: the hero button keeps "Let’s talk about your WhatsApp" on one line (Arabic never takes letter-spacing). */
@media (max-width: 380px) {
  .page-hero .btn { padding-inline: 20px; text-align: center; text-wrap: balance; }
  [dir="ltr"] .page-hero .btn { letter-spacing: .12em; }
}