/* Loaded after Fractal's own main.css, which stays byte-identical to the template. This file exists only
   to make the template work with Arabic content; it changes nothing about Fractal's design language -
   same palette (#ffffff ground, #828282 headings, #999999 body, #4696e5 accent), same spacing scale,
   same section rhythm. Three problems are fixed here, all of them consequences of a template built for
   short left-to-right English copy:

   1. Direction. Fractal composes left-to-right, and putting Arabic inside that reorders the runs at each
      boundary - "3D" came apart into "D...3" and full stops jumped to the start of the line. The page is
      set dir="rtl" and the handful of side-specific rules are mirrored below. This is a correctness fix,
      not a preference: the text was genuinely wrong to read.
   2. Typeface. Fractal ships Source Sans Pro, which has no Arabic glyphs at all, so Arabic fell back to
      whatever the device had. Cairo is already loaded by the app and is what the rest of the product uses.
   3. Round photos. `.spotlight .image img` is cropped to a circle - right for the square portraits the
      template ships, but our covers are 2:1 panoramas, so a circle turned them into flattened ellipses. */

/* ---------------------------------------------------------------- 1. typeface */
body, input, select, textarea, h1, h2, h3, h4, h5, h6, .button {
  font-family: var(--font-cairo), "Source Sans Pro", Helvetica, sans-serif;
}
/* Fractal tracks its headings and buttons tightly for uppercase Latin; Arabic letters join, so negative
   tracking visibly deforms words. Neutralise it without touching sizes or weights. */
h1, h2, h3, h4, h5, h6, .button, ul.actions li .button { letter-spacing: 0; }
h1, h2, h3 { line-height: 1.4; }      /* Arabic ascenders/descenders need more than Fractal's 1em */
p, li { line-height: 1.9; }

/* ---------------------------------------------------------------- 2. right-to-left mirroring */
ul.alt li { border-top-color: #e6e6e6; }
blockquote { border-left: 0; border-right: solid 4px #e6e6e6; padding: 0.5em 2em 0.5em 0; }
ul.icons { padding-right: 0; }
ul.actions { padding-right: 0; }
ul.actions:not(.special) li:first-child { padding-right: 0; }

#header .content { text-align: right; }
#header .content .actions { justify-content: flex-start; }
.spotlight .content { text-align: right; }

/* Fractal indents the spotlight text away from the photo with a one-sided padding; mirror it so the gap
   stays between photo and words instead of jumping to the far edge. */
.spotlight .content { padding: 0 2rem 0 0; }
.spotlight:nth-child(2n) .content { padding: 0 0 0 2rem; }

/* ---------------------------------------------------------------- 3. round photos, real proportions */
.spotlight .image img {
  aspect-ratio: 1 / 1;
  object-fit: cover;   /* fill the circle from the middle of the panorama instead of squashing it */
  height: auto;
}

/* the phone mock-up in the header shows a tour cover, which is much wider than the phone screen it sits
   in - crop it the same way rather than letting it stretch */
#header .image.phone .inner img { object-fit: cover; height: 100%; }

@media screen and (max-width: 980px) {
  .spotlight .content,
  .spotlight:nth-child(2n) .content { padding: 2rem 0 0 0; }
}

/* ---------------------------------------------------------------- 4. one-sided spacing, mirrored
   Fractal separates inline items with a right-side padding and sets its button glyphs with a
   margin-right. Both are correct going left-to-right and collapse going right-to-left: the icon row
   overlapped itself, and each button's glyph sat flush against its label. */
ul.icons li { padding: 0 0 0 1.5em; }
ul.icons li:last-child { padding-left: 0; }
ul.icons.major li { padding: 0 0 0 2.5em; }
ul.icons.major li:last-child { padding-left: 0; }

.button.icon:before { margin-right: 0; margin-left: 0.5em; }
ul.actions:not(.fixed) li .button.icon:before { margin-left: 0.5em; margin-right: -0.5em; }

/* ---------------------------------------------------------------- 5. grid gutter, mirrored
   Fractal's grid pulls the row left with a negative margin and pays it back as a left padding on each
   column (`.row { margin-left: -1.5em }` + `.row > * { padding: 0 0 0 1.5em }`). Right-to-left, that
   shifts the whole row off the right edge - the first column's text was being clipped by the viewport. */
.row { margin-left: 0; margin-right: -1.5em; }
.row > * { padding: 0 1.5em 0 0; }

/* Bump ?v= on the <link> in app/page.tsx whenever this file changes: it is cached for a day.
/* ---------------------------------------------------------------- 5. tour gallery (top of the page)
   Not part of Fractal: the owner asked for the tours to be the very first thing a visitor sees, so the
   product explains itself without reading. Kept in Fractal's own palette and spacing. Each card is a
   single link, picture and title together. */
#tours { padding-top: 3rem; }
#tours .major { margin-bottom: 2rem; }
.tour-cards { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.tour-card { display: flex; flex-direction: column; border: solid 1px #e6e6e6; border-radius: 12px; overflow: hidden;
  color: inherit; text-decoration: none; border-bottom: solid 1px #e6e6e6; background: #fff;
  transition: box-shadow .2s ease, transform .2s ease; }
.tour-card:hover { box-shadow: 0 10px 28px rgba(0, 0, 0, .12); transform: translateY(-2px); color: inherit; }
.tour-card-img { position: relative; display: block; aspect-ratio: 2 / 1; background: #eee; }
.tour-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tour-card-badge { position: absolute; top: .6rem; right: .6rem; background: rgba(0, 0, 0, .6); color: #fff;
  font-size: .8rem; font-weight: 700; padding: .1rem .6rem; border-radius: 999px; direction: ltr; }
.tour-card-play { position: absolute; top: 50%; left: 50%; width: 3.2rem; height: 3.2rem; margin: -1.6rem 0 0 -1.6rem;
  border-radius: 50%; background: rgba(70, 150, 229, .9); color: #fff; display: flex; align-items: center;
  justify-content: center; font-size: 1.1rem; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); transition: transform .2s ease; }
.tour-card:hover .tour-card-play { transform: scale(1.1); }
.tour-card-body { display: flex; flex-direction: column; gap: .2rem; padding: .9rem 1.1rem 1.1rem; text-align: right; }
.tour-card-body strong { color: #555; font-size: 1.05rem; }
.tour-card-body span { color: #4696e5; font-size: .9rem; }
#header .image.phone .inner a { display: block; height: 100%; border: 0; }
.spotlight a.image { border: 0; }
@media screen and (max-width: 736px) {
  #tours { padding-top: 2rem; }
  .tour-cards { grid-template-columns: 1fr; gap: 1rem; }
}

/* ---------------------------------------------------------------- 6. business pages (/for/<slug>) and the
   two landing sections that lead to them: "ordinary photos or a 360° tour?" table and the business cards */
.cmp-table table { table-layout: fixed; }
.cmp-table th, .cmp-table td { text-align: right; vertical-align: top; line-height: 1.7; }
.cmp-table thead th:first-child { width: 22%; }
.cmp-table tbody th { color: #555; font-weight: 600; }
.cmp-table thead th:last-child, .cmp-table td:last-child { background: rgba(70, 150, 229, .07); color: #444; }
.cmp-no { color: #c0392b; font-weight: 700; }
.cmp-yes { color: #2e9e5b; font-weight: 700; }
@media screen and (max-width: 736px) {
  .cmp-table th, .cmp-table td { padding: .5em .4em; font-size: .85em; }
  .cmp-table thead th:first-child { width: 26%; }
}
.ind-cards { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); text-align: right; }
.ind-card { display: flex; flex-direction: column; gap: .3rem; padding: 1.1rem 1.2rem; border: solid 1px #e6e6e6; border-radius: 12px;
  background: #fff; color: #777; border-bottom: solid 1px #e6e6e6; transition: box-shadow .2s, transform .2s; }
.ind-card:hover { box-shadow: 0 10px 28px rgba(0, 0, 0, .1); transform: translateY(-2px); color: #777; }
.ind-card strong { color: #555; font-size: 1.1em; }
.ind-card span { font-size: .85em; line-height: 1.6; }
.ind-card .ind-emoji { font-size: 2em; line-height: 1; }
.ind-card .ind-more { margin-top: auto; padding-top: .4rem; color: #4696e5; font-weight: 600; }
.ind-kicker { font-size: .9em; margin-bottom: .5em; }
.ind-list { list-style: none; padding-right: 0; }
.ind-list li { position: relative; padding-right: 1.6em; margin-bottom: .6em; }
.ind-list li::before { position: absolute; right: 0; font-weight: 700; }
.ind-no li::before { content: "✗"; color: #c0392b; }
.ind-yes li::before { content: "✓"; color: #2e9e5b; }
.ind-num { display: inline-flex; align-items: center; justify-content: center; width: 2.4em; height: 2.4em; border-radius: 50%;
  background: #4696e5; color: #fff; font-weight: 700; margin-bottom: .6em; }
.ind-steps { padding-right: 1.4em; }
.ind-steps li { margin-bottom: .5em; }
.ind-others { display: flex; flex-wrap: wrap; gap: .5em 1.4em; }

/* photos vs tour: four flat crops of the panorama beside the tour itself, then the question */
.pvt { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-bottom: 2.5rem; text-align: right; }
.pvt-photos { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.pvt-photo { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; background-size: 400% auto; background-color: #eee; }
.pvt-tour-img { border-radius: 12px; overflow: hidden; aspect-ratio: auto; }
.pvt-tour-img img { aspect-ratio: 2 / 1; height: auto; }
.pvt-question { grid-column: 1 / -1; text-align: center; font-size: 1.3rem; font-weight: 600; margin: 0; }
@media screen and (max-width: 736px) { .pvt { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- 7. free calculators (/tools/<slug>) */
.tool-head { padding-bottom: 2rem; }
.tool-head h1 { font-size: 2rem; margin-bottom: .4em; }
.tool { text-align: right; }
.tool-inputs { display: grid; align-items: end; gap: 1rem 1.25rem; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); margin: 0 0 1.5rem; border: 0; padding: 0; }
.tool-inputs legend { grid-column: 1 / -1; font-weight: 700; color: #555; margin-bottom: .2rem; }
.tool-field { display: flex; flex-direction: column; gap: .35rem; margin: 0; font-weight: 400; font-size: .9em; }
.tool-field small { color: #999; }
.tool-field input[type="text"], .tool-field select { border-color: #e6e6e6; background: #fff; color: #444; }
.tool-inline { flex-direction: row; align-items: center; gap: .4rem; }
.tool-inline input[type="text"] { height: 2.2em; max-width: 9em; padding: 0 .6em; }
.tool-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tool-result { border: solid 1px #e6e6e6; border-radius: 12px; padding: 1.2rem 1.4rem; margin-bottom: 1.5rem; background: rgba(70, 150, 229, .05); }
.tool-total { font-size: 2.2rem; font-weight: 800; color: #4696e5; margin: 0; line-height: 1.2; direction: ltr; text-align: right; }
.tool-total small { font-size: 1rem; color: #777; }
.tool-bars { display: flex; height: .7rem; border-radius: 999px; overflow: hidden; margin: .4rem 0 1rem; }
.tool-bars span { display: block; min-width: 2px; }
.tool-cards { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.tool-cards div { display: flex; flex-direction: column; gap: .2rem; }
.tool-cards span { font-size: .85em; color: #888; }
.tool-cards strong { font-size: 1.5rem; color: #4696e5; }
.tool > .button { margin-bottom: 1.5rem; }
.tool-table th, .tool-table td { text-align: right; vertical-align: middle; }
.tool-table tbody th { color: #555; font-weight: 600; }
.tool-table tfoot th, .tool-table tfoot td { font-size: 1.1em; }
.tool-note { font-size: .85em; color: #999; }
.tool-faq { border-bottom: solid 1px #eee; padding: .8rem 0; }
.tool-faq summary { cursor: pointer; font-weight: 600; color: #555; }
.tool-faq p { margin: .6rem 0 0; }
@media screen and (max-width: 736px) {
  .tool-head h1 { font-size: 1.5rem; }
  .tool-table th, .tool-table td { padding: .5em .3em; font-size: .85em; }
  .tool-inputs { grid-template-columns: 1fr 1fr; gap: .8rem; }
  .tool-inline input[type="text"] { max-width: none; width: 5.6em; padding: 0 .3em; font-size: .95em; }
  .tool-total { font-size: 1.7rem; }
}
.tool-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem; }
.tool-tabs .button { margin: 0; }
.tool > .button.small { margin-bottom: 1rem; }
.qr-grid { display: grid; grid-template-columns: 1fr 300px; gap: 2rem; align-items: start; }
.qr-inputs { grid-template-columns: 1fr 1fr; }
.qr-color { width: 100%; height: 2.75em; padding: 0 .3em; border: solid 1px #e6e6e6; border-radius: 6px; background: #fff; cursor: pointer; }
.qr-warn { color: #c0392b; }
.qr-preview { border: solid 1px #e6e6e6; border-radius: 12px; padding: 1.2rem; text-align: center; background: #fff; }
.qr-preview img { display: block; width: 100%; max-width: 260px; height: auto; margin: 0 auto; }
.qr-preview p { margin: .6rem 0 0; font-weight: 700; }
.qr-actions { display: flex; flex-direction: column; gap: .5rem; }
.qr-actions .button { margin: 0; }
.qr-data { display: block; margin-top: .6rem; color: #aaa; word-break: break-all; }
@media screen and (max-width: 736px) {
  .qr-grid { grid-template-columns: 1fr; }
  .qr-inputs { grid-template-columns: 1fr; }
}
/* where each price came from, and the sum behind each quantity (building and finishing tables) */
.tool-rate { white-space: nowrap; }
.tool-src { display: block; font-size: .72em; color: #aaa; margin-top: .15em; white-space: normal; line-height: 1.3; }
.tool-src-market { color: #2e8b57; }
.tool-src-own { color: #4696e5; font-weight: 700; }
.tool-table tr.tool-how td { padding-top: 0; font-size: .78em; color: #999; line-height: 1.5; }
/* an item and the sum under it read as one block: no zebra stripes, no line between them */
.tool-table tbody tr { background: none !important; }
.tool-table tbody tr:has(+ tr.tool-how) { border-bottom: 0; }
.tool-table tbody tr.tool-how { border-top: 0; }
.tool-table tr.tool-group th { background: #f6f8fb; color: #4696e5; font-weight: 700; font-size: .9em; }
.tool-how-inline { display: block; font-weight: 400; color: #aaa; font-size: .8em; margin-top: .15em; }
.tool-table tbody th small, .tool-table td small { color: #999; }
.tool-result > .button { margin-top: 1.2rem; }
.tool-qty { margin-top: 1rem; padding-top: 1rem; border-top: dashed 1px #dde6f0; }
.tool-qty strong { color: #555; }
.tool-qty strong small { font-size: .65em; color: #999; font-weight: 400; }
.tool-source { background: #fafafa; border-right: solid 3px #2e8b57; padding: .7rem .9rem; color: #777; }
.tool-check { display: flex; align-items: center; gap: .5rem; margin: 0 0 .6rem; font-size: .9em; cursor: pointer; }
.tool-check input[type="checkbox"] { position: static; display: inline-block; float: none; opacity: 1; z-index: auto; width: 1.1em; height: 1.1em; margin: 0; -moz-appearance: auto; -webkit-appearance: auto; appearance: auto; accent-color: #4696e5; }
/* the consumption rates: a two-column table, the rate's name and its box with the unit after it */
.tool-rates .tool-table { margin: .8rem 0 0; }
.tool-rates .tool-table table { margin: 0; }
.tool-rates .tool-table td.tool-rate { width: 1%; }
.tool-rates .tool-inline small { white-space: nowrap; min-width: 6.5em; }
.tool-rates .tool-inline input[type="text"] { width: 7em; flex: none; }
/* "how it is worked out": the steps of the sum with the visitor's numbers (paint/tiles, ROI, mortgage, QR) */
.tool-steps { border: solid 1px #e6e6e6; border-radius: 12px; padding: 1rem 1.2rem; margin: 0 0 1.5rem; background: #fcfcfd; }
.tool-steps h3 { font-size: 1rem; margin: 0 0 .6rem; color: #4696e5; }
.tool-steps ol { margin: 0; padding-right: 1.4em; padding-left: 0; }
.tool-steps li { margin: 0 0 .45rem; font-size: .9em; line-height: 1.7; color: #666; }
.tool-steps li b { color: #444; font-weight: 700; margin-left: .3em; }
.tool-formula { display: inline-block; unicode-bidi: isolate; white-space: nowrap; }
.tool-formula sup { font-size: .7em; }
.qr-inside code { display: block; direction: ltr; text-align: left; word-break: break-all; white-space: pre-wrap; background: #f3f5f8; border-radius: 6px; padding: .6rem .8rem; font-size: .85em; color: #333; }
.qr-inside p { margin: .6rem 0 0; font-size: .9em; }
.tool-currency { max-width: 12em; margin-bottom: 1rem; }
@media screen and (max-width: 736px) {
  .tool-formula { white-space: normal; }
}
/* Fractal buttons are one fixed-height line; tool buttons carry whole phrases, so they wrap instead of clipping */
.tool .button.small { white-space: normal; height: auto; min-height: 2.6em; line-height: 1.4; padding: .55em 1.2em; }
@media screen and (max-width: 736px) {
  .tool-tabs .button { flex: 1 1 0; }
  .tool-cards { grid-template-columns: 1fr 1fr; gap: .9rem .7rem; }
  .tool-cards strong { font-size: 1.15rem; }
}