/* ProMano web styles. Brand tokens from CLAUDE.md; RTL-first with logical properties only.
   Fonts: 400 and 700 files only; 600 uses the 700 file (performance budget, T9.4). */

@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("/fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("/fonts/ibm-plex-sans-arabic-arabic-700-normal.woff2") format("woff2");
  font-weight: 600 700;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("/fonts/ibm-plex-sans-arabic-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("/fonts/ibm-plex-sans-arabic-latin-700-normal.woff2") format("woff2");
  font-weight: 600 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  src: url("/fonts/archivo-latin-900-normal.woff2") format("woff2");
  font-weight: 900;
  font-display: swap;
}
@font-face {
  font-family: "Baloo Bhaijaan 2";
  src: url("/fonts/baloo-bhaijaan-2-arabic-800-normal.woff2") format("woff2");
  font-weight: 800;
  font-display: swap;
}

:root {
  --tape-yellow: #ffc531;
  --ink: #15161a;
  --contact-green: #157347;
  --overall-blue: #2347b5;
  --paper: #faf8f3;
  --concrete: #eceae4;
  --yellow-tint: #fff1c2;
  /* «مراجَع من برومانو» (trust blue on a light tint) and the saved heart (rose). */
  --trust-tint: #e8eefb;
  --like-rose: #e0476d;
  --muted: #5e6068;
  --white: #ffffff;
  --border: #eceae4;
  --input-border: #d5d2ca;
  --radius: 14px;
  --radius-sm: 10px;
  --font-text: "IBM Plex Sans Arabic", system-ui, sans-serif;
  --font-latin-display: "Archivo", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --font-arabic-display: "Baloo Bhaijaan 2", "IBM Plex Sans Arabic", system-ui, sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.6;
}

:lang(ar) body,
body:lang(ar) {
  font-size: 17px;
}

a {
  color: var(--overall-blue);
}
a:hover {
  color: var(--ink);
}

h1,
h2,
h3 {
  line-height: 1.3;
  margin-block: 0;
}
h1 {
  font-size: 1.5rem;
}
h2 {
  font-size: 1.125rem;
}

img {
  max-inline-size: 100%;
  display: block;
}

.container {
  max-inline-size: 640px;
  margin-inline: auto;
  padding-inline: 16px;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.muted {
  color: var(--muted);
  font-size: 0.875rem;
}

.visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Header */
.site-header {
  background: var(--white);
  border-block-end: 1px solid var(--border);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-block-size: 56px;
}
.lang-switch {
  font-size: 0.875rem;
  font-weight: 600;
}

/* Language menu (ADR-022): works without JavaScript. */
.lang-menu {
  position: relative;
  font-size: 0.875rem;
  font-weight: 600;
}
.lang-menu summary {
  cursor: pointer;
  list-style: none;
  padding: 6px 10px;
  border: 1px solid var(--concrete);
  border-radius: 999px;
  color: var(--overall-blue);
}
.lang-menu summary::-webkit-details-marker {
  display: none;
}
.lang-menu summary::after {
  content: " ▾";
}
.lang-menu ul {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + 6px);
  z-index: 20;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  background: #fff;
  border: 1px solid var(--concrete);
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(21, 22, 26, 0.12);
  min-width: 9rem;
}
.lang-menu li a {
  display: block;
  padding: 8px 14px;
  color: var(--ink);
  text-decoration: none;
}
.lang-menu li a:hover,
.lang-menu li a:focus-visible {
  background: var(--paper);
}

/* Wordmark: the yellow bar under the lower half of "pro" (or «برو»). */
.wordmark {
  text-decoration: none;
  color: var(--ink);
  line-height: 1;
}
.wordmark--latin {
  direction: ltr;
  font-family: var(--font-latin-display);
  font-weight: 900;
  font-size: 1.5rem;
  letter-spacing: -0.03em;
}
.wordmark--arabic {
  font-family: var(--font-arabic-display);
  font-weight: 800;
  font-size: 1.625rem;
  line-height: 1.2;
}
.wordmark__hl {
  position: relative;
  display: inline-block;
  isolation: isolate;
}
.wordmark__hl::before {
  content: "";
  position: absolute;
  inset-inline: -0.06em;
  inset-block: 52% 0;
  background: var(--tape-yellow);
  z-index: -1;
}
.wordmark--arabic .wordmark__hl::before {
  inset-inline: -0.08em;
  inset-block: 58% 10%;
}

/* Badges and chips */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--trust-tint);
  color: var(--overall-blue);
  font-size: 0.75rem;
  font-weight: 600;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  background: var(--white);
  border: 1px solid var(--border);
  font-size: 0.8125rem;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-block-size: 52px;
  padding-inline: 20px;
  border-radius: var(--radius);
  border: 0;
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.btn--primary {
  background: var(--ink);
  color: var(--white);
}
.btn--outline {
  background: var(--white);
  color: var(--ink);
  border: 1.5px solid var(--ink);
}
.btn--whatsapp {
  background: var(--contact-green);
  color: var(--white);
  flex: 1;
}
.btn--whatsapp:hover,
.btn--primary:hover {
  color: var(--white);
}
.btn--icon {
  inline-size: 54px;
  padding-inline: 0;
}

/* Sticky contact bar on provider pages */
.contact-bar {
  position: sticky;
  inset-block-end: 0;
  background: var(--white);
  border-block-start: 1px solid var(--border);
  padding: 12px 16px 16px;
}
.contact-bar__row {
  display: flex;
  gap: 10px;
  max-inline-size: 640px;
  margin-inline: auto;
}
.contact-bar__note {
  display: block;
  text-align: center;
  margin-block-start: 6px;
}

/* Cards */
.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
}

/* Error pages */
.error-page {
  padding-block: 48px;
}

/* Desktop */
@media (min-width: 1024px) {
  .container--wide {
    max-inline-size: 1200px;
  }
  .site-header .container,
  .site-footer .container {
    max-inline-size: 1100px;
  }
}

.page-pad {
  padding-block: 24px;
}

/* Provider page */
.stack-tight {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.provider-head {
  display: flex;
  gap: 14px;
  align-items: center;
}
.avatar {
  inline-size: 72px;
  block-size: 72px;
  flex: none;
  overflow: hidden;
  border-radius: 50%;
  background: var(--concrete);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  font-weight: 700;
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chip--new {
  background: var(--concrete);
  font-weight: 600;
}
.photo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.photo-tile {
  position: relative;
  display: block;
  aspect-ratio: 1;
  border-radius: 12px;
  overflow: hidden;
  background: #e4dccb;
}
.photo-tile img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
.photo-more {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(21 22 26 / 0.7);
  color: var(--white);
  font-weight: 600;
}
.review {
  margin: 0;
}
.review p {
  margin-block: 0 4px;
}
.review-reply {
  margin-block-start: 8px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--paper);
  font-size: 0.9375rem;
}

/* Desktop provider page (S-Web-ProviderDesktop): contact card beside the content. */
@media (min-width: 1024px) {
  .provider-layout {
    max-inline-size: 1100px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 40px;
    align-items: start;
  }
  .provider-aside {
    position: sticky;
    inset-block-start: 24px;
    margin-block-start: 24px;
  }
  .provider-aside .contact-bar {
    position: static;
    border: 1px solid var(--border);
    border-radius: var(--radius);
  }
}

/* Footer */
.site-footer {
  border-block-start: 1px solid var(--border);
  margin-block-start: 32px;
  padding-block: 20px 96px;
  font-size: 0.875rem;
}
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
}

/* Forms */
.search-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.search-form__row {
  display: flex;
  gap: 8px;
}
.field {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.8125rem;
  color: var(--muted);
}
.field select,
.field input {
  min-block-size: 46px;
  border-radius: 12px;
  border: 1px solid var(--input-border);
  background: var(--white);
  font: inherit;
  font-size: 0.9375rem;
  color: var(--ink);
  padding-inline: 10px;
}
.check {
  display: flex;
  align-items: center;
  gap: 10px;
  min-block-size: 44px;
  font-size: 0.9375rem;
}
.check input {
  inline-size: 22px;
  block-size: 22px;
  accent-color: var(--ink);
}

/* List page */
.provider-list,
.link-list,
.service-tiles,
.best-strip {
  list-style: none;
  margin: 0;
  padding: 0;
}
.provider-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.list-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 10px 12px;
}
.list-row__main {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
  min-block-size: 44px;
}
.list-row__rank {
  inline-size: 22px;
  flex: none;
}
.list-row__wa {
  color: var(--contact-green);
  font-weight: 700;
  font-size: 0.875rem;
  padding: 10px 6px;
}
.chip--small {
  margin-inline-start: 6px;
  padding: 1px 8px;
  font-size: 0.6875rem;
}
.link-list li {
  padding-block: 4px;
}

/* Home */
.hero__title {
  font-size: 1.75rem;
}
.service-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.service-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  min-block-size: 72px;
  border-radius: 16px;
  background: var(--ink);
  color: var(--white);
  font-weight: 600;
  text-decoration: none;
  text-align: center;
}
.service-tile:hover {
  color: var(--white);
}
.steps {
  margin: 0;
  padding-inline-start: 22px;
}
.best-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.best-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--ink);
  text-decoration: none;
}
.best-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Review flow */
.steps-bar {
  display: flex;
  align-items: center;
  gap: 10px;
}
.steps-bar__track {
  flex: 1;
  display: flex;
  gap: 6px;
}
.steps-bar__track > span {
  flex: 1;
  block-size: 6px;
  border-radius: 999px;
  background: var(--input-border);
}
.steps-bar__track > .steps-bar__on {
  background: var(--ink);
}
.provider-mini {
  display: flex;
  align-items: center;
  gap: 12px;
}
.avatar--small {
  inline-size: 52px;
  block-size: 52px;
  font-size: 1.375rem;
}
.avatar--tiny {
  inline-size: 40px;
  block-size: 40px;
  font-size: 1.0625rem;
}
.avatar img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
.choice-group {
  border: 0;
  margin: 0;
  padding: 0;
}
.choice {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--input-border);
  background: var(--white);
}
.choice:has(input:checked) {
  border: 2px solid var(--ink);
}
.choice input {
  inline-size: 22px;
  block-size: 22px;
  margin: 2px 0 0;
  accent-color: var(--ink);
  flex: none;
}
.stars-input {
  border: 0;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.stars-input legend {
  inline-size: 100%;
  font-weight: 600;
  margin-block-end: 6px;
}
.stars-input label {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 52px;
  block-size: 52px;
  border-radius: 12px;
  border: 1px solid var(--input-border);
  background: var(--white);
  font-size: 1.75rem;
  color: var(--input-border);
  cursor: pointer;
}
.stars-input input {
  position: absolute;
  opacity: 0;
  inset: 0;
  cursor: pointer;
}
.stars-input {
  flex-direction: row-reverse;
  justify-content: flex-end;
}
.stars-input label:has(input:checked),
.stars-input label:has(input:checked) ~ label {
  border-color: var(--ink);
  color: var(--ink);
}
.stars-input label:has(input:checked) {
  border-width: 2px;
}
.stars-input label:has(input:focus-visible) {
  outline: 3px solid var(--overall-blue);
}
.field textarea {
  border-radius: 12px;
  border: 1px solid var(--input-border);
  background: var(--white);
  font: inherit;
  color: var(--ink);
  padding: 10px;
}
.form-error {
  background: #fdecea;
  color: #b42318;
  border-radius: 12px;
  padding: 10px 14px;
  margin: 0;
}
.tip {
  background: var(--yellow-tint);
  border-color: var(--yellow-tint);
}
.review-report {
  font-size: 0.8125rem;
  margin-inline-start: 6px;
}

/* Mascot (ADR-021): the robot face. Motion via transforms only; still for reduced motion. */
.mano-wrap {
  display: flex;
  justify-content: center;
  align-self: stretch;
}
.mano .mano-head,
.mano .mano-eyes,
.mano .mano-sign,
.mano .mano-zz {
  transform-box: view-box;
}
.mano .mano-head {
  transform-origin: 120px 176px;
  animation: mano-bob 2s ease-in-out infinite;
}
.mano .mano-eyes {
  transform-origin: 120px 146px;
  animation: mano-blink 4.5s ease-in-out infinite;
}
.mano--hello .mano-head {
  animation: mano-tilt 1.6s ease-in-out infinite;
}
.mano--thumbsUp .mano-head {
  animation: mano-pop 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.mano--oops .mano-head {
  animation: mano-tremble 0.25s linear infinite;
}
.mano--sleep .mano-head {
  animation: mano-breathe 3s ease-in-out infinite;
}
.mano--sleep .mano-eyes,
.mano--hello .mano-eyes,
.mano--thumbsUp .mano-eyes {
  animation: none;
}
.mano--point .mano-sign {
  animation: mano-nudge 1s ease-in-out infinite;
}
.mano--notFound .mano-sign,
.mano--wait .mano-sign {
  animation: mano-pulse 1.4s ease-in-out infinite;
}
.mano--sleep .mano-zz {
  animation: mano-zz 2.6s ease-in-out infinite;
}
@keyframes mano-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
@keyframes mano-blink {
  0%, 94%, 100% { transform: scaleY(1); }
  97% { transform: scaleY(0.1); }
}
@keyframes mano-tilt {
  0%, 100% { transform: rotate(-7deg); }
  50% { transform: rotate(6deg); }
}
@keyframes mano-pop {
  0% { transform: translateY(24px) scale(0.85); }
  100% { transform: translateY(0) scale(1); }
}
@keyframes mano-tremble {
  0%, 100% { transform: rotate(-1.5deg); }
  50% { transform: rotate(1.5deg); }
}
@keyframes mano-breathe {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(1.03); }
}
@keyframes mano-nudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(8px); }
}
@keyframes mano-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
@keyframes mano-zz {
  0% { transform: translate(0, 0); opacity: 1; }
  100% { transform: translate(8px, -20px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .mano * {
    animation: none !important;
  }
}

/* Provider shop line and «فما غلطة؟» (M12) */
.shop-line a {
  color: var(--overall-blue);
  white-space: nowrap;
}
.fix-link {
  font-size: 0.9rem;
}
.fix-error {
  background: #fdecea;
  color: #b42318;
  border-radius: 12px;
  padding: 10px 14px;
}

/* App offer (ADR-019): a card in the page, a banner after a contact. Revealed by site.js. */
.app-offer {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--concrete);
}
.app-offer[hidden],
.app-banner[hidden] {
  display: none;
}
.app-banner {
  position: fixed;
  inset-inline: 12px;
  top: 12px;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 6px 24px rgb(21 22 26 / 18%);
}
.app-banner span {
  flex: 1;
}
.near-me {
  margin: 0;
}
.review-photo img {
  display: block;
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: var(--radius-sm);
}
fieldset.field {
  border: 0;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
fieldset.field legend {
  padding: 0;
  margin-block-end: 4px;
}