/* The two extras under the dashed rule - transcription and the invitation
   mail - and the rule itself. Split out of meet-now.css to keep both files
   inside the 250-line limit; the dialog they sit in is next door.
*/

.meet-now-rule {
  height: 1px;
  background: repeating-linear-gradient(
    to right,
    var(--c-neutral-3) 0 4px,
    transparent 4px 8px
  );
}

.meet-now-extras-head {
  margin: 0;
  font: var(--t-body-small-500);
  color: var(--c-neutral-9);
}

.meet-now-extra {
  border: 1px solid var(--c-neutral-3);
  border-radius: 8px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  row-gap: 12px;
  transition: border-color var(--transition-default);
}

.meet-now-extra-taken {
  border-color: var(--c-neutral-7);
}

.meet-now-extra-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  column-gap: 16px;
}

.meet-now-extra-title {
  margin: 0 0 4px;
  font: var(--t-body-primary-400);
  color: var(--c-white);
}

.meet-now-extra-open {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  text-align: left;
  font: var(--t-body-primary-400);
  color: var(--c-blue-lighter);
  cursor: pointer;
}

/* Send and its explanation sit side by side: the sentence is about what the
   mail carries, not about the field above it. */
.meet-now-send-row {
  display: flex;
  align-items: center;
  column-gap: 16px;
}

.meet-now-send-row .button {
  height: 40px;
  padding: 0 20px;
  flex: none;
}

.meet-now-send-row .fine-print {
  margin: 0;
}

@media (max-width: 640px) {
  .meet-now-send-row {
    flex-direction: column;
    align-items: stretch;
    row-gap: 10px;
  }
}