/* TrustUs — the panel a Zoho form opens in -------------------------------------
   Pairs with inc/section-form-modal.php and assets/form-modal.js. */

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

.tu-fm {
  /* Wide and tall: the form inside is four sections long, and a small window
     over it turns every field into a scroll. */
  width: min(940px, calc(100vw - 32px));
  height: min(92vh, 1000px);
  max-width: none;
  max-height: none;
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: var(--r-surface);
  background: #fff;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(20, 18, 26, .3);
}
/* Only when it is open. A `display` on the element itself overrides the
   browser's own `dialog:not([open]) { display: none }`, and the closed panel
   then sat in the page — a red bar reading "قدّم طلبك" above the footer of
   every page on the site. */
.tu-fm[open] {
  display: flex;
  flex-direction: column;
}
.tu-fm::backdrop { background: rgba(20, 18, 26, .6); }
.tu-fm a { text-decoration: none; }
.tu-fm :focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* The brand bar. The form itself is Zoho's and cannot be restyled from here —
   this is the frame it sits in, and it is what says whose form this is. */
.tu-fm__bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px clamp(16px, 2vw, 22px);
  background: var(--red);
  color: #fff;
}
.tu-fm__title {
  margin: 0;
  font-size: clamp(16px, 1.5vw, 19px);
  font-weight: 800;
  line-height: 1.4;
}
.tu-fm__x {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 34px; height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  color: #fff;
  cursor: pointer;
  transition: background-color .2s ease;
}
.tu-fm__x:hover { background: rgba(255, 255, 255, .3); }

.tu-fm__body {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  background: var(--wash);
}
.tu-fm__wait {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-small);
}
.tu-fm__frame {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* A way out for anyone the frame fails for — a blocked third-party frame, or a
   browser that will not scroll it. */
.tu-fm__foot {
  flex: 0 0 auto;
  margin: 0;
  padding: 10px 16px;
  border-block-start: 1px solid var(--line);
  text-align: center;
}
.tu-fm__foot a {
  color: var(--muted);
  font-size: var(--fs-caption);
  font-weight: 700;
}
.tu-fm__foot a:hover { color: var(--red); }

@media (max-width: 620px) {
  /* The whole screen: at this width a panel with a margin is a form in a
     letterbox. */
  .tu-fm {
    width: 100vw;
    height: 100dvh;
    max-height: none;
    border-radius: 0;
  }
}