@tailwind base;

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

.f-contact-col-1 {

  h1,
  h2,
  h3,
  h4 {
    @apply f-section-header;
  }
}

.f-contact-col-2 {
  @apply bg-[var(--f-background)] text-[var(--f-text)];

  h1,
  h2,
  h3,
  h4 {
    @apply f-section-header;
  }
}

.f-contact-item {
  @apply space-y-1;
  
  h1,
  h2,
  h3,
  h4 {
    @apply text-2xl font-semibold text-[var(--f-text)] m-0;
  }

  p {
    @apply text-xl mt-4 leading-relaxed text-[var(--f-text)];
  }

}

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

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

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

    a {
      @apply text-[var(--f-link-text)];
    }

    a:hover {
      @apply text-[var(--fuz-link-hover)];
    }

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

   button {
      @apply btn btn-outline w-full py-3 text-lg;
    }
}

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

.s-toast {
  @apply fixed top-5 left-1/2 z-[9999] pointer-events-none;
  @apply opacity-0 -translate-y-3 -translate-x-1/2 transition-all duration-300 ease-out;
}

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

.f-toast-msg {
  @apply px-5 py-3 rounded-xl shadow-lg text-sm;
  background: var(--fuz-accent);
  color: var(--fuz-accent-text);
}

.f-toast-msg.success {
  background: var(--fuz-accent);
}

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