@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .btn {
    @apply relative inline-flex items-center justify-center gap-2 rounded px-8 py-3 font-sans transition-shadow duration-500 disabled:pointer-events-none disabled:opacity-50 last:px-4;
  }

  /* Webshop-specific button styles */
  .btn-sinatec-orange {
    @apply btn text-white bg-sinatec-orange hover:brightness-110 cursor-pointer;
  }

  .btn-sinatec-transparent {
    @apply btn shadow-transparent border-2 border-white bg-transparent text-sinatec-primary hover:underline;
  }

  .navigation-right-link {
    @apply relative inline-flex items-center justify-center gap-2 rounded py-3 font-sans shadow-transparent transition-shadow duration-500 disabled:pointer-events-none disabled:opacity-50 border-2 border-white bg-transparent text-sinatec-primary hover:underline px-3.5;
  }

  .btn-sinatec-primary {
    @apply btn bg-sinatec-primary-lighter text-white hover:brightness-110;
  }

  .btn-sinatec-ghost-white {
    @apply btn border-2 border-white bg-transparent text-white hover:underline;
  }

  .btn-sinatec-dark {
    @apply py-3 px-6 rounded-lg text-white font-medium transition-all duration-200;
    background: linear-gradient(to bottom, #525252, #333333);
  }

  .btn-sinatec-dark:hover {
    background: linear-gradient(to bottom, #444444, #222222);
  }

  .hide-number-spinner {
    -moz-appearance: textfield;
  }

  .hide-number-spinner::-webkit-outer-spin-button,
  .hide-number-spinner::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  /* Input field styles */
  .input-sinatec {
    @apply w-full px-4 py-3 border border-slate-300 text-webshop-black text-[1rem] leading-[1.5rem] tracking-[-.3px] font-normal rounded-lg focus:outline-none focus:ring-2 focus:border-transparent appearance-none bg-none;
    -webkit-appearance: none;
    -moz-appearance: none;
  }

  .input-sinatec:disabled {
    @apply border-slate-200 bg-slate-50 cursor-not-allowed text-slate-400
  }

  .input-sinatec:focus {
    @apply ring-sinatec-orange;
  }

  .input-sinatec::placeholder {
    color: #AAAAAA;
  }

  .label-sinatec {
    @apply mb-1.5 block text-[1rem] leading-[1.5rem] tracking-[-.3px] font-medium text-sinatec-primary;
  }

  .label-sinatec-error {
    @apply mb-1.5 block text-[1rem] leading-[1.5rem] tracking-[-.3px] font-medium text-webshop-error;
  }

  /* Link styles */
  .link-sinatec {
    @apply text-sinatec-link-blue hover:underline;
  }

  /* Checkmark list — used with Prepr BlockText when checkmark_lists is true */
  .checkmark-list ul {
    @apply list-none pl-0 space-y-3;
  }

  .checkmark-list li {
    @apply flex items-start gap-3;
  }

  .checkmark-list li::before {
    content: '';
    @apply block w-5 h-5 flex-shrink-0 mt-0.5;
    background-color: theme('colors.sinatec.orange');
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z' clip-rule='evenodd'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-size: contain;
  }

  /* Card/Border styles */
  .card-sinatec {
    @apply border rounded-lg;
    border-color: #AAAAAA;
  }
}