/**
 * different styles can be found at https://tailwindcss-forms.vercel.app/
 **/
.form-input,
form .input-light,
form .input,
.form-email,
.form-select,
.form-multiselect,
.form-textarea,
input[type=text],
input[type=textarea],
input[type=number]
 {
    @apply border border-gray-200 rounded-md min-h-a11y text-gray;

    &:focus {
        @apply border-primary-lighter ring ring-primary ring-opacity-50;
    }
}
.label{
    @apply text-gray
}

.form-checkbox,
input.checkbox,
.amgdpr-consent-checkbox{
    display: none;
}

.form-checkbox + label,
input.form-checkbox + label,
.amgdpr-consent-checkbox+label{
    display: flex;
    align-items: center;
    cursor: pointer;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.form-checkbox + label::before,
input.form-checkbox + label::before,
.amgdpr-consent-checkbox+label::before{
    content: '';
    display: inline-block;
    background-color: #fff; /* Tło */
    transition: background-color 0.1s ease, border-color 0.1s ease;
    @apply border border-gray-200 rounded-sm w-4 h-4
}


/* Dodanie znacznika (np. SVG) przy zaznaczeniu */
.form-checkbox:checked + label::before,
input.form-checkbox:checked + label::before,
.amgdpr-consent-checkbox:checked + label::before {
    content: url("data:image/svg+xml,%3Csvg width='14' height='10' viewBox='0 0 14 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M13.7243 0.264031C14.0901 0.617814 14.0921 1.19341 13.7289 1.54967L5.38726 9.73149C5.21204 9.90335 4.97366 10 4.725 10C4.47634 10 4.23796 9.90335 4.06274 9.73149L0.271072 6.01248C-0.0921456 5.65622 -0.0900866 5.08062 0.275671 4.72684C0.641428 4.37306 1.23238 4.37506 1.5956 4.73132L4.725 7.80076L12.4044 0.26851C12.7676 -0.0877467 13.3586 -0.0897522 13.7243 0.264031Z' fill='%23D73721'/%3E%3C/svg%3E%0A");
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    @apply text-giftdesign;
}

/* Ukrycie domyślnego checkboxa */
.checkoutCheckbox .renderer-checkbox {
    display: none;
}

/* Stylowanie kontenera checkboxa */
.checkoutCheckbox .flex .h-5 {
    position: relative;
    width: 1rem;
    height: 1rem;
}

/* Stworzenie własnego checkboxa */
.checkoutCheckbox .flex .h-5::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 1rem;
    height: 1rem;
    background-color: #fff;
    transition: background-color 0.1s ease, border-color 0.1s ease;
    @apply border border-gray-200 rounded-sm;
}

/* Styl dla zaznaczonego checkboxa */
.checkoutCheckbox .renderer-checkbox:checked ~ .h-5::before {
    content: url("data:image/svg+xml,%3Csvg width='14' height='10' viewBox='0 0 14 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M13.7243 0.264031C14.0901 0.617814 14.0921 1.19341 13.7289 1.54967L5.38726 9.73149C5.21204 9.90335 4.97366 10 4.725 10C4.47634 10 4.23796 9.90335 4.06274 9.73149L0.271072 6.01248C-0.0921456 5.65622 -0.0900866 5.08062 0.275671 4.72684C0.641428 4.37306 1.23238 4.37506 1.5956 4.73132L4.725 7.80076L12.4044 0.26851C12.7676 -0.0877467 13.3586 -0.0897522 13.7243 0.264031Z' fill='%23D73721'/%3E%3C/svg%3E%0A");
    display: flex;
    align-items: center;
    justify-content: center;
    @apply text-giftdesign;
}

label a{
    @apply text-giftdesign;
}

.submit,
.submit.action,
.primary>button.submit.action{
    transition: background-color 0.1s ease, color 0.1s ease;
    @apply !text-gray-darker hover:!text-white;
    @apply bg-giftdesign-lighter rounded-md w-full text-lg font-medium mb-6 flex justify-center items-center shadow-none hover:bg-giftdesign ;
}


.submit span,
.submit.action span,
.primary>button.submit.action span{
    @apply m-auto
}


.submit.btn-primary{
    @apply bg-giftdesign text-white
}