.f-contact-grid {
  @apply mx-auto grid max-w-7xl gap-10;
  @apply md:grid-cols-2;
  @apply items-start;
}

.f-contact-item {
  h3,
  h4 {
    @apply m-0 text-2xl font-semibold text-[--f-contact-item-text];
  }

  p:first-of-type {
    @apply py-3 text-3xl;
  }
}

.f-contact-form {
  @apply space-y-1;

  .f-contact-form-inner {
    @apply grid grid-cols-2;
  }

  .f-rodo {
    @apply flex items-start gap-3 text-lg text-[--f-text];

    input {
      @apply mt-2 h-4 w-4;
    }
  }
}

.f-contact-map {
  @apply mx-auto mt-6 w-full max-w-7xl;
}

.f-toast {
  @apply fixed left-1/2 z-[999999] pointer-events-none;
  top: calc(var(--nav-height, 80px) + 20px);
  @apply -translate-x-1/2 -translate-y-3 opacity-0 transition-all duration-300 ease-out;
}

.f-toast.visible {
  @apply translate-y-0 opacity-100;
}

.f-toast-msg {
  @apply rounded-xl bg-[--f-background-toast] px-5 py-3 text-lg text-[--f-text] shadow-lg;
}

.f-toast-msg.success {
  @apply bg-green-900 text-white;
}

.f-toast-msg.error {
  @apply bg-red-500 text-white;
}