@layer reset, theme, layout, components, utilities;

@layer reset {
    /* All elements */
    *,
    *::before,
    *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        border: none;
        outline: none;
        background: transparent;
        line-height: 1em;
        word-break: break-word;
        -moz-osx-font-smoothing: grayscale;
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
        user-select: none;
        -webkit-user-select: none;
    }

    html {
        scroll-behavior: smooth;
    }

    /* Lists */
    ol,
    ul,
    li {
        list-style: none;
    }

    /* Links */
    a,
    a:hover {
        display: inline-flex;
        align-items: center;
        text-decoration: none;
        color: currentColor;
    }

    /* Media */
    picture {
        display: flex;
    }

    img,
    video {
        width: 100%;
        max-width: 100%;
        max-height: 100%;
        display: block;
        pointer-events: none;
        object-fit: cover;
        object-position: center;
    }

    span {
        display: inline-block;
    }

    /* Others */
    ::-webkit-scrollbar {
        display: none;
    }

    ::selection {
        background: var(--accent-color);
        color: white;
    }
}

@layer theme {
    /* TODO Add support for light/dark mode */
    :root {
        /* Color Styles */
        /*! Change this dynamically */
        --accent-h: 4;
        --accent-s: 100%;
        --accent-l: 71%;
        --accent-hsl-values: var(--accent-h), var(--accent-s), var(--accent-l);
        --accent-hsl-values-dark: var(--accent-h), var(--accent-s), 12%;
        --accent-color: hsl(var(--accent-hsl-values));
        --accent-color-dark: hsl(var(--accent-hsl-values-dark));

        --neutral-hsl-values: 0, 0%, 100%;
        --neutral-color: hsl(var(--neutral-hsl-values));

        --error-hsl-values: 0, 96%, 66%;
        --error-color: hsl(var(--error-hsl-values));

        --warning-hsl-values: 43, 99%, 56%;
        --warning-color: hsl(var(--warning-hsl-values));

        --info-hsl-values: 212, 100%, 45%;
        --info-color: hsl(var(--info-hsl-values));

        --success-hsl-values: 132, 67%, 59%;
        --success-color: hsl(var(--success-hsl-values));
    }

    body {
        /* Font Styles */
        color: hsla(var(--accent-hsl-values-dark), 64%);
        font-family: "Onest", sans-serif;
        font-size: 16px;
        font-weight: 400;
        background-size: cover;
        background-repeat: no-repeat;
        background-attachment: fixed;
    }
}

@layer layout {
    .grid-container {
        --_content-max-width: 1080px;
        --_padding: 1rem;
        --_gap: 1rem;

        display: grid;
        grid-template-columns:
            [full-width-start] minmax(var(--_padding), 1fr)
            [content-start] min(100% - (var(--_padding) * 2), var(--_content-max-width)) [content-end]
            minmax(var(--_padding), 1fr) [full-width-end];

        grid-template-rows: auto;
        row-gap: var(--_gap);
        padding: var(--_padding) 0;
    }

    .grid-container > * {
        grid-column: content;
    }

    .grid-container > .full-width {
        grid-column: full-width;
    }

    footer {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
        padding: 2rem;
    }
}

@layer components {
    /* 

    ╔════════════════╗
        TYPOGRAPHY    
    ╚════════════════╝

    */

    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    :where(h1, h2, h3, h4, h5, h6) > span {
        font-weight: 600;
        color: var(--accent-color-dark);
        line-height: 1.25em;
    }

    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.5rem;
    }

    h3,
    h4,
    h5,
    h6 {
        font-size: 1.25rem;
    }

    p {
        color: hsla(var(--accent-hsl-values-dark), 64%);
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.5em;
    }

    /* 

    ╔══════════╗
        ICON    
    ╚══════════╝

    */

    .icon {
        width: 1rem;
        height: 1rem;
        aspect-ratio: 1;
    }

    /* 

    ╔═══════════╗
        BADGE    
    ╚═══════════╝

    */

    .badge {
        display: flex;
        padding: 0.25rem 0.5rem;
        border: 1px solid hsla(var(--accent-hsl-values), 16%);
        border-radius: 0.5rem;
        background: hsla(var(--accent-hsl-values), 8%);
        color: var(--accent-color);
        font-weight: 500;
    }

    /* 

    ╔════════════╗
        BUTTON    
    ╚════════════╝

    */

    .button {
        --_border-width: 1px;
        --_border-radius: 1rem;
        --_depth: 0.25rem;
        --_margin-top: 0.25rem;

        height: min-content;
        position: relative;
        top: calc(var(--_depth) * -1);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        margin: var(--_m);
        margin-top: calc(var(--_m) + var(--_margin-top));
        padding: 0.75rem 1rem;
        border-radius: var(--_border-radius);
        /* background: white; /*! Change this dynamically */
        color: var(--accent-color-dark);
        font-size: 1rem;
        font-weight: 600;
        line-height: 1.25rem;
        /* white-space: nowrap; */
        outline: 0px;
        outline-offset: 0px;

        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    }

    .button::before {
        content: "";
        position: absolute;
        z-index: -1;
        inset: 0;
        border-radius: inherit;
        background-color: white; /*! Change this dynamically */
        pointer-events: none;
        transition: inherit;
    }

    .button::after {
        content: "";
        position: absolute;
        z-index: -2;
        inset: calc(var(--_border-width) * -1); /* Outline offset */
        bottom: calc((var(--_depth) + var(--_border-width)) * -1);
        background-image: linear-gradient(hsla(var(--accent-hsl-values-dark), 8%), hsla(var(--accent-hsl-values-dark), 8%)), linear-gradient(white, white);
        border-radius: calc(var(--_border-radius) + var(--_border-width));
        box-shadow: 0 var(--_depth) 4px hsla(var(--accent-hsl-values-dark), 4%);
        pointer-events: none;
        transition: inherit;
    }

    /* 

    ──── State: Hover ────

    */

    @media (hover: hover) {
        .button:hover {
        }
    }

    .button[hover] {
    }

    /* 

    ──── State: Mousedown ────

    */

    @media (hover: hover) {
        .button:active {
            --_depth: 0px;
        }
    }

    .button[mousedown] {
        --_depth: 0px;
    }

    /* 

    ──── State: Focus ────

    */

    .button:is(:focus-visible, [focus-visible]) {
        outline: 2px solid var(--accent-color);
        outline-offset: 3px;
    }

    /* 

    ──── State: Disabled ────

    */

    .button:is(:disabled, [disabled]) {
        opacity: 32%;
        background: var(--neutral-color-8) !important;
        color: var(--neutral-color) !important;
        box-shadow: none !important;
        cursor: not-allowed;
        filter: grayscale(1);
    }

    /* 

    ──── Floating Button ────

    */

    .floating-button-container {
        position: fixed;
        z-index: 999;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        justify-content: center;
        padding: 1rem;
        background: linear-gradient(0deg, hsla(var(--accent-hsl-values-dark), 24%), hsla(var(--accent-hsl-values-dark), 0%));
        transition: all 1s cubic-bezier(0.23, 1, 0.32, 1);
    }

    .floating-button {
        margin-bottom: 0;
        margin-left: 0;
        margin-right: 0;
        color: white;
        transition: all 1s cubic-bezier(0.23, 1, 0.32, 1);
    }

    .floating-button::before {
        background-color: var(--accent-color);
    }

    .floating-button::after {
        background-image: linear-gradient(hsla(var(--accent-hsl-values-dark), 12%), hsla(var(--accent-hsl-values-dark), 12%)),
            linear-gradient(var(--accent-color), var(--accent-color));
        box-shadow: 0 var(--_depth) 4px hsla(var(--accent-hsl-values-dark), 8%);
    }

    .floating-button-container.hidden {
        visibility: hidden;
        opacity: 0;
    }

    .floating-button-container.hidden > .floating-button {
        transform: translateY(300%);
    }

    /* 

    ╔═══════════╗
        IMAGE    
    ╚═══════════╝

    */

    .image {
        --_p: 0.5rem;

        padding: var(--_p);
    }

    .image > img {
        --_br: 1rem;
        --_bw: 1px;

        height: 100%;
        border-radius: var(--_br);
        outline: var(--_bw) solid hsla(var(--accent-hsl-values-dark), 8%);
        background-color: hsla(var(--accent-hsl-values), 8%);
    }

    .heading,
    .paragraph {
        padding: 1rem;
    }

    * + .heading {
        padding-top: 0.5rem;
    }

    .heading:has(+ *) {
        padding-bottom: 0.25rem;
    }

    * + .paragraph {
        padding-top: 0.25rem;
    }

    .paragraph:has(+ *) {
        padding-bottom: 0.5rem;
    }

    .audio,
    .button {
        --_m: 0.5rem;
    }

    /* 

    ╔═══════════╗
        VIDEO    
    ╚═════════╝

    */

    .video {
        --_p: 0.5rem;
        --_bw: 1px;
        --_br: 1.5rem;

        padding: var(--_p);
        border-radius: var(--_br);
        overflow: hidden;
    }

    .video > * {
        height: 100%;
        border-radius: calc(var(--_br) - var(--_p));
        outline: var(--_bw) solid hsla(var(--accent-hsl-values-dark), 8%);
    }

    /* 

    ╔══════════╗
        TILE    
    ╚══════════╝

    */

    .tile {
        height: min-content;
        position: relative;
        z-index: 0;
        display: grid;
        grid-template-columns: repeat(var(--_tile-columns), 1fr);
        grid-template-rows: repeat(var(--_tile-rows), auto);
        padding: 0.5rem;
        /*! padding-top: padding + --_depth */
        border-radius: 2rem;
        background: white; /*! Change this dynamically */
        box-shadow: inset 0 0 0 1px hsla(var(--accent-hsl-values-dark), 8%);
        overflow: hidden;
        transition: all 0.5s ease-in-out;
    }

    header > .tile {
        padding-bottom: 1.5rem;
    }

    /* 

    ╔═════════════╗
        MASONRY    
    ╚═════════════╝

    */

    .tiles-container {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    /* 

    ╔═════════════╗
        PROFILE    
    ╚═════════════╝

    */

    .profile-cover {
        width: 100%;
        height: 160px;
    }

    .profile-info {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .profile-text {
        position: relative;
        z-index: 1;
        padding-bottom: 1rem;
    }

    .profile-avatar {
        --_size: 9rem;
        --_mt: calc((var(--_size) + 0.5rem) / -2);
        --_br: 1rem;
        --_bw: 1px;

        width: var(--_size);
        height: var(--_size);
        aspect-ratio: 1;
        position: relative;
        z-index: 1;
        margin-top: var(--_mt);
    }

    .profile-avatar::before {
        content: "";
        height: calc((var(--_mt) + 0.5rem) * -1 + var(--_bw) * 2);
        position: absolute;
        z-index: -1;
        top: 0;
        left: 0;
        right: 0;
        border-radius: calc(var(--_br) + var(--_p)) calc(var(--_br) + var(--_p)) 0 0;
        background-color: white;
        box-shadow: inset 0 calc(var(--_bw) * -1) 0 0 white, inset 0 0 0 var(--_bw) hsla(var(--accent-hsl-values-dark), 8%);
    }

    .profile-name,
    .profile-description {
        text-align: center;
    }

    .profile-description {
        max-width: 30rem;
        padding-bottom: 0; /*? To avoid Text overflow */
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Phone (Landscape) + Tablet (Portrait) */
    @media only screen and (min-width: 667px) {
        .tiles-container {
            display: block;
            column-count: 2;
            column-gap: 1rem;
        }

        .tiles-container > * {
            break-inside: avoid;
            margin-bottom: 1rem;
        }

        .profile-info {
            --_mt: calc((9rem + 0.5rem) / -2);
            max-width: 30rem;
            position: relative;
            justify-self: center;
            flex-direction: row;
            margin-top: var(--_mt);
        }

        .profile-avatar {
            height: 100%;
            position: static;
            margin: 0;
        }

        .profile-info {
            position: relative;
            z-index: 1;
            padding-bottom: 1.5rem;
            padding-right: 1.5rem;
        }

        .profile-name,
        .profile-description {
            text-align: start;
        }
    }

    /* 

    ╔══════════════╗
        MENU NAV    
    ╚══════════════╝

    */

    .menu-nav {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.5rem;
        margin-bottom: 1rem;
        max-width: 80%;
        margin-left: auto;
        margin-right: auto;
    }

    .menu-nav button {
        padding: 0.5rem 1rem;
        border-radius: 1rem;
        background-color: var(--accent-color);
        color: white;
        font-weight: 600;
        cursor: pointer;
        transition: background-color 0.3s;
    }

    .menu-nav button.active {
        background-color: var(--accent-color-dark);
    }

    .menu-nav button:hover {
        background-color: var(--accent-color-dark);
    }

    /* 

    ╔══════════════╗
        MENU ITEM    
    ╚══════════════╝

    */

    .menu-item {
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: 1rem;
        border-bottom: 1px solid hsla(var(--accent-hsl-values-dark), 8%);
    }

    .menu-item:last-child {
        border-bottom: none;
    }

    .menu-item-image {
        width: 80px;
        height: 80px;
        border-radius: 0.5rem;
        object-fit: cover;
    }

    .menu-item-details {
        flex: 1;
    }

    .menu-item-name {
        font-size: 1.25rem;
        font-weight: 600;
        margin-bottom: 0.5rem;
    }

    .menu-item-description {
        font-size: 1rem;
        color: hsla(var(--accent-hsl-values-dark), 64%);
        margin-bottom: 0.5rem;
    }

    .menu-item-price {
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--accent-color-dark);
        margin-left: auto;
    }

    /* 

    ╔══════════════╗
        PROFILE BUTTONS    
    ╚══════════════╝

    */

    .profile-cover {
        position: relative;
    }

    .profile-button {
        position: absolute;
        top: 1rem; /* Adjusted for padding from the top */
        padding: 0.5rem;
        border-radius: 50%;
        background-color: var(--accent-color);
        color: white;
        font-weight: 600;
        cursor: pointer;
        transition: background-color 0.3s;
    }

    .profile-button:hover {
        background-color: var(--accent-color-dark);
    }

    .download-button {
        left: 1rem; /* Adjusted for padding from the left */
    }

    .favorite-button {
        right: 1rem; /* Adjusted for padding from the right */
    }

    .icon-download::before {
        content: "\f019"; /* FontAwesome download icon */
        font-family: "FontAwesome";
    }

    .icon-heart::before {
        content: "\f004"; /* FontAwesome heart icon */
        font-family: "FontAwesome";
    }
}

@layer utilities {
    /* 

    ╔══════════════╗
        POSITION    
    ╚══════════════╝

    */

    .absolute {
        position: absolute;
    }

    .relative {
        position: relative;
    }

    .fixed {
        position: fixed;
    }

    .sticky {
        position: sticky;
    }

    .inset-0 {
        inset: 0;
    }

    .top-0 {
        top: 0;
    }

    .bottom-0 {
        bottom: 0;
    }

    .left-0 {
        left: 0;
    }

    .right-0 {
        right: 0;
    }

    .z-index-0 {
        z-index: 0;
    }

    /* 

    ╔══════════╗
        SIZE    
    ╚══════════╝

    */

    .w-0 {
        width: 0;
    }

    .w-full {
        width: 100%;
    }

    .w-screen {
        width: 100vw;
    }

    .w-min {
        width: min-content;
    }

    .w-max {
        width: max-content;
    }

    .h-0 {
        height: 0;
    }

    .h-full {
        height: 100%;
    }

    .h-screen {
        height: 100vh;
    }

    .h-min {
        height: min-content;
    }

    .h-max {
        height: max-content;
    }

    /* 

    ╔════════════╗
        LAYOUT    
    ╚════════════╝

    */

    /* 
    
    ──── Display ────

    */

    .block {
        display: block;
    }

    .flex {
        display: flex;
    }

    .grid {
        display: grid;
    }

    .inline-block {
        display: inline-block;
    }

    .inline-flex {
        display: inline-flex;
    }

    .inline-grid {
        display: inline-grid;
    }

    /* 
    
    ──── Display ────

    */

    .flex-row {
        flex-direction: row;
    }

    .flex-row-reverse {
        flex-direction: row-reverse;
    }

    .flex-col {
        flex-direction: column;
    }

    .flex-1 {
        flex: 1;
    }

    /* 
    
    ──── Alignment ────

    */

    .align-items-start {
        align-items: start;
    }

    .align-items-end {
        align-items: end;
    }

    .align-items-center {
        align-items: center;
    }

    .justify-content-start {
        justify-content: start;
    }

    .justify-content-end {
        justify-content: end;
    }

    .justify-content-center {
        justify-content: center;
    }

    .justify-content-between {
        justify-content: space-between;
    }

    .justify-self-start {
        justify-self: start;
    }

    .justify-self-end {
        justify-self: end;
    }

    .justify-self-center {
        justify-self: center;
    }

    /* 
    
    ──── Spacing ────

    */

    .gap-0 {
        gap: 0;
    }

    .gap-xs {
        gap: 0.25rem;
    }

    .gap-sm {
        gap: 0.5rem;
    }

    .gap-md {
        gap: 1rem;
    }

    .gap-lg {
        gap: 1.5rem;
    }

    .gap-xl {
        gap: 2rem;
    }

    .gapx-0 {
        row-gap: 0;
    }

    .gapx-xs {
        row-gap: 0.25rem;
    }

    .gapx-sm {
        row-gap: 0.5rem;
    }

    .gapx-md {
        row-gap: 1rem;
    }

    .gapx-lg {
        row-gap: 1.5rem;
    }

    .gapx-xl {
        row-gap: 2rem;
    }

    .gapy-0 {
        column-gap: 0;
    }

    .gapy-xs {
        column-gap: 0.25rem;
    }

    .gapy-sm {
        column-gap: 0.5rem;
    }

    .gapy-md {
        column-gap: 1rem;
    }

    .gapy-lg {
        column-gap: 1.5rem;
    }

    .gapy-xl {
        column-gap: 2rem;
    }

    .m-auto {
        margin: auto;
    }

    .m-0 {
        margin: 0;
    }

    .m-xs {
        margin: 0.25rem;
    }

    .m-sm {
        margin: 0.5rem;
    }

    .m-md {
        margin: 1rem;
    }

    .m-lg {
        margin: 1.5rem;
    }

    .m-xl {
        margin: 2rem;
    }

    .mt-auto {
        margin-top: auto;
    }

    .mt-0 {
        margin-top: 0;
    }

    .mt-xs {
        margin-top: 0.25rem;
    }

    .mt-sm {
        margin-top: 0.5rem;
    }

    .mt-md {
        margin-top: 1rem;
    }

    .mt-lg {
        margin-top: 1.5rem;
    }

    .mt-xl {
        margin-top: 2rem;
    }

    .mb-auto {
        margin-bottom: auto;
    }

    .mb-0 {
        margin-bottom: 0;
    }

    .mb-xs {
        margin-bottom: 0.25rem;
    }

    .mb-sm {
        margin-bottom: 0.5rem;
    }

    .mb-md {
        margin-bottom: 1rem;
    }

    .mb-lg {
        margin-bottom: 1.5rem;
    }

    .mb-xl {
        margin-bottom: 2rem;
    }

    .ml-auto {
        margin-left: auto;
    }

    .ml-0 {
        margin-left: 0;
    }

    .ml-xs {
        margin-left: 0.25rem;
    }

    .ml-sm {
        margin-left: 0.5rem;
    }

    .ml-md {
        margin-left: 1rem;
    }

    .ml-lg {
        margin-left: 1.5rem;
    }

    .ml-xl {
        margin-left: 2rem;
    }

    .mr-auto {
        margin-right: auto;
    }

    .mr-0 {
        margin-right: 0;
    }

    .mr-xs {
        margin-right: 0.25rem;
    }

    .mr-sm {
        margin-right: 0.5rem;
    }

    .mr-md {
        margin-right: 1rem;
    }

    .mr-lg {
        margin-right: 1.5rem;
    }

    .mr-xl {
        margin-right: 2rem;
    }

    .p-0 {
        padding: 0;
    }

    .p-xs {
        padding: 0.25rem;
    }

    .p-sm {
        padding: 0.5rem;
    }

    .p-md {
        padding: 1rem;
    }

    .p-lg {
        padding: 1.5rem;
    }

    .p-xl {
        padding: 2rem;
    }

    .pt-0 {
        padding-top: 0;
    }

    .pt-xs {
        padding-top: 0.25rem;
    }

    .pt-sm {
        padding-top: 0.5rem;
    }

    .pt-md {
        padding-top: 1rem;
    }

    .pt-lg {
        padding-top: 1.5rem;
    }

    .pt-xl {
        padding-top: 2rem;
    }

    .pb-0 {
        padding-bottom: 0;
    }

    .pb-xs {
        padding-bottom: 0.25rem;
    }

    .pb-sm {
        padding-bottom: 0.5rem;
    }

    .pb-md {
        padding-bottom: 1rem;
    }

    .pb-lg {
        padding-bottom: 1.5rem;
    }

    .pb-xl {
        padding-bottom: 2rem;
    }

    .pl-0 {
        padding-left: 0;
    }

    .pl-xs {
        padding-left: 0.25rem;
    }

    .pl-sm {
        padding-left: 0.5rem;
    }

    .pl-md {
        padding-left: 1rem;
    }

    .pl-lg {
        padding-left: 1.5rem;
    }

    .pl-xl {
        padding-left: 2rem;
    }

    .pr-0 {
        padding-right: 0;
    }

    .pr-xs {
        padding-right: 0.25rem;
    }

    .pr-sm {
        padding-right: 0.5rem;
    }

    .pr-md {
        padding-right: 1rem;
    }

    .pr-lg {
        padding-right: 1.5rem;
    }

    .pr-xl {
        padding-right: 2rem;
    }

    .px-0 {
        padding-left: 0;
        padding-right: 0;
    }

    .px-xs {
        padding-left: 0.25rem;
        padding-right: 0.25rem;
    }

    .px-sm {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .px-md {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .px-lg {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .px-xl {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    .py-0 {
        padding-top: 0;
        padding-bottom: 0;
    }

    .py-xs {
        padding-top: 0.25rem;
        padding-bottom: 0.25rem;
    }

    .py-sm {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }

    .py-md {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    .py-lg {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }

    .py-xl {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    /* 
    
    ──── Box ────

    */

    .rounded {
        border-radius: 9999px;
    }

    .rounded-0 {
        border-radius: 0;
    }

    .rounded-xs {
        border-radius: 0.25rem;
    }

    .rounded-sm {
        border-radius: 0.5rem;
    }

    .rounded-md {
        border-radius: 1rem;
    }

    .rounded-lg {
        border-radius: 1.5rem;
    }

    .rounded-xl {
        border-radius: 2rem;
    }

    /* 

    ╔═══════════╗
        STYLE    
    ╚═══════════╝

    */

    .shadow-0 {
        box-shadow: 0 0 0 0 transparent;
    }

    .shadow-xs {
        box-shadow: 0 0 0.25rem 0.25rem var(--primary-color-16);
    }

    .shadow-sm {
        box-shadow: 0 0 0.5rem 0.5rem var(--primary-color-16);
    }

    .shadow-md {
        box-shadow: 0 0 1rem 1rem var(--primary-color-16);
    }

    .shadow-lg {
        box-shadow: 0 0 1.5rem 1.5rem var(--primary-color-16);
    }

    .shadow-xl {
        box-shadow: 0 0 2rem 2rem var(--primary-color-16);
    }

    .shadow-inner-0 {
        box-shadow: inset 0 0 0 0 transparent;
    }

    .shadow-inner-xs {
        box-shadow: inset 0 0 0.25rem 0.25rem var(--primary-color-16);
    }

    .shadow-inner-sm {
        box-shadow: inset 0 0 0.5rem 0.5rem var(--primary-color-16);
    }

    .shadow-inner-md {
        box-shadow: inset 0 0 1rem 1rem var(--primary-color-16);
    }

    .shadow-inner-lg {
        box-shadow: inset 0 0 1.5rem 1.5rem var(--primary-color-16);
    }

    .shadow-inner-xl {
        box-shadow: inset 0 0 2rem 2rem var(--primary-color-16);
    }

    .overflow-hidden {
        overflow: hidden;
    }
}

.review-header{
    margin: 1rem;
    text-align: center;
}

textarea {
    padding: 1rem;
    height: 10rem;
    width: 100%;
    resize: none; /* Optional: prevents resizing */
}

.review-stars{
    text-align: center;
}
.review-button{
    margin: auto;
}
input{
    padding: 1rem;
    max-width: 50%;
    width: 100%;
}
.custom-review-tile {
    transition: all 0.5s ease-in-out;
    opacity: 1;
    transform: scale(1);
    max-height: 500px; /* Add a max-height to control smooth resizing */
    overflow: hidden;
}

.custom-review-tile.review-submitted {
    opacity: 0;
    transform: scale(0.95);
    max-height: 0; /* Collapse smoothly */
    padding: 0; /* Remove padding during collapse */
    margin: 0;   /* Optional: reduces visual spacing */
    pointer-events: none;
}

.review-success {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s ease-in-out;
    text-align: center;
    font-size: 1.2rem;
    font-weight: bold;
    color: #4CAF50; 
    max-height: 0;
    overflow: hidden;
}
.review-submitting {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s ease-in-out;
    text-align: center;
    font-size: 1.2rem;
    font-weight: bold;
    color: #7c7a14; 
    max-height: 0;
    overflow: hidden;
}



.custom-review-tile.review-success-visible {
    opacity: 1;
    transform: scale(1);
    max-height: 200px; /* Adjust based on desired size */
    padding: 1rem; /* Add padding back */
}

.review-success-visible .review-success {
    opacity: 1;
    transform: translateY(0);
    max-height: 200px; /* Expand smoothly */
}

.review-success-visible .review-submitting {
    opacity: 1;
    transform: translateY(0);
    max-height: 200px; /* Expand smoothly */
}

.chatbot{
    height: 400px;
    display: flex;
    flex-direction: column;
}

.tile .chatbot-messages {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.5rem 0.5rem 1rem 0.5rem;
    scroll-behavior: smooth;
    overscroll-behavior: contain;
  }
  
  /* Each message */
  .tile .chatbot-message {
    flex-shrink: 0;
    max-width: 80%;
    padding: var(--padding-sm) var(--padding-md);
    border-radius: var(--br-lg);
    word-break: break-word;
    font-size: var(--fs-base);
    line-height: 1.4;
    white-space: pre-wrap;
  }
  
  /* User message */
  .tile .chatbot-user {
    align-self: flex-end;
    background-color: hsl(0, 0%, 90%);
      height: min-content;
          position: relative;
          z-index: 0;
          display: grid;
          grid-template-columns: repeat(var(--_tile-columns), 1fr);
          grid-template-rows: repeat(var(--_tile-rows), auto);
          padding-left: 1rem;
          padding-right: 1rem;
          padding-top: 0.5rem;
          padding-bottom: 0.5rem;
          /*! padding-top: padding + --_depth */
          border-radius: 2rem;
          box-shadow: inset 0 0 0 1px hsla(var(--accent-hsl-values-dark), 8%);
          overflow: hidden;
          transition: all 0.5s ease-in-out;
    color: #000;
  }
  
  /* Bot message */
  .tile .chatbot-bot {
    align-self: flex-start;
    background-color: hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.2);
      height: min-content;
          position: relative;
          z-index: 0;
          display: grid;
          padding: 0.5rem;
          padding-left:1rem;
      padding-right: 1rem;
          /*! padding-top: padding + --_depth */
          border-radius: 2rem;
          box-shadow: inset 0 0 0 1px hsla(var(--accent-hsl-values-dark), 8%);
          overflow: hidden;
          transition: all 0.5s ease-in-out;
    color: currentColor;
  }
  
  /* Input section */
  .tile .chatbot-input-container {
    display: flex;
    align-items: center;
    height: 70px;
    border-radius: 2rem;
    padding: 0.5rem;
    background-color: #f0f0f0;
    border-top: 1px solid #ddd;
    gap: 0.5rem;
    input {
        max-width:100%;
    }
  }
  
  .tile .chatbot-input {
    flex: 1;
    padding: 0.6rem 1rem;
    border-radius: 999px;
    border: none;
    outline: none;
    font-size: 1rem;
    background-color: #fff;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);

  }
  
  .tile .chatbot-send {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border: none;
    border-radius: 50%;
    background-color: hsl(var(--accent-h), var(--accent-s), var(--accent-l));
    color: white;
    font-weight: bold;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    transition: background-color 0.2s ease;
    position: relative;
  }
  
  .tile .chatbot-send:hover {
    background-color: hsl(var(--accent-h), var(--accent-s), calc(var(--accent-l) - 10%));
  }
  .fa-paper-plane{
    position: absolute;
    left: 11px;
  }