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

@layer base {
    /* -------------------------------- CSS Vars -------------------------------- */
    :root {
        --primary: 135, 0, 153;
        --primary-dark: 108, 0, 122;
        --secondary: 241, 223, 15;
        --dark: 77, 77, 110;
        --success: 34, 165, 115;
        --error: 239, 68, 68;
        --light: 239, 240, 247;
        --input-border: 142, 142, 165;
        --card-border: 224, 227, 238;
        --menuSize: 2px;
    }

    @font-face {
        font-family: 'Brandon';
        font-weight: 900;
        src: url('../fonts/Brandon_blk.otf');
    }
    @font-face {
        font-family: 'Brandon';
        font-weight: 700;
        src: url('../fonts/Brandon_bld.otf');
    }
    @font-face {
        font-family: 'Brandon';
        font-weight: 500;
        src: url('../fonts/Brandon_med.otf');
    }
    @font-face {
        font-family: 'Brandon';
        font-weight: 400;
        src: url('../fonts/Brandon_reg.otf');
    }
    @font-face {
        font-family: 'Brandon';
        font-weight: 400;
        font-style: italic;
        src: url('../fonts/Brandon_reg_it.otf');
    }
    /* TODO: is there a better way to add this? */
    /*button,*/
    /*textarea,*/
    /*input,*/
    /*select,*/
    /*a {*/
    /*    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);*/
    /*    -webkit-tap-highlight-color: transparent;*/
    /*    -webkit-user-select: none;*/
    /*    -khtml-user-select: none;*/
    /*    -moz-user-select: none;*/
    /*    -ms-user-select: none;*/
    /*    user-select: none;*/
    /*}*/

    body {
        @apply text-dark font-brandon text-base antialiased flex flex-col justify-center bg-light px-5 selection:bg-secondary min-h-screen justify-between;
    }


    body.debug header {
        @apply mt-7;
    }


    header:before,
    header:after {
        @apply absolute w-6 bg-primary h-[calc(100%_+_10px)] -left-6 bottom-0 content-[''] rounded-bl-lg ;
    }

    header:after {
        @apply left-auto -right-6 rounded-br-lg rounded-bl-none;
    }

    .scrolling header {
        @apply shadow-[0_0_10px_rgba(0,0,0,.5)] h-[60px] sm:h-[90px] transition-all;
    }

    .scrolling header svg {
        @apply w-[175px] sm:w-[224px] transition-all;
    }

    main {
        --y: 0px;
        --opacity: 1;
        @apply mt-[90px] opacity-100 flex flex-col gap-y-8;
    }

    main:before {
        @apply absolute -top-2 left-0 right-0 -z-10 content-[''] bg-main bg-no-repeat bg-bottom h-full w-full max-h-[275px] xl:bg-[size:85%] 2xl:bg-[size:75%];
        transform: translateY(var(--y));
        opacity: var(--opacity);
    }

    .intro {
        @apply border border-card-border flex w-full max-w-[640px] flex-col items-center justify-start gap-y-6 rounded-xl bg-white p-5 sm:p-7 shadow-md;
    }

    .steps {
        @apply md:p-12 lg:p-14 ;
    }

    .card {
        @apply border border-card-border bg-white rounded-xl bg-white p-4 sm:p-5 shadow-md;
    }

    article {
        @apply text-xl flex flex-col gap-y-3 leading-snug items-center;
    }

    h1 {
        @apply text-3xl font-black font-brandon w-full text-center leading-8;
    }

    h2 {
        @apply text-2xl font-bold font-brandon text-center leading-8;
    }

    h3 {
        @apply text-xl md:text-[1.375rem] font-bold leading-5;
    }

    form {
        @apply w-full flex flex-col gap-y-4;
    }

    menu a, menu button {
        @apply py-2 hover:text-secondary transition-colors;
    }

}

@layer components {
    /* ---------------------------------- Forms --------------------------------- */
    /* Form Group */
    .form-group {
        @apply flex flex-col items-start gap-1.5;
    }

    .form-group label {
        @apply text-xl font-bold tracking-[.01rem];
    }

    .form-group > p {
        @apply flex items-center gap-1.5;
    }

    /* Input Group */
    .input-group {
        @apply relative w-full;
    }

    .input-group svg {
        @apply absolute top-[calc(50%_-_12px)] right-3 z-10 hover:opacity-80 transition-opacity cursor-pointer;
    }

    input[type='text'],
    input[type='email'],
    input[type='password'],
    input[type='date'],
    select,
    textarea {
        @apply focus:bg-opacity-50 active:bg-opacity-50 border-input-border focus:outline-primary focus-visible:outline-primary focus-visible:outline focus-visible:outline-2 active:outline-primary placeholder:text-dark h-full min-h-[54px] w-full appearance-none rounded-md border bg-white px-4 text-lg font-medium outline outline-2 outline-offset-[-1px] outline-transparent transition-all [box-shadow:_0_-2px_2px_rgb(0_0_0_/_10%)_inset] placeholder:font-normal placeholder:tracking-[0.01rem] placeholder:text-opacity-70 focus:[box-shadow:_2px_2px_2px_rgb(0_0_0_/_10%)_inset] active:[box-shadow:_2px_2px_2px_rgb(0_0_0_/_10%)_inset] active:bg-light focus:bg-light;
    }

    /* Textarea */
    textarea {
        @apply py-3;
    }

    /* Select */
    select {
        @apply relative z-10 bg-transparent;
    }

    select:invalid {
        @apply text-dark font-normal tracking-[0.01rem] text-opacity-70;
    }

    .select-group {
        @apply relative w-full;
    }

    .select-group svg {
        @apply absolute top-[calc(50%_-_12px)] right-3;
    }

    /* Radio */
    .radio-group {
        @apply flex gap-1.5;
    }

    [type='radio']:checked,
    [type='radio']:not(:checked) {
        @apply absolute left-[-9999px];
    }

    [type='radio']:checked + label,
    [type='radio']:not(:checked) + label {
        @apply text-dark relative z-10 inline-flex h-10 w-16 cursor-pointer items-center justify-center text-base font-medium transition-all;
    }

    [type='radio']:checked + label {
        @apply font-bold text-white;
    }

    [type='radio']:checked + label:before,
    [type='radio']:not(:checked) + label:before {
        @apply border-input-border absolute top-0 left-0 z-[-1] h-10 w-16 rounded-md border-2 bg-white transition-all content-[''] [box-shadow:_0_-3px_2px_rgb(0_0_0_/_10%)_inset];
    }

    [type='radio']:checked + label:before {
        @apply bg-primary border border-[#6C007A] [box-shadow:_1px_2px_2px_rgb(0_0_0_/_20%)_inset];
    }

    /* Checkbox */
    .checkbox-group {
        @apply flex flex-col gap-2;
    }

    .checkbox-group p {
        @apply flex overflow-hidden;
    }

    .checkbox-group.card {
        @apply bg-light p-4 rounded-lg w-full border border-card-border;
    }

    .checkbox-group.card p {
        @apply bg-white p-3 rounded-md border border-card-border;
    }

    .checkbox-group.card > label {
        @apply text-lg font-bold tracking-[.02rem] mb-1.5 text-left;
    }

    [type='checkbox'] {
        @apply w-6 opacity-0 absolute z-10 h-6 cursor-pointer;
    }

    [type='checkbox'] + label {
        @apply relative inline-flex items-center gap-3 text-base font-medium leading-none;
    }

    [type='checkbox'] + label:before {
        @apply border-input-border h-6 w-6 rounded border bg-white p-1 content-[''] [box-shadow:_0_-3px_2px_rgb(0_0_0_/_10%)_inset];
    }

    [type='checkbox']:checked + label:before {
        @apply bg-success border-0  [box-shadow:_0_-3px_2px_rgb(0_0_0_/_10%)_inset,_0_0_2px_rgb(0_0_0_/_20%)];
    }

    [type='checkbox']:checked + label:after {
        @apply absolute left-[3px] top-[5px] inline-block h-3 w-2  border-white content-[''] border-r-[3px] border-b-[3px] mr-[15px] mb-[5px] ml-[5px] rotate-45;
    }

    /* Success */
    .form-group .success-icon {
        @apply text-success invisible opacity-0 transition-opacity;
    }

    .form-group.success .success-icon {
        @apply visible opacity-100;
    }

    .form-group.success input {
        @apply outline-success shadow-inner outline outline-2 outline-offset-[-1px] [box-shadow:_0_-2px_#22a573_inset];
    }

    /* Error */
    .form-group .error-msg {
        @apply text-error text-base font-medium tracking-[.0rem];
    }

    .form-group.error input {
        @apply outline-error text-error shadow-inner outline outline-2 outline-offset-[-1px] [box-shadow:_0_-2px_#ef4444_inset];
    }

    .form-group.error .error-msg {
        @apply block;
    }

    /* Multiple Selection */
    .multiple-group {
        @apply flex-col gap-x-4 tracking-normal justify-between border-input-border flex items-center w-full rounded-md border bg-white font-medium transition-all [box-shadow:_0_-3px_2px_rgb(0_0_0_/_10%)_inset] placeholder:font-normal placeholder:tracking-[0.01rem] placeholder:text-opacity-70 focus:[box-shadow:_0_-3px_2px_rgb(0_0_0_/_10%)_inset] active:[box-shadow:_0_-3px_2px_rgb(0_0_0_/_10%)_inset];
    }

    .multiple-group label {
        @apply leading-5 text-lg font-bold tracking-[.02rem] text-left py-3;
    }

    .multiple-group > div {
        @apply first-of-type:pr-2.5 gap-x-4 inline-flex items-center justify-between w-full px-4 min-h-[3.5rem] border-b border-input-border last-of-type:border-b-0;
    }

    .multiple-group svg {
        @apply hover:opacity-80 transition-opacity cursor-pointer;
    }

    /* --------------------------------- Buttons -------------------------------- */
    .btn {
        @apply overflow-hidden relative font-brandon inline-flex gap-x-2 h-14 w-full cursor-pointer items-center justify-center rounded-full text-xl font-bold tracking-wide antialiased transition-colors;
    }

    .btn:before {
        @apply content-[''] w-1 h-1 bg-white absolute top-1/2 left-1/2 rounded-full opacity-0 origin-center scale-[0.1] ;
    }

    /* Primary */
    .btn-primary {
        @apply bg-primary border-primary border border-opacity-10 text-white [box-shadow:_0_-3px_rgb(108_0_122)_inset,_0_2px_2px_rgb(255_255_255_/_15%)_inset] [text-shadow:_0_1px_0_rgb(0_0_0_/_20%)];
    }

    /*.btn-primary:focus, */
    /*.btn-primary:active,*/
    .btn-primary:hover {
        @apply [box-shadow:_0_-1px_rgb(135_0_153)_inset] [text-shadow:_none];
    }
    .btn:hover:before {
        animation: buttonPulse 0.5s ease-in-out forwards;
    }

    /* Border */
    .btn-border {
        @apply text-primary outline-primary border-primary border-2 bg-transparent outline outline-2 outline-offset-[-2px];
        transition: outline-width 150ms ease-in-out,
        outline-offset 150ms ease-in-out, outline-color 200ms ease-in-out,
        color 150ms ease-in-out;
    }
    .btn-border:before {
        @apply bg-primary bg-opacity-30;
    }

    /*.btn-border:hover {*/
    /*    @apply text-[#9F33AD] outline-4 outline-offset-[-4px] outline-[#9F33AD];*/
    /*}*/

    /* Secondary */
    .btn-secondary {
        @apply text-primary bg-secondary [box-shadow:_0_-3px_#CDBE0D_inset,_0_2px_2px_rgb(255_255_255_/_15%)_inset];
    }

    .btn-secondary:hover,
    .btn-secondary:active,
    .btn-secondary:focus {
        @apply bg-opacity-80 text-opacity-80 [box-shadow:_0_-1px_1px_#EBDA10_inset];
    }

    /* Back Button (Inverse of Primary) */
.btn-back {
    @apply bg-white text-primary border-primary border border-opacity-100 [box-shadow:_0_-3px_rgb(255_255_255)_inset,_0_2px_2px_rgb(108_0_122_/_15%)_inset] [text-shadow:_0_1px_0_rgb(255_255_255_/_40%)];
}

    /* Small */
    .btn-sm {
        @apply bg-primary h-9 w-auto rounded px-3 text-base font-medium text-white hover:bg-opacity-80;
    }

    .btn-sm.light {
        @apply text-primary bg-opacity-10 hover:bg-opacity-20;
    }

    /* Button Loaders */
    .btn.loading .btn-loader {
        @apply block;
    }

    .btn.loading .btn-text {
        @apply hidden;
    }

    .btn-loader {
        @apply relative h-2.5 w-2.5 rounded-full bg-primary [box-shadow:_20px_0_rgb(var(--primary)),_-20px_0_rgb(var(--primary))] hidden;
        animation: flash 0.8s ease-out infinite alternate;
    }

    /*[box-shadow:_20px_0_rgb(var(--primary)),_-20px_0_rgb(var(--primary))] */
    .btn-loader.white {
        @apply relative h-2.5 w-2.5 rounded-full bg-white [box-shadow:_20px_0_#fff,_-20px_0_#fff] hidden;
        animation: flash-white 0.8s ease-out infinite alternate;
    }

    /*[box-shadow:_20px_0_#fff, _-20px_0_#fff]*/
    /* ---------------------------------- Modal --------------------------------- */
    .modal {
        @apply invisible opacity-0 inset-x-0 inset-y-0 bg-primary-dark bg-opacity-95 fixed z-50 flex justify-center items-center p-14 transition-all duration-500;
    }

    .modal-inner {
        @apply p-12 flex flex-col items-center justify-center gap-4 rounded-lg bg-white shadow-lg w-full max-w-[500px] min-h-[6rem] text-primary text-xl font-bold;
    }

    .modal-open .modal {
        @apply opacity-100 visible;
    }

    .modal-open {
        @apply overflow-y-hidden;
    }

    .modal-inner .loader {
        @apply w-10 h-10 border-[5px] border-secondary border-b-primary rounded-full inline-block box-border;
        animation: rotation 1.2s linear infinite;
    }
    label#id_display_initials_only {
        @apply font-normal;
    }
}

@layer utilities {
    /* -------------------------------- Keyframes ------------------------------- */
    @keyframes rotation {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }

    @keyframes buttonPulse {
        0% {
            transform: scale(0.1);
            opacity: .4;
        }
        100% {
            transform: scale(200);
            opacity: .2;
        }
    }
    @keyframes clickPulse {
        0% {
            transform: scale(0.1);
            opacity: .6;
        }
        100% {
            transform: scale(25);
            opacity: 0.1;
        }
    }

    @keyframes flash {
        0% {
            background-color: rgba(var(--primary), 0.3);
            box-shadow: 20px 0 rgba(var(--primary), 0.3),
            -20px 0 rgba(var(--primary), 0.8);
        }
        50% {
            background-color: rgba(var(--primary), 0.8);
            box-shadow: 20px 0 rgba(var(--primary), 0.3),
            -20px 0 rgba(var(--primary), 0.3);
        }
        100% {
            background-color: rgba(var(--primary), 0.3);
            box-shadow: 20px 0 rgba(var(--primary), 0.8),
            -20px 0 rgba(var(--primary), 0.3);
        }
    }

    @keyframes flash-white {
        0% {
            background-color: #fff2;
            box-shadow: 20px 0 #fff2, -20px 0 #fff;
        }
        50% {
            background-color: #fff;
            box-shadow: 20px 0 #fff2, -20px 0 #fff2;
        }
        100% {
            background-color: #fff2;
            box-shadow: 20px 0 #fff, -20px 0 #fff2;
        }
    }
}

.flatpickr-calendar select {
    min-height: auto!important;
}


/* alpine js styles */
[x-cloak] {
    display: none !important;
}

/* Menu Styles */

.menu-trigger {
    @apply relative cursor-pointer;
    height: calc(var(--menuSize) * 10);
}

.menu-trigger:before {
    @apply content-[''] w-1 h-1 bg-white absolute top-1/2 left-1/2 -ml-1 -mt-1 rounded-full opacity-0 origin-center scale-[0.1] ;
}

.menu-trigger.clicked:before {
    animation: clickPulse 0.4s ease-in-out;
}

.menu-trigger > div {
    background: white;
    width: calc(var(--menuSize) * 12);
    height: var(--menuSize);
    position: relative;
    transition: background 10ms 250ms ease;
    transform: translateY(calc(var(--menuSize) * 4));
    border-radius: 1px;
}

.menu-trigger > div:before, .menu-trigger > div:after {
    transition: top 250ms 300ms ease,
    transform 250ms 50ms ease,
    height 50ms 250ms ease;
    position: absolute;
    background: white;
    width: calc(var(--menuSize) * 12);
    height: var(--menuSize);
    content: '';
    border-radius: 1px;
}

.menu-trigger > div:before {
    top: calc(var(--menuSize) * -4);
}

.menu-trigger > div:after {
    top: calc(var(--menuSize) * 4);
}

.menu-trigger.open > div {
    background: transparent;
}

.menu-trigger.open > div:after, .menu-trigger.open > div:before {
    transition: top 250ms 50ms ease,
    transform 250ms 300ms ease,
    height 100ms 350ms ease;
    top: 0;
    height: calc(var(--menuSize) * 1.3);
}

.menu-trigger.open > div:before {
    transform: rotate(45deg);
}

.menu-trigger.open > div:after {
    transform: rotate(-45deg);
}

.menu-wrapper {
    --menuScale: 0;
}

.menu-wrapper:before {
    @apply bg-primary w-10 h-10 rounded-full content-[''] origin-center absolute;
    transform: scale(var(--menuScale));
}