/* /ai-kiosk/real-estate/ : what the real estate page adds to page-kiosk-mall.css.
   The project photo with its four facts, the floor plan with its rooms and a QR code, the payment plan in three
   stages, and the brochure sent to the phone (the share row is the exhibitions page's). Sizes are in pixels of the
   1080x1920 kiosk stage. Loaded on this page only, after page-kiosk-mall.css (and page-kiosk-rtl.css in Arabic). */

/* Project details: the tower, then the facts in one row */
.ks-photo { position: relative; flex: 1; min-height: 0; margin: 0; overflow: hidden; border-radius: 26px; background: #2a2730; }
.ks-photo img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.ks-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ks-facts li { min-width: 0; padding: 18px 20px; border-radius: 22px; background: rgba(255,255,255,0.1); }
.ks-facts small { display: block; overflow: hidden; font-size: 23px; line-height: 1.2; white-space: nowrap; text-overflow: ellipsis; color: rgba(255,255,255,0.72); }
.ks-facts b { display: block; margin-top: 4px; font-size: 30px; font-weight: 600; line-height: 1.15; }

/* Floor plans: the plan on white, the rooms and the code to take it home */
.ks-plan { position: relative; flex: 1; min-height: 0; border-radius: 26px; background: #fff; }
.ks-plan img { position: absolute; inset: 14px; display: block; width: calc(100% - 28px); height: calc(100% - 28px); object-fit: contain; }
.ks-plan-f { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: stretch; }
.ks-rooms { display: flex; flex-wrap: wrap; align-content: center; gap: 10px; }
.ks-rooms li { padding: 12px 20px; border-radius: 999px; background: rgba(255,255,255,0.1); font-size: 25px; line-height: 1.2; color: rgba(255,255,255,0.82); }
.ks-rooms b { font-weight: 700; color: #fff; }
.ks-plan-f .ks-qr { justify-content: center; gap: 6px; padding: 12px 14px 10px; }
.ks-plan-f .ks-qr img { width: 120px; height: 120px; }

/* Payment plans: three stages, the one paid first in the kiosk colour */
.ks-pay { display: grid; flex: 1; min-height: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ks-pay li { display: flex; min-width: 0; flex-direction: column; justify-content: center; gap: 10px; padding: 22px 24px; border-radius: 26px; background: rgba(255,255,255,0.1); }
.ks-pay li:first-child { background: var(--kv); }
.ks-pay .ks-pct { font-family: var(--font-display); font-size: 76px; font-weight: 700; line-height: 1; }
.ks-pay span { font-size: 30px; font-weight: 600; line-height: 1.15; }
.ks-pay small { font-size: 25px; line-height: 1.2; color: rgba(255,255,255,0.8); }
.ks-rows--one { flex: none; }
.ks-rows--one li { padding: 22px 26px; }
.ks-rows--one b { font-size: 34px; }

/* Brochure: WhatsApp, email and a code, as on the exhibitions page */
.ks-share { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 216px; gap: 14px; }
.ks-share > span { display: flex; align-items: center; justify-content: center; gap: 14px; border-radius: 26px; background: #fff; color: #17171c; font-size: 30px; font-weight: 700; }
.ks-share > span svg { width: 38px; height: 38px; }

/* Arabic: the numbers of a stage read left to right, the percent sign after them */
[dir="rtl"] .ks-pay .ks-pct, [dir="rtl"] .ks-rooms b { direction: ltr; unicode-bidi: isolate; }