/* @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); */

:root {
    /* color variables */
    --primaryGreen: #4ad66d;
    --primaryGreen: #68bb59;
    --secondaryGreen: #427e38;
    --lightGreen: rgb(187, 252, 187);
    --faintGreen: rgba(212, 251, 207, 0.4);
    --green1: rgba(104, 187, 89, 0.51);
    --green2: rgba(104, 187, 89, 0.24);
    --green3: rgba(104, 187, 89, 0.1);
    --green4: rgba(115, 150, 109, 0.96);
    --green5: #BCEAB3;

    --powderBlue: rgb(153, 230, 240);
    --royalBlue: royalblue;
    --oxfordBlue: #081f33;
    --primaryBlue: #356687;
    --blue1: #4540FF;

    --primaryWhite: white;

    --backgroundGray: #f8f9fa;
    --lightGray: #ccc;
    --darkGray: #333;
    --slateGray: darkslategrey;
    --middleGray: #e0e0e0;
    --textGray: #7f847f;
    --gray1: rgba(224, 224, 224, 0.5);
    --gray2: #BBBBBB;
    --gray3: #FAFAFA;
    --gray4: #E9EAEB;
    --gray900: #181D27;
    --gray600: #535862;
    --gray5: #7a7e79f5;
    --gray6: #A4AAA4;
    --grey100: #EFF1EF;
    --grayscale600: #626265;
    --gray7: #434343;
    --grey700: #1E201E;

    --black: black;
    --subtleBlack: #3C3F3C;

    --crimson: #F01717;
    --transparent: transparent;
    --backgroundYellow: #fff9b3;
    --red1: #BB595B;

    /* box shadows */
    --slimBoxShadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
    --mediumBoxShadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
    --grayBoxShadow:  7px 7px 13px #bebebe,
             -7px -7px 13px var(--primaryWhite);
    --shadow1: rgba(149, 157, 165, 0.2) 0px 8px 24px;

    /* font sizes */
    --smallFontSize: .8rem;
    --smallestFontSize: .7rem;

    /* z-index */
    --primaryNav: 10;
    --sideNav: 11;
    --bottomNav: 12;
    --navCard: 13;
    --toggleNavCardBtn: 14;
    --globalResponseMessage: 15;

    --backdrop: 20;
    --aboveBackdrop: 21;
    --twoAboveBackdrop: 22;

    --globalBanner: 30;
    --oneAboveGlobalBanner: 31;

    --bubble: 30;

    --indexOne: 1;
    --indexTwo: 2;
    --indexThree: 3;
    --indexFour: 4;
    --indexFive: 5;
    --indexSix: 6;
    --indexSeven: 7;
    --indexEight: 8;
    --indexNine: 9;
    --indexBehind: -1;


    /* heights */
    --navHeight: 3rem;
    --footerHeight: 3rem;

    /* border radius */
    --smallBorderRadius: .6rem;
    --circularBorderRadius: 50%;

    /* font-family */
    --semiBold: 'aptosSemiBold';
    --aptosDisplay: 'aptosDisplay';
    --regular: 'aptosRegular';
}

* {
    font-optical-sizing: auto;
    font-family: "aptosRegular", sans-serif;
    box-sizing: border-box;
    scroll-behavior: smooth;
}

body {
    color: var(--subtleBlack);
}

/* element resets */
a {
    text-decoration: none;
    cursor: pointer;
}

body, p, h1, h2, h3, h4, h5, h6 {
    margin: 0;
    padding: 0;
}

b, h1, h2, h3, h4, h5, h6 {
    font-family: var(--semiBold);
    font-weight: bold;
}
h1 > *,
h2 > *,
h3 > *,
h4 > *,
h5 > *,
h6 > * {
    font-family: var(--semiBold);
}

fieldset {
    border: none;
    margin: 0;
    padding: 0;
}

button {
    cursor: pointer;
    padding: 0;
}

strong {
    font-weight: normal;
    font-family: var(--semiBold);
}

/* end element resets */


/* scroll bar */
body::-webkit-scrollbar {
    width: 8px;
    height: 5px;
}

/* Track */
body::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

/* Handle */
body::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: var(--subtleBlack);
}
/* end scroll bar */

*:focus-visible {
    outline: 1.5px solid var(--primaryGreen);
}

*::placeholder {
    color: var(--gray2);
}

*:disabled {
    cursor: not-allowed;
}

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


/* messages */
#global-response-message.hide {
    display: none;
}

#global-response-message {
    position: relative;
    padding: 1rem 2rem;
    font-size: .8rem;
    z-index: var(--globalResponseMessage);
}

#global-response-message > button {
    background-color: var(--transparent);
    padding: 0;
    border: none;
    font-weight: bold;
    position: absolute;
    right: 1rem;
    top: .5rem;
    color: var(--primaryWhite);
}

#global-response-message ul {
    margin: 0;
}

.error {
    background-color: var(--crimson);
    color: var(--primaryWhite);
}
.success {
    background-color: var(--primaryGreen);
    color: var(--primaryWhite);
}


/* end messages */


/* loaders */
.shimmer-animation {
    animation: shimmer 3s;
    animation-iteration-count: infinite;
    background: linear-gradient(to right, #e6e6e6 5%, #cccccc 25%, #e6e6e6 35%);
    background-size: 1000px 100%;
}

@keyframes shimmer {
    from {
      background-position: -1000px 0;
    }
    to {
      background-position: 1000px 0;
    }
  }

.button-pulsar {
    display: none;
}

.htmx-request.button-pulsar {
    display: block;
}

.htmx-request.button-pulsar + * {
    display: none;
}


/* end loaders */

.main {
    min-height: calc(100vh - var(--navHeight) - var(--footerHeight));
}


/* text colors */
.slate-gray {
    color: slategrey;
}

.slate-gray-bg {
    background-color: rgba(224, 228, 231, 0.233);
}

.yellow {
    color:  #f0d74e;
}

.faint-yellow-bg {
    background-color: #fff9b3;
    background-color: rgba(255, 252, 187, 0.33);
}

.green {
    color: var(--primaryGreen);
}
.green1 {
    color: var(--green1);
}
.green2 {
    color: var(--green2);
}
.green3 {
    color: var(--green3);
}
.green4 {
    color: var(--green4);
}
.green5 {
    color: var(--green5);
}
.secondary-green {
    color: var(--secondaryGreen);
}

.green-bg {
    background-color: var(--faintGreen);
}

.faint-green-bg {
    background-color: var(--faintGreen);
}

.crimson {
    color: var(--crimson);
}

.red1 {
    color: var(--red1);
}

.faint-crimson-bg {
    background-color: #ffe5e2;
    background-color: rgba(255, 234, 234, 1);
}

.faint-gray-bg {
    background-color: #E8EBE8;
}

.royal-blue {
    color: royalblue;
}

.white {
    color: var(--primaryWhite);
}

.green4 {
    color: var(--green4);
}
.text-gray {
    color: var(--textGray);
}

.primary-green-bg {
    background-color: var(--primaryGreen);
}

.red1-bg {
    background-color: var(--red1);
}


/* bgs */
.gray5-bg {
    background-color: var(--gray5);
}




/* font-family */
.semi-bold {
    font-family: 'aptosSemiBold';
}

/* #auto-remove-message.htmx-added {
    opacity: 1;
    transform: translateY(0);
}

#auto-remove-message {
    position: fixed;
    top: 3rem;
    right: 2rem;
    opacity: 0;
    transform: translateY(-10rem);
    transition: 3s transform ease-out;
} */

.auto-remove-message {
    background-color: var(--primaryWhite);
    position: fixed;
    top: -10rem;
    width: min(90vw, 25rem);
    left: calc((100vw - min(90vw, 25rem))/2);
    display: grid;
    row-gap: 1rem;
    justify-content: center;
    padding: 1rem 2rem;
    border-radius: .3rem;
    box-shadow: var(--slimBoxShadow);
    font-size: .9rem;
    z-index: var(--indexBehind);
}

.auto-remove-message.error {
    background-color: var(--crimson);
    color: var(--primaryWhite);
}
.auto-remove-message.success {
    background-color: var(--primaryGreen);
    color: var(--primaryWhite);
}

.auto-remove-message.slide-up {
    top: 4rem;
    animation: slideUp .3s ease-in-out forwards;
    animation-delay: 4.5s;
    z-index: var(--oneAboveGlobalBanner);
}

@keyframes slideUp {
    0% {
        opacity: 1;
        top: 4rem;
    }
    100% {
        opacity: 0;
        top: -4rem;
        z-index: var(--indexBehind);
    }
}


/* Backdrop styles */
.backdrop {
    position: fixed; /* Stay fixed in place */
    top: 0;
    left: 0;
    width: 100vw; /* Cover the entire viewport width */
    height: 100vh; /* Cover the entire viewport height */
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
    opacity: 0; /* Hidden by default */
    z-index: var(--indexBehind);
}

/* To make it visible */
.backdrop.active {
    opacity: 1;
    z-index: var(--backdrop);
    /* transition: opacity 0.3s ease-in-out; */
}

.page-modals > * {
    position: fixed;
    z-index: var(--indexBehind);
    opacity: 0;
}


.hide-modal-btn {
    background-color: var(--transparent);
    border: none;
    color: var(--textGray);
    position: absolute;
    top: .5rem;
    right: 1rem;
    font-size: 1.3rem;
}

.whatsapp-bubble {
    position:fixed;
    width: 2rem;
    z-index: var(--bubble);
    bottom: 3rem;
    right: 2rem;
}

.whatsapp-bubble > img {
    width: 100%;
}


.global-info-banner {
    background-color: var(--lightGreen);
    z-index: var(--globalBanner);
    text-align: center;

    padding: 1rem 1rem;
    display: grid;
    row-gap: 1rem;
    position: sticky;
    top: 0;
    border-radius: .2rem;
}

.global-info-banner button {
    font-size: 1rem;
    z-index: var(--globalBanner);
    border-radius: var(--circularBorderRadius);
    border: none;
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: .5rem;
    top: .5rem;
    background-color: var(--transparent);
    /* background-color: var(--primaryGreen);
    color: var(--primaryWhite);
    box-shadow: var(--mediumBoxShadow); */
}

.flex-row-1 {
    display: flex;
    align-items: center;
    column-gap: .5rem;
}

.grid-col-1 {
    display: grid;
    row-gap: .5rem;
    align-content: flex-start;
}