@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=fallback');

@tailwind base;
@tailwind components;

h1 {
  @apply text-4xl font-extrabold tracking-tighter mb-2;
}

h2 {
  @apply text-3xl font-extrabold tracking-tighter mb-2;
}

h3 {
  @apply text-2xl font-extrabold mb-1;
}

h4 {
  @apply text-xl font-extrabold tracking-tight mb-1;
}

.error {
  @apply text-white bg-red-400 inline-block p-2 my-4 font-semibold text-sm;
}

.badge {
  @apply text-xs inline-flex font-medium rounded-full text-center px-2.5 py-1;
}

.btn,
.btn-lg,
.btn-sm,
.btn-xs {
  @apply font-medium text-sm inline-flex items-center justify-center border border-transparent rounded-full leading-5  transition duration-150 ease-in-out;
}

.btn-primary {
  @apply bg-blue-500 hover:bg-blue-700 border-blue-500 text-white hover:cursor-pointer;
}

.btn-secondary {
  @apply text-white bg-orange-500 border-orange-500 hover:bg-orange-700 hover:border-orange-700 hover:cursor-pointer;
}

.btn-third {
  @apply text-white bg-gray-400 border-gray-400 hover:bg-gray-500 hover:border-gray-500 hover:cursor-pointer;
}

.btn {
  @apply px-4 py-2;
}

.btn-lg {
  @apply px-5 py-3;
}

.btn-sm {
  @apply px-2 py-1 text-sm;
}

.btn-xs {
  @apply px-2 py-0.5 text-xs;
}

[type='number']:focus {
  @apply !outline-none border-transparent;
}

.form-input,
.form-textarea,
.form-multiselect,
.form-select,
.form-checkbox,
.form-radio {
  @apply text-sm text-slate-800 bg-white border;
}

.form-input,
.form-textarea,
.form-multiselect,
.form-select,
.form-checkbox {
  @apply rounded;
}

.form-input,
.form-textarea,
.form-multiselect,
.form-select {
  @apply leading-5 py-2 px-3 border-slate-200 hover:border-slate-300 focus:border-blue-300 shadow-sm;
}

.form-input,
.form-textarea {
  @apply placeholder-slate-400;
}

.form-select {
  @apply pr-10;
}

.form-checkbox,
.form-radio {
  @apply text-blue-500 border border-slate-300;
}

/* Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}

.form-input:focus,
.form-textarea:focus,
.form-multiselect:focus,
.form-select:focus,
.form-checkbox:focus,
.form-radio:focus {
  @apply ring-0;
}

.card {
  @apply p-6 bg-white rounded-lg border border-dark-blue-100 border-opacity-50;
}

.check {
  @apply invisible absolute right-2 top-2 rounded-full p-1 text-white font-bold bg-orange-500 border-orange-500;
}

.card-selectable input[type='checkbox']:checked + label,
.card-selectable input[type='radio']:checked + label {
  @apply shadow-md border-opacity-100 border-dark-blue-300;
}

.card-selectable input[type='checkbox']:checked + label .check,
.card-selectable input[type='radio']:checked + label .check {
  @apply visible;
}

.card-selectable input[type='checkbox']:checked + label .number-input,
.card-selectable input[type='radio']:checked + label .number-input {
  @apply visible;
}

.mailing-selectable input[type='radio'] + label {
  @apply btn text-white bg-opacity-90 bg-gray-400 border-gray-600 hover:bg-orange-700 hover:cursor-pointer;
}

.mailing-selectable input[type='radio']:checked + label {
  /* @apply bg-gray-50 font-medium text-gray-900 border-gray-900;
   */
  @apply btn text-white bg-orange-500 border-orange-500 hover:bg-orange-700 hover:border-orange-700 hover:cursor-pointer;
}
.mailing-selectable input[type='radio']:checked + label + .pic {
  @apply block;
}

.card-selectable label.selectable {
  @apply block card !p-0 max-w-2xl mx-auto mb-4 !border-2 hover:shadow-lg hover:border-opacity-100 hover:cursor-pointer ease-in-out duration-150 relative;
  /* hover:scale-[1.04] */
}

/* Amélioration de l'accessibilité pour les labels focusables */
.card-selectable label.selectable:focus {
  @apply outline-none ring-2 ring-orange-500 ring-offset-2;
}

.card-selectable label.selectable:focus-visible {
  @apply outline-none ring-2 ring-orange-500 ring-offset-2;
}

.card-selectable label.sold-out {
  @apply block card !p-0 max-w-2xl mx-auto mb-4 !border-2 relative;
  /* hover:scale-[1.04] */
}

input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.number-input input:focus {
  outline: none !important;
}

.number-input button:focus {
  outline: none !important;
}

/* .card-selectable .card {
  @apply !p-4;
} */

.backoffice .card a {
  @apply hover:underline;
}

.uploadcare--widget__button.uploadcare--widget__button_type_open {
  @apply btn btn-sm btn-secondary text-xs !py-1 !px-2 rounded !font-normal;
}
.uploadcare--widget__button.uploadcare--widget__button_type_remove {
  @apply hidden;
}
.uploadcare--button_primary {
  @apply btn-primary;
}

.label {
  @apply block text-sm font-medium;
}

.registration-submit-btn {
  @apply btn bg-dark-blue-400 text-white hover:cursor-pointer hover:bg-dark-blue-500 !py-4 !px-8 !mt-8;
}

@tailwind utilities;

@layer components {
  .body {
    @apply antialiased h-full bg-orange-100 bg-opacity-70 text-[#474755];
  }

  .backdrop {
    @apply fixed inset-0 bg-slate-900 bg-opacity-30 z-40 lg:hidden lg:z-auto transition-opacity duration-200 opacity-0 pointer-events-none;
  }

  .inner-main {
    @apply px-4 sm:px-6 lg:px-8 py-8 w-full max-w-7xl mx-auto;
  }

  .main-link {
    @apply btn bg-blue-500 hover:bg-blue-600 text-white hover:cursor-pointer;
  }

  .sidebar-li {
    @apply px-3 py-3 rounded-sm mb-0.5 last:mb-0;
  }

  .sidebar-li a {
    @apply block text-slate-200  truncate transition duration-150 hover:text-slate-200;
  }
}
/*


 */