/*
 * PromXAI Theme 2.0.0-RC10 — Professional Brand Contact System
 * One compact, brand-accurate contact dialog owner for phone, tablet, laptop
 * and desktop. Social/service cards stay visually quiet while recognizable
 * brand marks carry the identity.
 */

.px-phone-contact-dialog {
  --px-contact-bg: #173052;
  --px-contact-bg-2: #142845;
  --px-contact-card: rgba(255,255,255,.060);
  --px-contact-card-hover: rgba(255,255,255,.095);
  --px-contact-line: rgba(210,225,255,.12);
  --px-contact-line-strong: rgba(219,232,255,.18);
  --px-contact-text: #f7f9ff;
  --px-contact-muted: #a9b5ca;
  --px-contact-brand: #8374ff;
  --px-contact-shadow: 0 28px 84px rgba(2,8,20,.42);
  width: min(780px, calc(100vw - 38px));
  max-width: 780px;
  max-height: min(90dvh, 840px);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 28px;
  overflow: visible;
  color: var(--px-contact-text);
  background: transparent;
}

html[data-theme="light"] .px-phone-contact-dialog {
  --px-contact-bg: #fbfcff;
  --px-contact-bg-2: #f5f8fc;
  --px-contact-card: #ffffff;
  --px-contact-card-hover: #ffffff;
  --px-contact-line: rgba(79,103,148,.12);
  --px-contact-line-strong: rgba(73,98,145,.18);
  --px-contact-text: #172238;
  --px-contact-muted: #6f7c93;
  --px-contact-brand: #695ce8;
  --px-contact-shadow: 0 26px 72px rgba(55,75,112,.18);
}

.px-phone-contact-dialog::backdrop {
  background: rgba(4,9,19,.63);
  -webkit-backdrop-filter: blur(16px) saturate(108%);
  backdrop-filter: blur(16px) saturate(108%);
}

html[data-theme="light"] .px-phone-contact-dialog::backdrop {
  background: rgba(32,44,65,.30);
}

.px-phone-contact-dialog__sheet {
  width: 100%;
  max-height: min(90dvh, 840px);
  padding: 14px 18px 18px;
  border: 1px solid var(--px-contact-line-strong);
  border-radius: 28px;
  overflow: auto;
  scrollbar-width: none;
  color: var(--px-contact-text);
  background:
    radial-gradient(circle at 88% -10%, rgba(112,88,238,.10), transparent 34%),
    radial-gradient(circle at 10% 108%, rgba(40,126,239,.055), transparent 32%),
    linear-gradient(145deg,var(--px-global-page-glass-a,rgba(10,24,55,.70)),var(--px-global-page-glass-b,rgba(8,20,47,.58)));
  -webkit-backdrop-filter:blur(20px) saturate(1.10);backdrop-filter:blur(20px) saturate(1.10);
  box-shadow: var(--px-contact-shadow), inset 0 1px 0 rgba(255,255,255,.07);
  direction: rtl;
}

html[data-theme="light"] .px-phone-contact-dialog__sheet {
  background:
    radial-gradient(circle at 88% -10%, rgba(111,88,235,.045), transparent 33%),
    linear-gradient(145deg,var(--px-global-page-glass-strong-a,rgba(255,255,255,.84)),var(--px-global-page-glass-strong-b,rgba(246,250,255,.74)));
  box-shadow: var(--px-contact-shadow), inset 0 1px 0 rgba(255,255,255,.98);
}

.px-phone-contact-dialog__sheet::-webkit-scrollbar { display: none; }
html[data-ui-lang="en"] .px-phone-contact-dialog__sheet { direction: ltr; }

.px-phone-contact-dialog__grab {
  width: 42px;
  height: 4px;
  margin: 0 auto 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--px-contact-muted) 24%, transparent);
}

.px-phone-contact-dialog__head {
  min-height: 66px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--px-contact-line);
}

.px-phone-contact-dialog__head-copy { min-width: 0; flex: 1 1 auto; }
.px-phone-contact-dialog__title-line { min-width: 0; display: flex; align-items: center; gap: 8px; }

.px-phone-contact-dialog__title-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 13px;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg, #3d7cf5 0%, #7059ef 58%, #9651dd 100%);
  box-shadow: 0 9px 22px rgba(76,78,220,.20), inset 0 1px 0 rgba(255,255,255,.24);
}

.px-phone-contact-dialog__title-icon .px-icon { width: 20px; height: 20px; stroke-width: 1.9; }

.px-phone-contact-dialog__title-line h2 {
  margin: 0;
  color: var(--px-contact-text);
  font-size: clamp(25px, 2.6vw, 31px);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: var(--px-heading-tracking, 0);
  white-space: nowrap;
}

.px-phone-contact-dialog__brand {
  min-height: 22px;
  padding: 0 8px;
  border: 1px solid color-mix(in srgb, var(--px-contact-brand) 34%, var(--px-contact-line));
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  color: var(--px-contact-brand);
  background: color-mix(in srgb, var(--px-contact-brand) 8%, transparent);
  font-size: 7px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.px-phone-contact-dialog__head p {
  margin: 5px 46px 0 0;
  color: var(--px-contact-muted);
  font-size: 8.5px;
  font-weight: 650;
  line-height: 1.5;
}
html[data-ui-lang="en"] .px-phone-contact-dialog__head p { margin-right: 0; margin-left: 46px; }

.px-phone-contact-dialog__head > button {
  width: 39px;
  height: 39px;
  min-width: 39px;
  padding: 0;
  border: 1px solid var(--px-contact-line);
  border-radius: 13px;
  display: grid;
  place-items: center;
  color: var(--px-contact-muted);
  background: var(--px-contact-card);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  cursor: pointer;
}
html[data-theme="light"] .px-phone-contact-dialog__head > button {
  box-shadow: 0 7px 17px rgba(73,92,132,.07), inset 0 1px 0 #fff;
}
.px-phone-contact-dialog__head > button .px-icon { width: 18px; height: 18px; }

.px-phone-contact-dialog__content { display: grid; gap: 15px; padding-top: 14px; }
.px-phone-contact-dialog__section { min-width: 0; }
.px-phone-contact-dialog__section-title { margin: 0 4px 7px; display: flex; align-items: center; gap: 7px; }
.px-phone-contact-dialog__section-title::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 999px;
  flex: 0 0 auto;
  background: linear-gradient(135deg,#4c84ff,#8a5ef2);
  box-shadow: 0 0 10px rgba(107,88,235,.28);
}
.px-phone-contact-dialog__section-title strong { color: var(--px-contact-text); font-size: 11px; font-weight: 900; }

.px-phone-contact-dialog__direct-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.px-phone-contact-dialog__social-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.px-phone-contact-dialog__services { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }

.px-phone-contact-dialog__direct,
.px-phone-contact-dialog__service,
.px-phone-contact-dialog__social {
  border: 1px solid var(--px-contact-line);
  color: var(--px-contact-text);
  background: var(--px-contact-card);
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
html[data-theme="light"] :is(.px-phone-contact-dialog__direct,.px-phone-contact-dialog__service,.px-phone-contact-dialog__social) {
  box-shadow: 0 7px 20px rgba(69,88,128,.055), inset 0 1px 0 #fff;
}

.px-phone-contact-dialog__direct,
.px-phone-contact-dialog__service {
  position: relative;
  min-height: 74px;
  padding: 10px 11px;
  border-radius: 17px;
  display: grid;
  grid-template-columns: 42px minmax(0,1fr) auto;
  align-items: center;
  gap: 10px;
}

.px-phone-contact-dialog__direct-icon,
.px-phone-contact-dialog__service-icon {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg,#6759e7,#7755dd);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.19), 0 8px 18px rgba(10,18,44,.11);
}

.px-phone-contact-dialog__direct.is-whatsapp .px-phone-contact-dialog__direct-icon {
  background: #25d366;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 9px 18px rgba(37,211,102,.16);
}
.px-phone-contact-dialog__direct.is-email .px-phone-contact-dialog__direct-icon { background: linear-gradient(135deg,#7064ef,#5147d1); }

.px-contact-brand-icon {
  display: block;
  width: 21px;
  height: 21px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}
.px-phone-contact-dialog__direct-icon > .px-icon,
.px-phone-contact-dialog__service-icon > .px-icon { width: 21px; height: 21px; stroke-width: 1.9; }

.px-phone-contact-dialog__direct > span:nth-child(2),
.px-phone-contact-dialog__service > span:nth-child(2) { min-width: 0; }
.px-phone-contact-dialog__direct strong,
.px-phone-contact-dialog__direct small,
.px-phone-contact-dialog__service strong,
.px-phone-contact-dialog__service small { display: block; }
.px-phone-contact-dialog__direct strong { font-size: 10.5px; line-height: 1.3; }
.px-phone-contact-dialog__direct small { margin-top: 3px; color: var(--px-contact-muted); font-size: 7.1px; line-height: 1.4; }

.px-phone-contact-dialog__direct b,
.px-phone-contact-dialog__service b,
.px-phone-contact-dialog__social-status {
  min-height: 18px;
  padding: 0 6px;
  border: 1px solid rgba(223,172,50,.15);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #a8790f;
  background: rgba(247,173,16,.09);
  font-size: 5.8px;
  font-weight: 950;
  font-style: normal;
  white-space: nowrap;
}
html[data-theme="dark"] :is(.px-phone-contact-dialog__direct b,.px-phone-contact-dialog__service b,.px-phone-contact-dialog__social-status) {
  color: #e7be55;
  border-color: rgba(232,190,80,.14);
  background: rgba(219,171,51,.09);
}

.px-phone-contact-dialog__direct i,
.px-phone-contact-dialog__service i {
  width: 21px;
  height: 21px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  justify-self: end;
  color: var(--px-contact-muted);
  background: color-mix(in srgb,var(--px-contact-muted) 7%,transparent);
  font-style: normal;
}
.px-phone-contact-dialog__direct i .px-icon,
.px-phone-contact-dialog__service i .px-icon { width: 12px; height: 12px; }
html[dir="rtl"] .px-phone-contact-dialog__direct i .px-icon,
html[dir="rtl"] .px-phone-contact-dialog__service i .px-icon { transform: rotate(180deg); }

/* Social platform cards: canonical 3 × 3 owner for phone through desktop.
   The brand mark stays dominant; the temporary Soon badge sits beside the
   mark instead of consuming a separate row. */
.px-phone-contact-dialog__social {
  position: relative;
  min-width: 0;
  min-height: 82px;
  padding: 8px 7px 7px;
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
}
.px-phone-contact-dialog__social-mark {
  min-width: 0;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}
.px-phone-contact-dialog__social-icon {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 13px;
  display: grid;
  place-items: center;
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.17), 0 8px 18px rgba(10,18,44,.11);
}
.px-phone-contact-dialog__social-icon .px-contact-brand-icon { width: 23px; height: 23px; }
.px-phone-contact-dialog__social strong {
  max-width: 100%;
  overflow: hidden;
  color: var(--px-contact-text);
  font-size: 9.6px;
  font-weight: 850;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.px-phone-contact-dialog__social-status {
  position: absolute;
  top: 9px;
  left: 9px;
  flex: 0 0 auto;
  min-height: 18px;
  padding-inline: 5px;
  font-size: 5.4px;
  z-index: 2;
}

.px-phone-contact-dialog__social.is-instagram .px-phone-contact-dialog__social-icon {
  background: radial-gradient(circle at 30% 110%,#feda75 0 12%,#fa7e1e 34%,#d62976 58%,#962fbf 77%,#4f5bd5 100%);
}
.px-phone-contact-dialog__social.is-threads .px-phone-contact-dialog__social-icon {
  background: #090a0c;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 8px 18px rgba(10,18,44,.12);
}
.px-phone-contact-dialog__social.is-tiktok .px-phone-contact-dialog__social-icon {
  background: #08090c;
  box-shadow: inset 1px 0 0 rgba(37,244,238,.70), inset -1px 0 0 rgba(254,44,85,.70), 0 8px 18px rgba(10,18,44,.12);
}
.px-phone-contact-dialog__social.is-youtube .px-phone-contact-dialog__social-icon { background: #ff0033; }
.px-phone-contact-dialog__social.is-facebook .px-phone-contact-dialog__social-icon { background: #1877f2; }
.px-phone-contact-dialog__social.is-x .px-phone-contact-dialog__social-icon {
  background: #090a0c;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 8px 18px rgba(10,18,44,.12);
}
.px-phone-contact-dialog__social.is-pinterest .px-phone-contact-dialog__social-icon { background: #bd081c; }
.px-phone-contact-dialog__social.is-behance .px-phone-contact-dialog__social-icon { background: #1769ff; }
.px-phone-contact-dialog__social.is-linkedin .px-phone-contact-dialog__social-icon { background: #0a66c2; }

/* Services. The design service uses a vector-pen mark; Mostaql/Khamsat use
   their compact wordmarks rather than improvised letters/numbers. */
.px-phone-contact-dialog__service { min-height: 76px; }
.px-phone-contact-dialog__service strong { font-size: 9.4px; line-height: 1.28; }
.px-phone-contact-dialog__service small { margin-top: 3px; color: var(--px-contact-muted); font-size: 6.8px; line-height: 1.38; }

.px-phone-contact-dialog__service.is-design_whatsapp .px-phone-contact-dialog__service-icon {
  background: linear-gradient(135deg,#357cf4 0%,#6e59ee 58%,#9b4fdf 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 9px 20px rgba(93,74,224,.17);
}

.px-phone-contact-dialog__service.is-mostaql .px-phone-contact-dialog__service-icon,
.px-phone-contact-dialog__service.is-khamsat .px-phone-contact-dialog__service-icon {
  width: 58px;
  height: 42px;
  border: 1px solid rgba(96,116,150,.13);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 7px 17px rgba(54,73,108,.10), inset 0 1px 0 #fff;
}
.px-phone-contact-dialog__service.is-mostaql,
.px-phone-contact-dialog__service.is-khamsat { grid-template-columns: 58px minmax(0,1fr) auto; }

.px-contact-wordmark {
  display: block;
  max-width: 50px;
  max-height: 24px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.px-contact-wordmark--mostaql { max-width: 48px; }
.px-contact-wordmark--khamsat { max-width: 50px; }

html[data-theme="light"] .px-phone-contact-dialog__direct.is-whatsapp { background: linear-gradient(135deg,#f7fffb,#fff 48%); }
html[data-theme="light"] .px-phone-contact-dialog__direct.is-email { background: linear-gradient(135deg,#faf9ff,#fff 48%); }
html[data-theme="light"] .px-phone-contact-dialog__service.is-design_whatsapp { background: linear-gradient(135deg,#f7f9ff,#fff 52%); }
html[data-theme="light"] :is(.px-phone-contact-dialog__service.is-mostaql,.px-phone-contact-dialog__service.is-khamsat) { background: #fff; }

.px-phone-contact-dialog :is(.is-soon,[aria-disabled="true"]) { cursor: default; }

@media (hover:hover) and (pointer:fine) {
  .px-phone-contact-dialog__head > button:hover,
  .px-phone-contact-dialog__head > button:focus-visible,
  a.px-phone-contact-dialog__direct:hover,
  a.px-phone-contact-dialog__direct:focus-visible,
  a.px-phone-contact-dialog__service:hover,
  a.px-phone-contact-dialog__service:focus-visible,
  a.px-phone-contact-dialog__social:hover,
  a.px-phone-contact-dialog__social:focus-visible {
    transform: translateY(-2px);
    border-color: color-mix(in srgb,var(--px-contact-brand) 34%,var(--px-contact-line));
    background: var(--px-contact-card-hover);
    box-shadow: 0 13px 28px rgba(57,73,112,.10), inset 0 1px 0 rgba(255,255,255,.08);
  }
  html[data-theme="light"] a.px-phone-contact-dialog__direct:hover,
  html[data-theme="light"] a.px-phone-contact-dialog__direct:focus-visible,
  html[data-theme="light"] a.px-phone-contact-dialog__service:hover,
  html[data-theme="light"] a.px-phone-contact-dialog__service:focus-visible,
  html[data-theme="light"] a.px-phone-contact-dialog__social:hover,
  html[data-theme="light"] a.px-phone-contact-dialog__social:focus-visible {
    box-shadow: 0 14px 29px rgba(68,86,125,.11), inset 0 1px 0 #fff;
  }
}

@media (max-width:760px) {
  .px-phone-contact-dialog {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    border-radius: 0;
  }
  .px-phone-contact-dialog[open] { display: grid; align-items: end; }
  .px-phone-contact-dialog__sheet {
    max-height: min(95dvh,900px);
    padding: 9px 13px calc(16px + env(safe-area-inset-bottom,0px));
    border-radius: 28px 28px 0 0;
  }
  .px-phone-contact-dialog__grab { margin-bottom: 7px; }
  .px-phone-contact-dialog__head { min-height: 68px; gap: 9px; padding-bottom: 10px; }
  .px-phone-contact-dialog__title-icon { width: 36px; height: 36px; flex-basis: 36px; border-radius: 12px; }
  .px-phone-contact-dialog__title-icon .px-icon { width: 19px; height: 19px; }
  .px-phone-contact-dialog__title-line { gap: 7px; }
  .px-phone-contact-dialog__title-line h2 { font-size: 25px; }
  .px-phone-contact-dialog__brand { min-height: 21px; padding-inline: 7px; font-size: 6.7px; }
  .px-phone-contact-dialog__head p { margin-top: 4px; margin-right: 43px; font-size: 7.8px; }
  html[data-ui-lang="en"] .px-phone-contact-dialog__head p { margin-right: 0; margin-left: 43px; }
  .px-phone-contact-dialog__head > button { width: 38px; height: 38px; min-width: 38px; }
  .px-phone-contact-dialog__content { gap: 13px; padding-top: 11px; }
  .px-phone-contact-dialog__section-title { margin-bottom: 6px; }
  .px-phone-contact-dialog__section-title strong { font-size: 11.5px; }

  .px-phone-contact-dialog__direct-grid { gap: 8px; }
  .px-phone-contact-dialog__direct {
    min-height: 78px;
    padding: 9px;
    grid-template-columns: 40px minmax(0,1fr);
    gap: 8px;
  }
  .px-phone-contact-dialog__direct > :is(b,i) { position: absolute; top: 6px; inset-inline-start: 6px; }
  .px-phone-contact-dialog__direct-icon { width: 40px; height: 40px; border-radius: 12px; }
  .px-phone-contact-dialog__direct-icon .px-contact-brand-icon,
  .px-phone-contact-dialog__direct-icon > .px-icon { width: 20px; height: 20px; }
  .px-phone-contact-dialog__direct strong { font-size: 10px; }
  .px-phone-contact-dialog__direct small { font-size: 6.6px; }

  /* Nine social platforms stay in a stable 3 × 3 grid on phone. */
  .px-phone-contact-dialog__social-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; }
  .px-phone-contact-dialog__social {
    min-height: 82px;
    padding: 7px 4px 6px;
    gap: 4px;
    border-radius: 16px;
  }
  .px-phone-contact-dialog__social-mark { min-height: 42px; gap: 0; }
  .px-phone-contact-dialog__social-icon { width: 40px; height: 40px; flex-basis: 40px; border-radius: 11px; }
  .px-phone-contact-dialog__social-icon .px-contact-brand-icon { width: 23px; height: 23px; }
  .px-phone-contact-dialog__social strong { font-size: 8.3px; }
  .px-phone-contact-dialog__social-status { top:6px; left:6px; min-height:16px; padding-inline:4px; font-size:7px; }

  .px-phone-contact-dialog__services { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .px-phone-contact-dialog__service:first-child { grid-column: 1 / -1; }
  .px-phone-contact-dialog__service {
    min-height: 72px;
    padding: 9px;
    grid-template-columns: 40px minmax(0,1fr);
    gap: 8px;
  }
  .px-phone-contact-dialog__service > :is(b,i) { position: absolute; top: 6px; inset-inline-start: 6px; }
  .px-phone-contact-dialog__service-icon { width: 40px; height: 40px; border-radius: 12px; }
  .px-phone-contact-dialog__service-icon .px-contact-brand-icon { width: 20px; height: 20px; }
  .px-phone-contact-dialog__service.is-mostaql,
  .px-phone-contact-dialog__service.is-khamsat { grid-template-columns: 54px minmax(0,1fr); }
  .px-phone-contact-dialog__service.is-mostaql .px-phone-contact-dialog__service-icon,
  .px-phone-contact-dialog__service.is-khamsat .px-phone-contact-dialog__service-icon { width: 54px; height: 40px; }
  .px-contact-wordmark--mostaql { max-width: 45px; }
  .px-contact-wordmark--khamsat { max-width: 47px; }
  .px-phone-contact-dialog__service strong { font-size: 9.6px; }
  .px-phone-contact-dialog__service small { font-size: 6.4px; }
}

@media (max-width:390px) {
  .px-phone-contact-dialog__sheet { padding-inline: 10px; }
  .px-phone-contact-dialog__title-line h2 { font-size: 22px; }
  .px-phone-contact-dialog__title-icon { width: 34px; height: 34px; flex-basis: 34px; }
  .px-phone-contact-dialog__head > button { width: 36px; height: 36px; min-width: 36px; }
  .px-phone-contact-dialog__direct { min-height: 74px; grid-template-columns: 37px minmax(0,1fr); }
  .px-phone-contact-dialog__direct-icon { width: 37px; height: 37px; }
  .px-phone-contact-dialog__social-grid { gap: 6px; }
  .px-phone-contact-dialog__social { min-height: 80px; }
  .px-phone-contact-dialog__social-mark { min-height: 40px; gap: 0; }
  .px-phone-contact-dialog__social-icon { width: 38px; height: 38px; flex-basis: 38px; }
  .px-phone-contact-dialog__social-icon .px-contact-brand-icon { width: 22px; height: 22px; }
  .px-phone-contact-dialog__social strong { font-size: 7.9px; }
  .px-phone-contact-dialog__service { min-height: 68px; }
  .px-phone-contact-dialog__direct small,
  .px-phone-contact-dialog__service small { font-size: 6px; }
}

@media (prefers-reduced-motion:reduce) {
  .px-phone-contact-dialog :is(a,button) { transition: none !important; }
}


/* RC10 light-mode polish retained; social sizing is owned by the canonical
   social-platform rules above and the phone owner below. */
.px-phone-contact-dialog__social-icon {
  width: 46px !important;
  height: 46px !important;
  flex-basis: 46px;
  border-radius: 13px !important;
}
.px-phone-contact-dialog__social-icon .px-contact-brand-icon {
  width: 26px !important;
  height: 26px !important;
}
.px-phone-contact-dialog__direct-icon,
.px-phone-contact-dialog__service-icon {
  width: 38px;
  height: 38px;
  border-radius: 11px;
}
.px-phone-contact-dialog__direct-icon .px-contact-brand-icon,
.px-phone-contact-dialog__direct-icon > .px-icon,
.px-phone-contact-dialog__service-icon .px-contact-brand-icon,
.px-phone-contact-dialog__service-icon > .px-icon {
  width: 18px !important;
  height: 18px !important;
}
.px-phone-contact-dialog__service.is-design_whatsapp .px-contact-brand-icon {
  width: 18px !important;
  height: 18px !important;
  filter: none;
}
.px-phone-contact-dialog__service.is-mostaql .px-phone-contact-dialog__service-icon,
.px-phone-contact-dialog__service.is-khamsat .px-phone-contact-dialog__service-icon {
  width: 54px;
  height: 36px;
  border-radius: 10px;
}
.px-phone-contact-dialog__service.is-mostaql,
.px-phone-contact-dialog__service.is-khamsat {
  grid-template-columns: 54px minmax(0,1fr) auto;
}
.px-contact-wordmark--mostaql { max-width: 43px; max-height: 18px; }
.px-contact-wordmark--khamsat { max-width: 45px; max-height: 18px; }

html[data-theme="light"] .px-phone-contact-dialog {
  --px-contact-bg:#fbfcff;
  --px-contact-bg-2:#f4f7fb;
  --px-contact-card:rgba(255,255,255,.88);
  --px-contact-card-hover:#fff;
  --px-contact-line:rgba(89,108,145,.105);
  --px-contact-line-strong:rgba(79,101,143,.15);
  --px-contact-text:#172238;
  --px-contact-muted:#728099;
  --px-contact-shadow:0 28px 76px rgba(56,74,110,.17);
}
html[data-theme="light"] .px-phone-contact-dialog__sheet {
  background:
    radial-gradient(circle at 86% -8%, rgba(111,88,235,.055), transparent 31%),
    radial-gradient(circle at 10% 108%, rgba(48,125,239,.035), transparent 30%),
    linear-gradient(145deg,var(--px-global-page-glass-strong-a,rgba(255,255,255,.84)),var(--px-global-page-glass-strong-b,rgba(246,250,255,.74)));
}
html[data-theme="light"] :is(.px-phone-contact-dialog__direct,.px-phone-contact-dialog__service,.px-phone-contact-dialog__social) {
  background:rgba(255,255,255,.88);
  border-color:rgba(84,105,145,.105);
  box-shadow:0 8px 22px rgba(65,85,125,.055), inset 0 1px 0 rgba(255,255,255,.98);
}
html[data-theme="light"] .px-phone-contact-dialog__social-icon {
  box-shadow:0 6px 14px rgba(55,73,110,.10), inset 0 1px 0 rgba(255,255,255,.18);
}
@media (max-width:760px) {
  .px-phone-contact-dialog__social { min-height:82px !important; gap:4px; }
  .px-phone-contact-dialog__social-mark { min-height:42px; gap:0; }
  .px-phone-contact-dialog__social-icon { width:40px !important; height:40px !important; flex-basis:40px; border-radius:11px !important; }
  .px-phone-contact-dialog__social-icon .px-contact-brand-icon { width:23px !important; height:23px !important; }
  .px-phone-contact-dialog__direct-icon, .px-phone-contact-dialog__service-icon { width:36px; height:36px; border-radius:10px; }
  .px-phone-contact-dialog__direct-icon .px-contact-brand-icon,
  .px-phone-contact-dialog__direct-icon > .px-icon,
  .px-phone-contact-dialog__service-icon .px-contact-brand-icon,
  .px-phone-contact-dialog__service-icon > .px-icon { width:17px !important; height:17px !important; }
  .px-phone-contact-dialog__service.is-mostaql .px-phone-contact-dialog__service-icon,
  .px-phone-contact-dialog__service.is-khamsat .px-phone-contact-dialog__service-icon { width:50px; height:34px; }
  .px-phone-contact-dialog__service.is-mostaql, .px-phone-contact-dialog__service.is-khamsat { grid-template-columns:50px minmax(0,1fr); }
  .px-contact-wordmark--mostaql { max-width:40px; max-height:17px; }
  .px-contact-wordmark--khamsat { max-width:42px; max-height:17px; }
}


/* RC11 — internal Request Design service: clear destination, premium studio icon. */
.px-phone-contact-dialog__service.is-design_whatsapp {
  min-height: 78px;
  border-color: color-mix(in srgb,var(--px-contact-brand) 24%,var(--px-contact-line));
  background:
    radial-gradient(circle at 92% 10%, rgba(116,91,244,.10), transparent 32%),
    linear-gradient(135deg, rgba(58,119,246,.055), rgba(123,77,255,.05) 55%, rgba(255,255,255,.018));
}
.px-phone-contact-dialog__service.is-design_whatsapp .px-phone-contact-dialog__service-icon {
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 13px;
  background: linear-gradient(135deg,#2f7df4 0%,#6b59ef 58%,#9b50df 100%);
  box-shadow: 0 10px 24px rgba(82,72,219,.19), inset 0 1px 0 rgba(255,255,255,.24);
}
.px-phone-contact-dialog__service.is-design_whatsapp .px-contact-brand-icon {
  width: 19px !important;
  height: 19px !important;
  filter: none !important;
}
.px-phone-contact-dialog__service.is-design_whatsapp strong {
  font-size: 10.2px;
  font-weight: 900;
}
.px-phone-contact-dialog__service.is-design_whatsapp small {
  max-width: 270px;
  font-size: 7.2px;
  line-height: 1.5;
}
html[data-theme="light"] .px-phone-contact-dialog__service.is-design_whatsapp {
  border-color: rgba(95,103,206,.15);
  background:
    radial-gradient(circle at 92% 8%, rgba(112,88,235,.075), transparent 34%),
    linear-gradient(135deg,#f7f9ff 0%,#ffffff 52%,#faf8ff 100%);
  box-shadow: 0 11px 26px rgba(75,87,133,.075), inset 0 1px 0 #fff;
}
@media (hover:hover) and (pointer:fine) {
  a.px-phone-contact-dialog__service.is-design_whatsapp:hover,
  a.px-phone-contact-dialog__service.is-design_whatsapp:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(111,91,235,.28);
    box-shadow: 0 15px 34px rgba(71,82,135,.11), 0 0 22px rgba(105,88,237,.07), inset 0 1px 0 rgba(255,255,255,.95);
  }
}
@media (max-width:760px) {
  .px-phone-contact-dialog__service.is-design_whatsapp {
    min-height: 76px;
    grid-template-columns: 40px minmax(0,1fr);
  }
  .px-phone-contact-dialog__service.is-design_whatsapp .px-phone-contact-dialog__service-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
  }
  .px-phone-contact-dialog__service.is-design_whatsapp .px-contact-brand-icon {
    width: 18px !important;
    height: 18px !important;
  }
  .px-phone-contact-dialog__service.is-design_whatsapp strong { font-size: 10px; }
  .px-phone-contact-dialog__service.is-design_whatsapp small { font-size: 6.6px; }
}

/* ========================================================================
   PromXAI Theme 2.0.0-RC17 — Premium Contact Motion
   Clearer branded motion, still scoped ONLY to the shared Contact dialog.
   ======================================================================== */
@keyframes pxContactClusterA {
  0%,100% { transform: translate3d(0,0,0) rotate(-4deg) scale(1); }
  35% { transform: translate3d(-18px,15px,0) rotate(3deg) scale(1.05); }
  70% { transform: translate3d(10px,5px,0) rotate(-1deg) scale(.98); }
}
@keyframes pxContactClusterB {
  0%,100% { transform: translate3d(0,0,0) rotate(3deg) scale(1); }
  40% { transform: translate3d(18px,-15px,0) rotate(-4deg) scale(1.06); }
  75% { transform: translate3d(-8px,-4px,0) rotate(2deg) scale(.99); }
}
@keyframes pxContactGlowPulse {
  0%,100% { box-shadow:0 10px 24px rgba(75,82,225,.18),0 0 0 rgba(107,84,255,0); }
  50% { box-shadow:0 12px 30px rgba(75,82,225,.24),0 0 24px rgba(118,88,255,.20); }
}
@keyframes pxContactCardSheen {
  0% { transform:translateX(-150%); opacity:0; }
  20% { opacity:.9; }
  100% { transform:translateX(150%); opacity:0; }
}
@keyframes pxContactTitleGlow {
  0%,100% { filter:drop-shadow(0 0 0 rgba(109,89,255,0)); transform:translateY(0); }
  50% { filter:drop-shadow(0 0 9px rgba(109,89,255,.38)); transform:translateY(-1px); }
}

.px-phone-contact-dialog__sheet {
  position:relative;
  isolation:isolate;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}

/* Two visible branded orb clusters. They have defined edges instead of an
   indistinct fog so the motion reads clearly on both light and dark themes. */
.px-phone-contact-dialog__sheet::before,
.px-phone-contact-dialog__sheet::after {
  content:"";
  position:absolute;
  z-index:0;
  border-radius:46% 54% 50% 50%;
  pointer-events:none;
  will-change:transform;
}
.px-phone-contact-dialog__sheet::before {
  width:300px;
  height:230px;
  inset:-84px -76px auto auto;
  background:
    radial-gradient(circle at 20% 46%, rgba(59,164,255,.56) 0 8%, rgba(59,164,255,.22) 9% 15%, transparent 17%),
    radial-gradient(circle at 38% 36%, rgba(104,89,255,.54) 0 11%, rgba(104,89,255,.18) 12% 20%, transparent 22%),
    radial-gradient(circle at 58% 52%, rgba(180,77,244,.48) 0 10%, rgba(180,77,244,.16) 11% 19%, transparent 21%),
    radial-gradient(circle at 74% 32%, rgba(82,134,255,.40) 0 7%, transparent 15%),
    radial-gradient(circle at 51% 51%, rgba(95,92,255,.13), transparent 60%);
  filter:blur(2.8px);
  opacity:.82;
  animation:pxContactClusterA 9.5s ease-in-out infinite;
}
.px-phone-contact-dialog__sheet::after {
  width:270px;
  height:210px;
  inset:auto auto -78px -82px;
  background:
    radial-gradient(circle at 28% 44%, rgba(194,73,239,.50) 0 9%, rgba(194,73,239,.18) 10% 17%, transparent 19%),
    radial-gradient(circle at 48% 60%, rgba(71,151,255,.48) 0 11%, rgba(71,151,255,.16) 12% 20%, transparent 22%),
    radial-gradient(circle at 68% 38%, rgba(128,86,255,.42) 0 8%, transparent 17%),
    radial-gradient(circle at 51% 50%, rgba(143,80,247,.12), transparent 62%);
  filter:blur(3.2px);
  opacity:.72;
  animation:pxContactClusterB 11.5s ease-in-out infinite;
}

.px-phone-contact-dialog__grab,
.px-phone-contact-dialog__head,
.px-phone-contact-dialog__content { position:relative; z-index:1; }

/* Make the header feel alive without moving the text itself. */
.px-phone-contact-dialog__title-icon {
  animation:pxContactGlowPulse 4.2s ease-in-out infinite;
}
.px-phone-contact-dialog__brand {
  position:relative;
  overflow:hidden;
}
.px-phone-contact-dialog__brand::after {
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  background:linear-gradient(110deg,transparent 10%,rgba(255,255,255,.30) 48%,transparent 86%);
  transform:translateX(-145%);
  animation:pxContactCardSheen 5.5s ease-in-out infinite;
  pointer-events:none;
}

/* Cards stay still by default; their light reacts on hover/focus. */
.px-phone-contact-dialog :is(.px-phone-contact-dialog__direct,.px-phone-contact-dialog__social,.px-phone-contact-dialog__service) {
  position:relative;
  overflow:hidden;
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease,background .22s ease;
}
.px-phone-contact-dialog :is(.px-phone-contact-dialog__direct,.px-phone-contact-dialog__social,.px-phone-contact-dialog__service)::after {
  content:"";
  position:absolute;
  z-index:0;
  inset:0;
  background:linear-gradient(112deg,transparent 0%,rgba(255,255,255,.16) 48%,transparent 100%);
  transform:translateX(-150%);
  pointer-events:none;
}
.px-phone-contact-dialog :is(.px-phone-contact-dialog__direct,.px-phone-contact-dialog__social,.px-phone-contact-dialog__service) > * {
  position:relative;
  z-index:1;
}

@media (hover:hover) and (pointer:fine) {
  .px-phone-contact-dialog :is(a.px-phone-contact-dialog__direct,a.px-phone-contact-dialog__social,a.px-phone-contact-dialog__service):hover,
  .px-phone-contact-dialog :is(a.px-phone-contact-dialog__direct,a.px-phone-contact-dialog__social,a.px-phone-contact-dialog__service):focus-visible {
    transform:translateY(-3px) scale(1.012);
    border-color:color-mix(in srgb,var(--px-contact-brand) 35%,var(--px-contact-line));
    box-shadow:0 18px 36px rgba(16,23,48,.18),0 0 22px rgba(100,88,255,.08);
  }
  .px-phone-contact-dialog :is(a.px-phone-contact-dialog__direct,a.px-phone-contact-dialog__social,a.px-phone-contact-dialog__service):hover::after,
  .px-phone-contact-dialog :is(a.px-phone-contact-dialog__direct,a.px-phone-contact-dialog__social,a.px-phone-contact-dialog__service):focus-visible::after {
    animation:pxContactCardSheen .95s ease;
  }
}

/* In light mode the clusters remain visible, but cleaner and less saturated. */
html[data-theme="light"] .px-phone-contact-dialog__sheet::before { opacity:.48; filter:blur(3.5px) saturate(.88); }
html[data-theme="light"] .px-phone-contact-dialog__sheet::after { opacity:.40; filter:blur(4px) saturate(.84); }
html[data-theme="light"] .px-phone-contact-dialog__title-icon { animation:pxContactTitleGlow 4.2s ease-in-out infinite; }

@media (max-width:760px) {
  .px-phone-contact-dialog__sheet::before {
    width:245px;
    height:190px;
    inset:-58px -88px auto auto;
    opacity:.74;
  }
  .px-phone-contact-dialog__sheet::after {
    width:220px;
    height:175px;
    inset:auto auto -55px -82px;
    opacity:.64;
  }
  html[data-theme="light"] .px-phone-contact-dialog__sheet::before { opacity:.43; }
  html[data-theme="light"] .px-phone-contact-dialog__sheet::after { opacity:.35; }
}

@media (prefers-reduced-motion:reduce) {
  .px-phone-contact-dialog__sheet::before,
  .px-phone-contact-dialog__sheet::after,
  .px-phone-contact-dialog__title-icon,
  .px-phone-contact-dialog__brand::after,
  .px-phone-contact-dialog :is(.px-phone-contact-dialog__direct,.px-phone-contact-dialog__social,.px-phone-contact-dialog__service)::after {
    animation:none !important;
  }
}

/* ========================================================================
   PromXAI Theme 2.0.0-RC18 — Contact Motion Plus
   Stronger identity motion for "Contact us" while staying premium.
   ======================================================================== */
@keyframes pxContactIconBob {
  0%,100% { transform: translateY(0) scale(1); }
  45% { transform: translateY(-4px) scale(1.03); }
  70% { transform: translateY(1px) scale(.99); }
}
@keyframes pxContactBadgeFloat {
  0%,100% { transform: translate3d(0,0,0); }
  50% { transform: translate3d(0,-2px,0); }
}
@keyframes pxContactHaloSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes pxContactSoftSweep {
  0%,100% { opacity:.46; transform: translate3d(0,0,0) scale(1); }
  50% { opacity:.68; transform: translate3d(-8px,4px,0) scale(1.05); }
}
@keyframes pxContactCardIdle {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

.px-phone-contact-dialog__title-icon {
  position: relative;
  isolation: isolate;
  animation: pxContactGlowPulse 4s ease-in-out infinite, pxContactIconBob 6.2s ease-in-out infinite;
}
.px-phone-contact-dialog__title-icon::before,
.px-phone-contact-dialog__title-icon::after {
  content:"";
  position:absolute;
  inset:-7px;
  border-radius:18px;
  border:1px solid rgba(136,145,255,.20);
  opacity:.65;
  pointer-events:none;
}
.px-phone-contact-dialog__title-icon::before {
  inset:-9px;
  border-radius:20px;
  border-color: rgba(83,182,255,.20);
  animation: pxContactHaloSpin 11s linear infinite;
}
.px-phone-contact-dialog__title-icon::after {
  inset:-14px;
  border-radius:24px;
  border-color: rgba(176,104,255,.14);
  animation: pxContactHaloSpin 16s linear infinite reverse;
}

.px-phone-contact-dialog__brand {
  animation: pxContactBadgeFloat 4.8s ease-in-out infinite;
}
.px-phone-contact-dialog__head-copy h2 {
  position: relative;
  z-index: 1;
  text-shadow: 0 0 0 rgba(0,0,0,0);
}
.px-phone-contact-dialog__head-copy h2::after {
  content:"";
  position:absolute;
  inset:auto -10px -8px 0;
  height:16px;
  border-radius:999px;
  background: radial-gradient(circle at 50% 50%, rgba(94,129,255,.22), transparent 68%);
  filter: blur(10px);
  opacity:.55;
  pointer-events:none;
  animation: pxContactSoftSweep 7.2s ease-in-out infinite;
}

/* test377 — Contact cards and their brand marks are intentionally stationary.
   Motion stays in the ambient clusters/title only, so the compact 3x3 grid
   reads as one fixed panel instead of nine independently bobbing tiles. */
.px-phone-contact-dialog__direct,
.px-phone-contact-dialog__social,
.px-phone-contact-dialog__service,
.px-phone-contact-dialog__direct-icon,
.px-phone-contact-dialog__service-icon,
.px-phone-contact-dialog__social-icon {
  animation: none !important;
}

.px-phone-contact-dialog__sheet::before { opacity:.88; filter:blur(2.6px) saturate(1.06); }
.px-phone-contact-dialog__sheet::after { opacity:.78; filter:blur(3px) saturate(1.05); }

html[data-theme="light"] .px-phone-contact-dialog__sheet::before { opacity:.52; }
html[data-theme="light"] .px-phone-contact-dialog__sheet::after { opacity:.43; }

@media (prefers-reduced-motion:reduce) {
  .px-phone-contact-dialog__title-icon,
  .px-phone-contact-dialog__title-icon::before,
  .px-phone-contact-dialog__title-icon::after,
  .px-phone-contact-dialog__brand,
  .px-phone-contact-dialog__head-copy h2::after,
  .px-phone-contact-dialog__direct,
  .px-phone-contact-dialog__social,
  .px-phone-contact-dialog__service,
  .px-phone-contact-dialog__direct-icon,
  .px-phone-contact-dialog__service-icon,
  .px-phone-contact-dialog__social-icon {
    animation: none !important;
  }
}


/* ========================================================================
   PromXAI Theme 2.0.0-RC62 — Contact viewport + scroll ownership hardening.
   Root fixes:
   1) the dialog owns vertical scrolling (RC17 had replaced it with hidden);
   2) JS locks/restores the document scroll position while the modal is open;
   3) phone cards keep the approved 2 / 3x3 / service layout so all channels
      are visible on normal phone heights, with internal scroll as a fallback.
   ======================================================================== */
html.px-contact-dialog-open,
body.px-contact-dialog-open {
  overscroll-behavior:none !important;
}
.px-phone-contact-dialog__sheet {
  overflow-x:hidden !important;
  overflow-y:auto !important;
  overscroll-behavior:contain !important;
  touch-action:pan-y;
}

/* test377 — desktop/laptop Contact dialog fits as one fixed panel. Phone keeps
   the internal-scroll fallback below for genuinely short mobile viewports. */
@media (min-width:900px) {
  .px-phone-contact-dialog[data-px-contact-dialog] {
    max-height:calc(100dvh - 24px);
  }
  .px-phone-contact-dialog[data-px-contact-dialog] .px-phone-contact-dialog__sheet {
    max-height:calc(100dvh - 24px);
    overflow-y:hidden !important;
    overscroll-behavior:none !important;
    touch-action:auto;
  }
}

@media (max-width:760px) {
  .px-phone-contact-dialog__sheet {
    max-height:96dvh;
    padding:7px 10px calc(10px + env(safe-area-inset-bottom,0px));
    border-radius:24px 24px 0 0;
  }
  .px-phone-contact-dialog__grab { width:34px;height:3px;margin-bottom:4px; }
  .px-phone-contact-dialog__head { min-height:54px;gap:7px;padding-bottom:7px; }
  .px-phone-contact-dialog__title-icon { width:32px;height:32px;flex-basis:32px;border-radius:10px; }
  .px-phone-contact-dialog__title-icon .px-icon { width:17px;height:17px; }
  .px-phone-contact-dialog__title-line h2 { font-size:22px; }
  .px-phone-contact-dialog__brand { min-height:18px;padding-inline:6px;font-size:7.5px; }
  .px-phone-contact-dialog__head p { margin-top:2px;margin-right:38px;font-size:8.6px;line-height:1.4; }
  html[data-ui-lang="en"] .px-phone-contact-dialog__head p { margin-right:0;margin-left:38px; }
  .px-phone-contact-dialog__head > button { width:33px;height:33px;min-width:33px;border-radius:11px; }
  .px-phone-contact-dialog__head > button .px-icon { width:16px;height:16px; }
  .px-phone-contact-dialog__content { gap:8px;padding-top:7px; }
  .px-phone-contact-dialog__section-title { margin:0 3px 4px; }
  .px-phone-contact-dialog__section-title strong { font-size:10px; }

  .px-phone-contact-dialog__direct-grid { gap:6px; }
  .px-phone-contact-dialog__direct {
    min-height:58px;
    padding:7px;
    grid-template-columns:32px minmax(0,1fr);
    gap:6px;
    border-radius:14px;
  }
  .px-phone-contact-dialog__direct-icon { width:32px;height:32px;border-radius:9px; }
  .px-phone-contact-dialog__direct-icon .px-contact-brand-icon,
  .px-phone-contact-dialog__direct-icon > .px-icon { width:16px !important;height:16px !important; }
  .px-phone-contact-dialog__direct strong { font-size:9.4px; }
  .px-phone-contact-dialog__direct small { margin-top:2px;font-size:8px;line-height:1.32; }
  .px-phone-contact-dialog__direct > :is(b,i) { position:absolute;top:4px;right:4px;left:auto; }
  .px-phone-contact-dialog__direct b { min-height:15px;padding:0 4px;font-size:7px; }
  .px-phone-contact-dialog__direct i { width:17px;height:17px; }

  .px-phone-contact-dialog__social-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:6px;
  }
  .px-phone-contact-dialog__social {
    min-height:82px !important;
    padding:7px 4px 6px;
    gap:4px !important;
    border-radius:15px;
  }
  .px-phone-contact-dialog__social-mark { min-height:42px; gap:0; }
  .px-phone-contact-dialog__social-icon { width:40px !important;height:40px !important;flex-basis:40px;border-radius:11px !important; }
  .px-phone-contact-dialog__social-icon .px-contact-brand-icon { width:23px !important;height:23px !important; }
  .px-phone-contact-dialog__social strong { font-size:8.8px;line-height:1.1; }
  .px-phone-contact-dialog__social-status {
    position:absolute;
    top:6px;
    left:6px;
    min-height:16px;
    padding:0 4px;
    font-size:7px;
  }

  .px-phone-contact-dialog__services {
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:6px;
  }
  .px-phone-contact-dialog__service:first-child { grid-column:auto; }
  .px-phone-contact-dialog__service,
  .px-phone-contact-dialog__service.is-design_whatsapp,
  .px-phone-contact-dialog__service.is-mostaql,
  .px-phone-contact-dialog__service.is-khamsat {
    min-height:59px;
    padding:6px 3px 5px;
    border-radius:14px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    text-align:center;
  }
  .px-phone-contact-dialog__service-icon,
  .px-phone-contact-dialog__service.is-design_whatsapp .px-phone-contact-dialog__service-icon,
  .px-phone-contact-dialog__service.is-mostaql .px-phone-contact-dialog__service-icon,
  .px-phone-contact-dialog__service.is-khamsat .px-phone-contact-dialog__service-icon {
    width:31px;
    height:31px;
    border-radius:9px;
  }
  .px-phone-contact-dialog__service.is-mostaql .px-phone-contact-dialog__service-icon,
  .px-phone-contact-dialog__service.is-khamsat .px-phone-contact-dialog__service-icon { width:45px; }
  .px-phone-contact-dialog__service-icon .px-contact-brand-icon,
  .px-phone-contact-dialog__service-icon > .px-icon,
  .px-phone-contact-dialog__service.is-design_whatsapp .px-contact-brand-icon { width:15px !important;height:15px !important; }
  .px-contact-wordmark--mostaql { max-width:37px;max-height:14px; }
  .px-contact-wordmark--khamsat { max-width:39px;max-height:14px; }
  .px-phone-contact-dialog__service strong,
  .px-phone-contact-dialog__service.is-design_whatsapp strong { font-size:8.2px;line-height:1.1; }
  .px-phone-contact-dialog__service small,
  .px-phone-contact-dialog__service.is-design_whatsapp small { display:none; }
  .px-phone-contact-dialog__service > :is(b,i) { position:absolute;top:4px;right:4px;left:auto; }
  .px-phone-contact-dialog__service b { min-height:14px;padding:0 3px;font-size:6.8px; }
  .px-phone-contact-dialog__service i { display:none; }

  /* Keep motion in the branded header/orbs, not in every compact card. */
  .px-phone-contact-dialog__direct,
  .px-phone-contact-dialog__social,
  .px-phone-contact-dialog__service { animation:none !important; }
}


/* ========================================================================
   PromXAI Theme 2.0.0-RC67 — compact complete contact layout.
   The modal remains fixed while the document is scroll-locked. On phones the
   content decides the sheet height (capped by the viewport), eliminating the
   artificial empty lower area. Social cards are a stable 3 × 3 grid; Request Design is
   a full-width service row followed by Mostaql and Khamsat. No lateral sheet
   movement is used.
   ======================================================================== */
@media (max-width:760px) {
  .px-phone-contact-dialog {
    max-height:92dvh;
  }
  .px-phone-contact-dialog__sheet {
    height:auto !important;
    min-height:0 !important;
    max-height:92dvh !important;
    padding:9px 11px calc(11px + env(safe-area-inset-bottom,0px));
    overflow-x:hidden !important;
    overflow-y:auto !important;
    animation:none !important;
    transform:none !important;
  }
  .px-phone-contact-dialog[open] .px-phone-contact-dialog__sheet,
  html[data-ui-lang="en"] .px-phone-contact-dialog[open] .px-phone-contact-dialog__sheet {
    animation:none !important;
    transform:none !important;
  }

  .px-phone-contact-dialog__social-grid {
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:6px;
  }
  .px-phone-contact-dialog__social {
    grid-column:auto;
    min-height:82px !important;
  }

  .px-phone-contact-dialog__services {
    grid-template-columns:repeat(6,minmax(0,1fr)) !important;
    gap:6px;
  }
  .px-phone-contact-dialog__service,
  .px-phone-contact-dialog__service.is-design_whatsapp,
  .px-phone-contact-dialog__service.is-mostaql,
  .px-phone-contact-dialog__service.is-khamsat {
    grid-column:span 3;
    min-height:60px;
  }
  .px-phone-contact-dialog__service.is-design_whatsapp {
    grid-column:1 / -1 !important;
    min-height:64px;
    display:grid;
    grid-template-columns:40px minmax(0,1fr);
    justify-content:stretch;
    text-align:start;
    padding:8px 10px;
    gap:8px;
  }
  .px-phone-contact-dialog__service.is-design_whatsapp > span:nth-child(2) {
    text-align:start;
  }
}