/* v7 on furrsati.com: the few rules the LIVE site needs on top of the synced preview CSS.
   Loaded after the page's own stylesheets. Keep this file tiny; every rule says why. */

/* The nav CTA is a real link on live (/app/register?role=…), a <button> in the preview. */
a.snav__cta { text-decoration: none; }

/* On a phone the nav CTA stays: it is the one client door that is on screen above the cookie banner
   (the preview hides it below 768 px). Brand, language, CTA and menu are tightened so all four fit
   at 360 px in English, Arabic and French ("Publier un projet" is the longest). */
@media (max-width: 767px) {
  a.snav__cta { display: inline-flex; padding: 0 12px; font-size: .75rem; }
  .snav__row { gap: 6px; }
  .snav__right { gap: 4px; }
  .snav__logo { block-size: 20px; }
}
@media (max-width: 420px) {
  .snav-lang__trigger { font-size: 0; gap: 0; padding-inline: 8px; }
  .snav-lang__trigger > svg:last-child { display: none; }
}

/* The consent banner (components/v7/V7Consent): ConsentBanner's layout and sizes in the v7
   face. It sits above the nav (z 40), the search (z 60) and everything in the page. A modal
   <dialog> (the get-app sheet) is in the browser's top layer, the one thing it cannot sit above. */
.v7-consent { position: fixed; inset-inline: 16px; inset-block-end: 16px; z-index: 1000; display: flex; align-items: center; gap: 16px 24px; max-inline-size: 960px; margin-inline: auto; padding: 16px 24px; background: var(--white); color: var(--ink); border: 1px solid var(--line-2); border-radius: 16px; box-shadow: 0 8px 32px rgba(0, 0, 0, .18); font-family: var(--ui); font-weight: 300; }
.v7-consent:focus { outline: none; }
.v7-consent:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.v7-consent__text { flex: 1 1 auto; min-inline-size: 0; }
.v7-consent__title { margin: 0 0 4px; font-weight: 700; font-size: .9375rem; line-height: 1.3; }
.v7-consent__body { margin: 0; font-size: .8125rem; line-height: 1.5; color: var(--muted); }
.v7-consent__more { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.v7-consent__actions { display: flex; flex: none; gap: 8px; }
.v7-consent__btn { min-block-size: 44px; min-inline-size: 112px; padding-inline: 20px; border: 1.5px solid var(--ink); border-radius: 999px; background: transparent; color: var(--ink); font: inherit; font-weight: 700; font-size: .875rem; cursor: pointer; }
@media (hover: hover) { .v7-consent__btn:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); } }
.v7-consent__btn:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.v7-consent__btn:active { opacity: .8; }
@media (max-width: 640px) {
  .v7-consent { flex-direction: column; align-items: stretch; padding: 16px; }
  .v7-consent__actions { inline-size: 100%; }
  .v7-consent__btn { flex: 1 1 0; }
}

/* The footer's "Cookie settings" (a legal need the preview does not draw): a text button in the
   legal row that reopens the consent banner, set exactly like the legal links beside it. */
.foot__legal .foot__cookies { display: inline-flex; align-items: center; min-height: 40px; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; font-weight: 700; letter-spacing: inherit; cursor: pointer; }
.foot__legal .foot__cookies:hover { color: var(--teal); }
.foot__legal .foot__cookies:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
@media (max-width: 767px) { .foot__legal .foot__cookies { min-width: 44px; justify-content: center; } }

/* The home page's faces orbit with REAL featured freelancers (lib/v7/faces.ts). The preview's
   rings are drawn for exactly 11 + 7 (phone: 18) faces; live spaces however many there are. */
.faces[data-live-faces] .orb__ring li { --t: calc(var(--a) - 90deg + var(--j) * 360deg / var(--N, 18)); }
@media (min-width: 960px) {
  .faces[data-live-faces] .orb__ring--o li,
  .faces[data-live-faces] .orb__ring--i li { --t: calc(var(--a) - 90deg + var(--i) * 360deg / var(--n)); }
}
/* the card: the app's level chip (badges.css) in place of the preview's star chip, hidden
   below level 2; the verified mark and the PRO tag sit on the name line */
.faces[data-live-faces] .oc__lvl[hidden] { display: none; }
.faces[data-live-faces] .lvl.lv-chip { background: var(--lv-tint); color: var(--lv-text); }
.faces[data-live-faces] .lvl .lvc { width: 18px; height: 18px; }
.faces[data-live-faces] .lvl .lvc > svg { width: 100%; height: 100%; padding: 0; border-radius: 0; background: none; }
.faces[data-live-faces] .oc__name .vf-mark { width: 17px; height: 17px; }
.faces[data-live-faces] .oc__name .vf-mark[hidden], .faces[data-live-faces] .oc__pro[hidden] { display: none; }
.faces[data-live-faces] .oc__pro { position: static; flex: none; margin: 0; margin-inline-start: 2px; bottom: auto; }
.faces[data-live-faces] .oc__craft { overflow-wrap: anywhere; }
.faces[data-live-faces] .oc__name > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 9em; }
@media (max-width: 959px) { .faces[data-live-faces] .oc__name .vf-mark { width: 15px; height: 15px; } }

/* Lebanon guide: each price-list row's label links to its /hire/<type>-lebanon page
   (lib/v7/lebanon.ts). Same look as the preview's plain span; underline on hover only. */
.menu__list a.menu__w { color: inherit; text-decoration: none; }
.menu__list a.menu__w:hover { text-decoration: underline; text-underline-offset: 3px; }