:root {
    --app-bg-color: #EBEBEB;
    --island-bg-color: #fff;
    
    --main-color: #CC003A;
    --text-on-main-color: #fff;

    --secondary-color: #CC5274;

    --third-priority-color: #FFE5ED;

    --main-grey-color: #735C62;

    --secondary-grey-color: #736266;

    --low-priority-grey-color: #999194;

    --input-text-color: #000;

    --link-color: var(--secondary-color);

    --safe-zone-one-side-padding: 0.5rem;

    --island-border-radius: 1rem;

    --default-box-shadow: 2px 2px 8px rgb(0, 0, 0, 0.2);
    --default-text-shadow-color: rgb(0, 0, 0, 0.5);

    --placeholder-icon-one-side-size: 5rem;
    --placeholder-font-size: 1.125rem;
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

body {
    display: flex;
    flex-direction: column;
    padding: var(--safe-zone-one-side-padding);
    background-color: var(--app-bg-color);
    height: 100dvh;
    font: var(--default-regular-text-font);
}

#main-router-host {
    height: 100%;
    flex-grow: 1;
    min-width: 0;
    max-width: 100%;
}

.island {
    background-color: var(--island-bg-color);
    border-radius: var(--island-border-radius);
    padding: calc(2 * var(--safe-zone-one-side-padding));
}

.overlay, .modal {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 2;

    transition: opacity 0.1s ease-in;
    opacity: 1;

    backdrop-filter: brightness(50%);

    @starting-style {
        opacity: 0;
    }
}

/* DESKTOP */
@media (min-width: 960px) {
    body {
        flex-direction: row;
        gap: var(--safe-zone-one-side-padding);
    }

    .overlay, .modal {
        z-index: 3;
    }
}

:root {
    --heading2-font: bold 32px 'Roboto Condensed', ui-sans-serif;
    --heading3-font: bold 24px 'Roboto Condensed', ui-sans-serif;
    --heading4-font: bold 16px 'Roboto Condensed', ui-sans-serif;

    --default-regular-text-font: normal 14px/150% 'Comfortaa', ui-sans-serif;
    --default-bold-text-font: bold 14px/150% 'Comfortaa', ui-sans-serif;

    --additional-text-font: normal 12px 'Inter', ui-sans-serif;
    --additional-bold-text-font: bold 12px 'Inter', ui-sans-serif;
    
    --link-font: var(--additional-text-font);
}


@font-face {
    font-family: 'Comfortaa';
    src: url(assets/fonts/Comfortaa-VariableFont_wght.ttf);
}

@font-face {
    font-family: 'Inter';
    src: url(assets/fonts/Inter-VariableFont_opsz,wght.ttf);
}

@font-face {
    font-family: 'Roboto Condensed';
    src: url(assets/fonts/RobotoCondensed-VariableFont_wght.ttf);
}
.not-found-component__host {
    background-color: purple;
}
.auth-component__host {
    position: relative;
    display: block;
    min-height: 100svh;
    overflow-x: hidden;
    background: #f8f2ee;
}

.auth-component__bgPicture,
.auth-component__bgImg,
.auth-component__backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
}

.auth-component__bgPicture {
    z-index: 0;
    height: 62rem;
    overflow: hidden;
}

.auth-component__bgImg {
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

.auth-component__backdrop {
    z-index: 1;
    bottom: 0;
    background: linear-gradient(
        180deg,
        rgb(250 246 243 / 0.04) 0,
        rgb(250 246 243 / 0.1) 18rem,
        rgb(250 246 243 / 0.46) 36rem,
        rgb(250 246 243 / 0.9) 54rem,
        #faf6f3 62rem,
        #faf6f3 100%
    );
    pointer-events: none;
}

.auth-component__welcomeContent {
    position: relative;
    z-index: 2;
    display: flex;
    min-height: 100svh;
    flex-direction: column;
    gap: 1.25rem;
    padding: 48svh 1rem 2rem;
    animation: auth-component__welcomeIn 0.55s ease-out both;
}

.auth-component__logo {
    position: absolute;
    left: 1rem;
    top: 1rem;
    background-color: var(--island-bg-color);
    padding: 0.5rem 1rem;
    border-radius: var(--island-border-radius);
    box-shadow: var(--default-box-shadow);
    z-index: 3;
}

.auth-component__hero {
    display: flex;
    max-width: 48rem;
    flex-direction: column;
    gap: 1rem;
}

.auth-component__eyebrow {
    align-self: flex-start;
    border-radius: 2rem;
    padding: 0.55rem 0.9rem;
    color: var(--main-color);
    background: rgb(255 255 255 / 0.78);
    box-shadow: 0 4px 20px rgb(91 61 68 / 0.08);
    font: var(--default-bold-text-font);
    backdrop-filter: blur(8px);
}

.auth-component__heroTitle {
    max-width: 46rem;
    margin: 0;
    border: 1px solid rgb(255 255 255 / 0.72);
    border-radius: 1.25rem;
    padding: 1rem;
    color: #5f4f52;
    background: rgb(250 246 243 / 0.76);
    box-shadow: 0 10px 30px rgb(91 61 68 / 0.1);
    font-size: clamp(2.05rem, 8vw, 4.5rem);
    line-height: 1.02;
    letter-spacing: -0.035em;
    backdrop-filter: blur(12px);
}

.auth-component__heroLead {
    max-width: 43rem;
    margin: 0;
    border: 1px solid rgb(255 255 255 / 0.72);
    border-radius: 1rem;
    padding: 0.85rem 1rem;
    color: #735f64;
    background: rgb(250 246 243 / 0.82);
    box-shadow: 0 8px 24px rgb(91 61 68 / 0.08);
    font-size: clamp(1rem, 2.8vw, 1.25rem);
    line-height: 1.45;
    backdrop-filter: blur(12px);
}

.auth-component__loginCta {
    align-self: flex-start;
    border: 0;
    border-radius: 2rem;
    padding: 0.9rem 1.35rem;
    color: white;
    background: var(--main-color);
    box-shadow: 0 10px 24px rgb(216 0 63 / 0.22);
    cursor: pointer;
    font: var(--default-bold-text-font);
    transition: translate 0.15s ease, box-shadow 0.15s ease;
}

.auth-component__loginCta:hover,
.auth-component__loginCta:focus-visible {
    translate: 0 -2px;
    box-shadow: 0 14px 28px rgb(216 0 63 / 0.28);
    outline: none;
}

.auth-component__productFlow {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    overflow-x: auto;
    padding: 0.25rem 0 0.5rem;
    color: #735f64;
    scrollbar-width: none;
    white-space: nowrap;
}

.auth-component__productFlow span {
    border: 1px solid rgb(216 0 63 / 0.18);
    border-radius: 2rem;
    padding: 0.45rem 0.7rem;
    background: rgb(255 255 255 / 0.72);
    font-size: 0.86rem;
}

.auth-component__productFlow b {
    color: var(--main-color);
}

.auth-component__benefits {
    display: grid;
    gap: 0.65rem;
}

.auth-component__benefit {
    border: 1px solid rgb(255 255 255 / 0.75);
    border-radius: 1rem;
    color: #5f4f52;
    background: rgb(255 255 255 / 0.74);
    box-shadow: 0 8px 24px rgb(91 61 68 / 0.08);
    backdrop-filter: blur(10px);
    overflow: hidden;
    animation: auth-component__cardRise 0.45s ease-out both;
}

.auth-component__benefit:nth-child(2) {
    animation-delay: 0.08s;
}

.auth-component__benefit:nth-child(3) {
    animation-delay: 0.16s;
}

.auth-component__benefitSummary {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.9rem;
    cursor: pointer;
    list-style: none;
}

.auth-component__benefitSummary::-webkit-details-marker {
    display: none;
}

.auth-component__benefitSummary:focus {
    outline: none;
}

.auth-component__benefitSummary:focus-visible {
    outline: 2px solid rgb(216 0 63 / 0.42);
    outline-offset: -2px;
    border-radius: 1rem;
}

.auth-component__benefitNumber {
    color: var(--main-color);
    font-weight: 800;
}

.auth-component__benefit p {
    margin: -0.1rem 0 0;
    padding: 0 0.9rem 0.9rem 2.9rem;
    color: #806d72;
    font-size: 0.88rem;
    line-height: 1.4;
    animation: auth-component__revealText 0.22s ease-out both;
}

.auth-component__benefitToggle {
    display: grid;
    width: 1.8rem;
    height: 1.8rem;
    place-items: center;
    border-radius: 50%;
    color: var(--main-color);
    background: rgb(216 0 63 / 0.08);
    font-size: 1.25rem;
    transition: rotate 0.2s ease, background 0.2s ease;
}

.auth-component__benefit[open] .auth-component__benefitToggle {
    rotate: 45deg;
    background: rgb(216 0 63 / 0.14);
}

.auth-component__extraPurchaseNote {
    max-width: 43rem;
    margin: 0;
    border-left: 3px solid var(--main-color);
    border-radius: 0 0.8rem 0.8rem 0;
    padding: 0.65rem 0.8rem;
    color: #735f64;
    background: rgb(255 255 255 / 0.78);
    font-size: 0.9rem;
    line-height: 1.45;
    backdrop-filter: blur(8px);
}

.auth-component__extraPurchaseNote summary {
    cursor: pointer;
    color: var(--main-color);
    font-weight: 700;
}

.auth-component__extraPurchaseNote p {
    margin: 0.55rem 0 0;
}

.auth-component__authRouterHost {
    width: 100%;
    max-width: 30rem;
    border-radius: 1.25rem;
    padding: 1.4rem;
    background: rgb(255 255 255 / 0.9);
    box-shadow: 0 18px 50px rgb(91 61 68 / 0.14);
    backdrop-filter: blur(14px);
}

@keyframes auth-component__welcomeIn {
    from {
        opacity: 0;
        translate: 0 1rem;
    }
}

@keyframes auth-component__gentleZoom {
    from { scale: 1; }
    to { scale: 1.025; }
}

@keyframes auth-component__cardRise {
    from {
        opacity: 0;
        translate: 0 0.75rem;
    }
}

@keyframes auth-component__revealText {
    from {
        opacity: 0;
        translate: 0 -0.3rem;
    }
}

@media (min-width: 760px) {
    .auth-component__bgPicture,
    .auth-component__bgImg,
    .auth-component__backdrop {
        position: fixed;
        height: 100%;
    }

    .auth-component__logo {
        position: fixed;
    }

    .auth-component__backdrop {
        background: linear-gradient(
            90deg,
            rgb(250 246 243 / 0.98) 0%,
            rgb(250 246 243 / 0.94) 39%,
            rgb(250 246 243 / 0.46) 58%,
            rgb(250 246 243 / 0.04) 78%
        );
    }

    .auth-component__bgImg {
        object-position: center center;
        animation: auth-component__gentleZoom 16s ease-in-out infinite alternate;
    }

    .auth-component__welcomeContent {
        width: min(54rem, 56vw);
        gap: 1.5rem;
        padding: 7.5rem clamp(2rem, 4vw, 5rem) 3rem;
    }

    .auth-component__heroTitle,
    .auth-component__heroLead {
        border: 0;
        border-radius: 0;
        padding: 0;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
    }

    .auth-component__benefits {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .auth-component__productFlow {
        flex-wrap: wrap;
        overflow: visible;
        white-space: normal;
    }

    .auth-component__authRouterHost {
        padding: 1.6rem 1.8rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .auth-component__bgImg,
    .auth-component__welcomeContent,
    .auth-component__benefit,
    .auth-component__benefit p {
        animation: none;
    }
}

:root {
    --nav-panel-mobile-height: 4.25rem;
}

.nav-component__host {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    box-shadow: 0px -4px 8px 0px rgba(34, 60, 80, 0.2);
    background-color: var(--island-bg-color);
    z-index: 2;
}

.nav-component__navList {
    display: flex;
    justify-content: space-evenly;
    padding: 0.5rem 0;
}

.nav-component__navListItem {
    list-style-type: none;
}

.nav-component__navListItemLink {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.25rem 0.35rem;
    text-decoration: none;
}

.nav-component__navListItemLinkText {
    display: inline;
    max-width: 4.5rem;
    overflow: hidden;
    color: var(--main-grey-color);
    font-size: 0;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
}

.nav-component__navListItemLinkText::after {
    content: attr(data-mobile-text);
    font-size: 0.65rem;
}

.nav-component__navListItemLinkIcon {
    mask-size: cover;
    mask-position: center;
    height: 1.65rem;
    width: 1.65rem;
    display: inline-block;
    background-color: var(--main-grey-color);
    pointer-events: none;
}

.nav-component__navListItemLink_active {    
    background-color: var(--main-color);
    border-radius: 8px;
    overflow: hidden;

    & .nav-component__navListItemLinkIcon {
        background-color: var(--text-on-main-color);
    }

    & .nav-component__navListItemLinkText {
        color: var(--text-on-main-color);
    }
}

/* DESKTOP */
@media (min-width: 960px) {
    .nav-component__host {
        order: -1;
        bottom: unset;
        left: unset;
        right: unset;
        top: unset;
        box-shadow: unset;
        border-radius: 1rem;
        position: relative;
        background-color: var(--island-bg-color);
    }

    .nav-component__nav {
        position: relative;
        height: 100%;
        display: flex;
        align-items: center;
        padding: 0 2rem;
    }

    .nav-component__logo {
        position: absolute;
        z-index: 2;
        top: 1rem;
        left: 1rem;
    }

    .nav-component__navList {
        flex-direction: column;
        justify-content: unset;
        padding: unset;
        gap: 1rem;
    }

    .nav-component__navListItemLink {
        flex-direction: row;
        gap: 0.25rem;
        padding: 0.5rem 1rem;
        text-decoration: none;
    }

    .nav-component__navListItemLinkText {
        display: inline;
        max-width: unset;
        overflow: visible;
        color: var(--main-grey-color);
        font-size: inherit;
        line-height: normal;
        text-overflow: unset;
        white-space: normal;
    }

    .nav-component__navListItemLinkText::after { content: none; }

    .nav-component__navListItemLinkIcon {
        height: 2rem;
        width: 2rem;
    }

    .nav-component__navListItemLink_active {    
        & .nav-component__navListItemLinkText {
            color: var(--text-on-main-color);
        }
    }
}

.logo-component__host {
    display: flex;
    align-items: center;
    gap: 4px;
    
    &:hover {
        cursor: pointer;
    }
}

.logo-component__icon {
    width: 2rem;
    height: 2rem;
    object-fit: cover;
    border-radius: 8px;
    overflow: hidden;
}

.logo-component__logoName {
    font-size: 1rem;
    color: var(--main-grey-color);
}
.onboarding-component__host {
    --onboarding-shadow: 0 18px 55px rgba(54, 25, 35, 0.28);
}

.onboarding-component__helpButton {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 4;
    border: 1px solid var(--third-priority-color);
    border-radius: 999px;
    padding: 0.55rem 0.8rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--main-color);
    background: var(--island-bg-color);
    box-shadow: var(--default-box-shadow);
    cursor: pointer;
    font: inherit;
}

.onboarding-component__helpButton strong {
    display: grid;
    place-items: center;
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 50%;
    color: white;
    background: var(--main-color);
}

.onboarding-component__backdrop {
    position: fixed;
    inset: 0;
    z-index: 10;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(48, 32, 37, 0.58);
    backdrop-filter: blur(4px);
}

.onboarding-component__modalPanel {
    color: var(--main-grey-color);
    background: var(--island-bg-color);
    border-radius: 1.25rem;
    box-shadow: var(--onboarding-shadow);
}

.onboarding-component__modalPanel {
    width: min(100%, 32rem);
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
    padding: 1.5rem;
}

.onboarding-component__brand {
    margin-bottom: 1.25rem;
    color: var(--main-color);
    font: var(--h2-font);
}

.onboarding-component__marker {
    display: inline-block;
    margin-top: 1rem;
    margin-bottom: 0.6rem;
    padding: 0.35rem 0.65rem;
    border-radius: 999px;
    color: var(--main-color);
    background: var(--third-priority-color);
    font-size: 0.875rem;
}

.onboarding-component__title {
    margin-bottom: 0.75rem;
    color: var(--main-grey-color);
    font: var(--h2-font);
}

.onboarding-component__text {
    color: var(--secondary-grey-color);
    line-height: 1.55;
}

.onboarding-component__introSteps {
    display: grid;
    gap: 0.75rem;
    margin-top: 1rem;
    border: 2px solid var(--main-color);
    border-radius: 0.9rem;
    padding: 1rem 1rem 1rem 2.5rem;
    color: var(--main-grey-color);
    background: #fff4f7;
    line-height: 1.5;
}

.onboarding-component__hint {
    margin-top: 1rem;
    padding: 0.75rem;
    border-radius: 0.75rem;
    color: var(--main-grey-color);
    background: #fff4f7;
    line-height: 1.4;
}

.onboarding-component__actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    margin-top: 1.4rem;
}

.onboarding-component__primaryButton,
.onboarding-component__secondaryButton {
    min-height: 2.75rem;
    border-radius: 999px;
    padding: 0.65rem 1rem;
    cursor: pointer;
    font: inherit;
}

.onboarding-component__primaryButton {
    border: 1px solid var(--main-color);
    color: white;
    background: var(--main-color);
}

.onboarding-component__secondaryButton {
    border: 1px solid var(--main-color);
    color: var(--main-color);
    background: white;
}

.onboarding-component__topics {
    display: grid;
    gap: 0.5rem;
    margin-top: 1rem;
}

.onboarding-component__topics details {
    border: 1px solid var(--third-priority-color);
    border-radius: 0.75rem;
    padding: 0.75rem;
}

.onboarding-component__topics summary {
    cursor: pointer;
    color: var(--main-grey-color);
}

.onboarding-component__topics p {
    padding-top: 0.65rem;
    color: var(--secondary-grey-color);
    line-height: 1.45;
}

.onboarding-component__feedbackForm {
    display: grid;
    gap: 1rem;
    margin-top: 1rem;
}

.onboarding-component__feedbackForm label {
    display: grid;
    gap: 0.4rem;
    color: var(--main-grey-color);
}

.onboarding-component__feedbackForm select,
.onboarding-component__feedbackForm textarea {
    width: 100%;
    border: 1px solid var(--low-priority-grey-color);
    border-radius: 0.9rem;
    padding: 0.75rem;
    color: var(--main-grey-color);
    background: white;
    font: inherit;
}

.onboarding-component__feedbackForm textarea {
    resize: vertical;
}

@media (max-width: 599px) {
    .onboarding-component__helpButton {
        top: auto;
        right: 0.75rem;
        bottom: calc(var(--nav-panel-mobile-height) + 0.75rem);
        padding: 0.45rem;
    }

    .onboarding-component__helpButton span {
        display: none;
    }

    .onboarding-component__modalPanel {
        padding: 1.25rem;
    }

    .onboarding-component__actions {
        justify-content: stretch;
    }

    .onboarding-component__actions button {
        flex: 1;
    }
}

@media (min-width: 960px) {
    .onboarding-component__helpButton {
        top: auto;
        right: auto;
        bottom: 1.25rem;
        left: 1.25rem;
    }
}

.email-input-component__host {
    display: inline-block;
}

.email-input-component__emailInput {
    width: 100%;
    padding: 12px 20px;
    border-radius: 2rem;
    outline: none;
    border: 1px solid var(--low-priority-grey-color);
    font: var(--default-regular-text-font);
    color: var(--input-text-color);
}
.login-component__host {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.login-component__title {
    margin: 0;
    font: var(--heading3-font);
    color: var(--main-grey-color);
    text-align: center;
}

.login-component__intro {
    max-width: 24rem;
    margin: 0;
    color: var(--low-priority-grey-color);
    line-height: 1.45;
    text-align: center;
}

.login-component__form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 0.35rem;
}

.login-component__formControls {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.login-component__formControl {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font: var(--default-regular-text-font);
    color: var(--main-grey-color);
}

.login-component__links {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.login-component__link {
    font: var(--link-font);
    color: var(--link-color);
    text-align: center;
    line-height: 1.4;
}

.login-component__enterBtn {
    width: 100%;
    padding: 1rem 2rem;
    outline: none;
    border: none;
    background-color: var(--main-color);
    color: var(--text-on-main-color);
    border-radius: 2rem;
    align-self: stretch;
    font: var(--default-regular-text-font);
    cursor: pointer;
}

.login-component__inviteInput {
    width: 100%;
    padding: 12px 20px;
    border-radius: 2rem;
    outline: none;
    border: 1px solid var(--low-priority-grey-color);
    font: var(--default-regular-text-font);
    color: var(--input-text-color);
}

.login-component__hint {
    margin: 0;
    color: var(--low-priority-grey-color);
    font: var(--small-text-font);
    line-height: 1.4;
}

.login-component__consent {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    color: var(--secondary-grey-color);
    font-size: 0.85rem;
    line-height: 1.4;
}

.login-component__consent input {
    width: 1.1rem;
    height: 1.1rem;
    margin-top: 0.1rem;
    accent-color: var(--main-color);
    flex: 0 0 auto;
}

.login-component__consent a {
    color: var(--link-color);
    font-weight: 700;
}

.login-component__unavailable {
    display: grid;
    justify-items: center;
    gap: 1rem;
    width: 100%;
}

.login-component__actionLink {
    box-sizing: border-box;
    text-decoration: none;
    text-align: center;
}

.consent-gate__overlay {
    position: fixed;
    z-index: 10000;
    inset: 0;
    display: grid;
    place-items: center;
    box-sizing: border-box;
    padding: 1rem;
    overflow-y: auto;
    background: rgba(47, 35, 39, 0.72);
    backdrop-filter: blur(5px);
}

.consent-gate__card {
    width: min(680px, 100%);
    box-sizing: border-box;
    padding: clamp(1.25rem, 4vw, 2.25rem);
    border-radius: 1.5rem;
    background: #ffffff;
    color: var(--main-grey-color);
    box-shadow: 0 24px 70px rgba(34, 21, 25, 0.3);
}

.consent-gate__card h2 {
    margin: 0.25rem 0 0.75rem;
    font: var(--heading3-font);
}

.consent-gate__card > p:not(.consent-gate__eyebrow):not(.consent-gate__error) {
    margin: 0;
    color: var(--low-priority-grey-color);
    line-height: 1.5;
}

.consent-gate__eyebrow {
    margin: 0;
    color: var(--main-color);
    font: var(--small-text-font);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.consent-gate__consent {
    display: flex;
    gap: 0.8rem;
    margin-top: 1.25rem;
    padding: 1rem;
    border: 1px solid #f0d7de;
    border-radius: 1rem;
    background: #fff8fa;
    font-size: 0.9rem;
    line-height: 1.55;
}

.consent-gate__consent input {
    width: 1.2rem;
    height: 1.2rem;
    margin-top: 0.15rem;
    flex: 0 0 auto;
    accent-color: var(--main-color);
}

.consent-gate__consent a {
    color: var(--link-color);
    font-weight: 700;
}

.consent-gate__actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1rem;
}

.consent-gate__actions button {
    min-height: 3rem;
    padding: 0.75rem 1.2rem;
    border-radius: 2rem;
    font: var(--default-regular-text-font);
    cursor: pointer;
}

.consent-gate__primary {
    border: 0;
    background: var(--main-color);
    color: var(--text-on-main-color);
}

.consent-gate__primary:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

.consent-gate__secondary {
    border: 1px solid #d7c6cb;
    background: #ffffff;
    color: var(--main-grey-color);
}

.consent-gate__error {
    min-height: 1.25rem;
    margin: 0.65rem 0 0;
    color: #a5002f;
    font-size: 0.85rem;
}

@media (max-width: 600px) {
    .consent-gate__overlay {
        align-items: end;
        padding: 0;
    }

    .consent-gate__card {
        max-height: 94vh;
        overflow-y: auto;
        border-radius: 1.5rem 1.5rem 0 0;
    }

    .consent-gate__actions {
        flex-direction: column-reverse;
    }
}

.password-input-component__host {
    display: inline-block;
}

.password-input-component__passwordInput {
    width: 100%;
    padding: 12px 20px;
    border-radius: 2rem;
    outline: none;
    border: 1px solid var(--low-priority-grey-color);
    font: var(--default-regular-text-font);
    color: var(--input-text-color);
}
.price-list-component__prices {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.price-list-item-component__price {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.price-list-item-component__priceName {
    color: var(--main-grey-color);
    font: var(--default-bold-text-font);
}

.price-list-item-component__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.price-list-item-component__editBtn, .price-list-item-component__removeBtn {
    border: 0;
    padding: 0.35rem;
    color: var(--main-color);
    background: transparent;
    cursor: pointer;
    text-decoration: underline;
}

@media (max-width: 600px) {
    .price-list-item-component__price {
        align-items: flex-start;
        flex-direction: column;
    }

    .price-list-item-component__actions {
        width: 100%;
        flex-wrap: wrap;
    }
}

.price-input-component__input {
    width: 90px;
    border: none;
    outline: none;
    border-radius: 0.5rem;
    padding: 0.25rem 0.5rem;
    text-align: center;
    background-color: var(--third-priority-color);
    color: var(--secondary-color);
    font: var(--default-regular-text-font);
    display: inline-block;

    -moz-appearance: textfield;

    &::-webkit-outer-spin-button, &::-webkit-inner-spin-button {
        -webkit-appearance: none;
    }
}
.home-component__host {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--safe-zone-one-side-padding);
    padding-bottom: var(--nav-panel-mobile-height);

    overflow-y: auto;
    scrollbar-width: none;

    --widget-default-height: 300px;
}

.home-component__accordion {
    flex: 0 0 auto;
    overflow: hidden;
    border: 1px solid transparent;
    padding: 0;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.home-component__accordionOpen {
    border-color: #f1a8ba;
    box-shadow: 0 0.35rem 1.25rem rgb(116 86 93 / 8%);
}

.home-component__accordionButton {
    display: flex;
    width: 100%;
    min-height: 4.4rem;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border: 0;
    padding: 0.9rem calc(2 * var(--safe-zone-one-side-padding));
    color: var(--main-grey-color);
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.home-component__accordionButton:hover,
.home-component__accordionButton:focus-visible {
    background: #fff7f9;
}

.home-component__accordionLabel {
    display: grid;
    min-width: 0;
    gap: 0.15rem;
}

.home-component__accordionTitleLine {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.65rem;
}

.home-component__attentionBadge {
    display: grid;
    flex: 0 0 auto;
    width: 1.65rem;
    height: 1.65rem;
    place-items: center;
    border-radius: 50%;
    color: white;
    background: var(--main-color);
    font-weight: 800;
}

.home-component__accordionLabel strong {
    font: var(--heading3-font);
}

.home-component__accordionLabel small {
    overflow: hidden;
    color: var(--low-priority-grey-color);
    font: var(--default-regular-text-font);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-component__accordionChevron {
    display: grid;
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    place-items: center;
    border: 1px solid var(--third-priority-color);
    border-radius: 50%;
    color: var(--main-color);
    background: #fff7f9;
    font-size: 1.85rem;
    line-height: 1;
    transition: rotate 0.18s ease, color 0.18s ease, background-color 0.18s ease;
}

.home-component__accordionOpen .home-component__accordionChevron {
    rotate: 90deg;
    color: white;
    background: var(--main-color);
}

.home-component__accordionContent {
    border-top: 1px solid var(--third-priority-color);
    padding: calc(2 * var(--safe-zone-one-side-padding));
    padding-top: var(--safe-zone-one-side-padding);
}

.home-component__accordionContent[hidden] {
    display: none;
}

.home-component__accordionContent > app-profile-widget,
.home-component__accordionContent > app-getting-started-widget,
.home-component__accordionContent > app-next-action-widget,
.home-component__accordionContent > app-financial-summary-widget,
.home-component__accordionContent > app-fav-recipe-widget,
.home-component__accordionContent > app-contacts {
    border: 0;
    border-radius: 0;
    padding: 0;
    background: transparent;
}

.home-component__accordionContent > app-getting-started-widget > div:first-child h2,
.home-component__accordionContent > app-financial-summary-widget > h2:first-child,
.home-component__accordionContent > app-fav-recipe-widget > h3:first-child,
.home-component__accordionContent > app-contacts > h3:first-child {
    display: none;
}

.home-component__purchaseSettings {
    display: grid;
    gap: var(--safe-zone-one-side-padding);
}

.home-component__packageLink {
    display: flex;
    min-height: 13.5rem;
    flex-direction: column;
    justify-content: space-between;
    gap: 1rem;
    text-decoration: none;
}

.home-component__settingTitle {
    font: var(--heading3-font);
    color: var(--main-grey-color);
}

.home-component__settingText {
    max-width: 34rem;
    margin: 0;
    color: var(--low-priority-grey-color);
    line-height: 1.5;
}

.home-component__settingAction {
    align-self: flex-start;
    border-radius: 2rem;
    padding: 0.75rem 1.15rem;
    color: var(--main-color);
    background: #fff0f4;
    font: var(--default-bold-text-font);
}

/* DESKTOP */
@media (min-width: 960px) {
    .home-component__host {
        margin-bottom: unset;
        padding-bottom: unset;
    }

    .home-component__purchaseSettings {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 599px) {
    .home-component__host {
        gap: 0.65rem;
    }

    .home-component__accordionButton {
        min-height: 3.9rem;
        padding: 0.7rem 1rem;
    }

    .home-component__accordionLabel strong {
        font-size: 1.05rem;
    }

    .home-component__accordionLabel small {
        font-size: 0.78rem;
    }

    .home-component__accordionChevron {
        width: 2rem;
        height: 2rem;
        font-size: 1.6rem;
    }

    .home-component__accordionContent {
        padding: 1rem;
    }
}

.island-btn-component__host {
    display: flex;
}

.island-btn-component__btn {
    outline: none;
    border: none;

    display: flex;
    flex-grow: 1;
    align-items: center;
    justify-content: space-between;

    border-radius: var(--island-border-radius);
    background-color: var(--island-bg-color);
    padding: calc(var(--safe-zone-one-side-padding) * 2);

    &:hover {
        cursor: pointer;
    }
}

.island-btn-component__icon {
    width: 1rem;
    height: 1rem;
    mask-repeat: no-repeat;
    mask-size: cover;
    background-color: var(--low-priority-grey-color);
    rotate: 180deg;
}

.island-btn-component__text {
    font: var(--default-bold-text-font);
    color: var(--secondary-grey-color);
}
.fav-recipe-widget-component__host {
    display: flex;
    flex-direction: column;
    gap: calc(var(--safe-zone-one-side-padding) * 2);
}

.fav-recipe-widget-component__title {
    font: var(--heading3-font);
    color: var(--main-grey-color);
}

.fav-recipe-widget-component__feed {
    height: var(--widget-default-height);
    overflow-y: auto;
    scrollbar-width: none;
}
.custom-price-widget-component__host {
    display: flex;
    min-height: 13.5rem;
    flex-direction: column;
    gap: 1rem;
}

.custom-price-widget-component__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.custom-price-widget-component__title {
    font: var(--heading3-font);
    color: var(--main-grey-color);
}

.custom-price-widget-component__icon {
    width: 1.5rem;
    height: 1.5rem;
    background-color: var(--secondary-color);
    mask-repeat: no-repeat;
    mask-size: cover;

    &:hover {
        cursor: pointer;
    }
}

.custom-price-widget-component__priceList {
    max-height: 8rem;
    overflow-y: auto;
    scrollbar-width: none;
}

.custom-price-widget-component__description, .custom-price-widget-component__noCustomPrices {
    margin: 0;
    color: var(--low-priority-grey-color);
    line-height: 1.5;
}

.custom-price-widget-component__customPricesContent {
    display: flex;
    min-height: 2.5rem;
    flex-direction: column;
    gap: 0.5rem;
}

.custom-price-widget-component__customPricesTitle {
    margin: 0;
    color: var(--main-grey-color);
    font: var(--default-bold-text-font);
}

.custom-price-widget-component__settingsBtn {
    align-self: flex-start;
    margin-top: auto;
    border: none;
    border-radius: 2rem;
    padding: 0.75rem 1.15rem;
    color: var(--main-color);
    background: #fff0f4;
    font: var(--default-bold-text-font);
    cursor: pointer;
}

/* DESKTOP */
@media (min-width: 960px) {
    .custom-price-widget-component__header {
        gap: 0.5rem;
        justify-content: flex-start;
    }
}

.profile-plate-component__host {
    display: flex;
}

.profile-plate-component__plate {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.325rem 1rem;
    background-color: var(--third-priority-color);
    border-radius: var(--island-border-radius);
}

.profile-plate-component__photo {
    width: 3rem;
    aspect-ratio: 1/1;
    object-fit: cover;
    border-radius: 50%;
}

.profile-plate-component__name {
    color: var(--main-color);
}
.profile-widget-component__host {
    display: flex;

    &:hover {
        cursor: pointer;
    }
}

.profile-widget-component__plate {
    flex-grow: 1;
}
.planner-widget-component__host {
    display: flex;
    flex-direction: column;
    gap: calc(var(--safe-zone-one-side-padding) * 2);
}

.planner-widget-component__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    color: var(--main-grey-color);
}

.planner-widget-component__title {
    font: var(--heading3-font);
}

.planner-widget-component__swipeHint {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border: 1px solid #f1a8ba;
    border-radius: 999px;
    padding: 0.45rem 0.75rem;
    color: var(--main-color);
    background: #fff7f9;
    font-size: 0.82rem;
    white-space: nowrap;
}

.planner-widget-component__swipeHint b {
    font-size: 1.1rem;
    animation: planner-widget-component__cue-left 1.6s ease-in-out infinite alternate;
}

.planner-widget-component__swipeHint b:last-child {
    animation-name: planner-widget-component__cue-right;
    animation-delay: 0.8s;
}

@keyframes planner-widget-component__cue-left {
    from { translate: 0 0; }
    to { translate: -0.2rem 0; }
}

@keyframes planner-widget-component__cue-right {
    from { translate: 0 0; }
    to { translate: 0.2rem 0; }
}

@media (max-width: 599px) {
    .planner-widget-component__host {
        gap: 0.8rem;
    }

    .planner-widget-component__header {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.55rem;
    }

    .planner-widget-component__swipeHint {
        align-self: stretch;
        justify-content: center;
        min-height: 2.35rem;
        font-size: 0.8rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .planner-widget-component__swipeHint b {
        animation: none;
    }
}

.contacts-component__host {
    display: flex;
    flex-direction: column;
    gap: calc(var(--safe-zone-one-side-padding) * 2);
}

.contacts-component__heading {
    font: var(--heading3-font);
    color: var(--main-grey-color);
}

.contacts-component__content {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.contacts-component__link {
    font: var(--link-font);
    color: var(--link-color);
}

.contacts-component__icon {
    width: 1.5rem;
    height: 1.5rem;
    mask-repeat: no-repeat;
    mask-size: cover;
    background-color: var(--secondary-color);
}
.empty-fav-recipes-placeholder-component__host {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

.empty-fav-recipes-placeholder-component__text {
    font: var(--default-bold-text-font);
    color: var(--low-priority-grey-color);
    font-size: var(--placeholder-font-size);
    text-align: center;
}

/* DESKTOP */
@media (min-width: 960px) {
    .empty-fav-recipes-placeholder-component__text {
        width: 400px;
    }
}
.empty-custom-price-placeholder-component__host {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    gap: 1rem;
}

.empty-custom-price-placeholder-component__text {
    font: var(--default-bold-text-font);
    color: var(--low-priority-grey-color);
    font-size: var(--placeholder-font-size);
    text-align: center;
}

/* DESKTOP */
@media (min-width: 960px) {
    .empty-custom-price-placeholder-component__text {
        width: 400px;
    }
}
.default-btn-component__btn {
    outline: none;
    border-radius: 2rem;
    padding: 1rem 1.5rem;
    background-color: var(--main-color);
    color: var(--text-on-main-color);
    border: 1px solid var(--main-color);
    font: var(--default-regular-text-font);

    &:hover {
        cursor: pointer;
    }
}

.default-btn-component__transparentBg {
    background-color: white;
    color: var(--main-color);
}

.default-btn-component__bgShadow {
    box-shadow: var(--default-box-shadow);
}

.next-action-widget-component__host {
    display: grid;
    flex: 0 0 auto;
    width: 100%;
    min-height: 0;
    height: auto;
    gap: 1rem;
    overflow: visible;
    border: 1px solid #f1a8ba;
    background: linear-gradient(135deg, #fff 0%, #fff7f9 100%);
}

.next-action-widget-component__main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.6rem 1.25rem;
}

.next-action-widget-component__heading,
.next-action-widget-component__pendingItem > span {
    display: grid;
    gap: 0.25rem;
}

.next-action-widget-component__eyebrow {
    color: var(--main-color);
    font-size: 0.85rem;
}

.next-action-widget-component__title {
    display: block;
    margin: 0;
    color: var(--main-grey-color);
    font: var(--heading2-font);
}

.next-action-widget-component__text,
.next-action-widget-component__loading {
    display: block;
    margin: 0;
    max-width: 48rem;
    color: var(--secondary-grey-color);
    line-height: 1.45;
}

.next-action-widget-component__main .next-action-widget-component__text {
    grid-column: 1;
}

.next-action-widget-component__primaryAction,
.next-action-widget-component__secondaryAction,
.next-action-widget-component__recent {
    border-radius: 999px;
    padding: 0.7rem 1rem;
    cursor: pointer;
    font: inherit;
}

.next-action-widget-component__primaryAction {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    grid-column: 2;
    grid-row: 1 / span 2;
    border: 0;
    color: white;
    background: var(--main-color);
}

.next-action-widget-component__pending {
    display: grid;
    gap: 0.65rem;
    border-top: 1px solid var(--third-priority-color);
    padding-top: 0.9rem;
    color: var(--main-grey-color);
}

.next-action-widget-component__pendingItem {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.next-action-widget-component__pendingItem small {
    color: var(--low-priority-grey-color);
    line-height: 1.35;
}

.next-action-widget-component__secondaryAction {
    flex: none;
    border: 1px solid var(--main-color);
    color: var(--main-color);
    background: white;
}

.next-action-widget-component__recent {
    justify-self: start;
    border: 0;
    padding-left: 0;
    color: var(--main-color);
    background: transparent;
    text-align: left;
}

@media (max-width: 599px) {
    .next-action-widget-component__host {
        gap: 0.8rem;
    }

    .next-action-widget-component__main {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .next-action-widget-component__main .next-action-widget-component__text,
    .next-action-widget-component__primaryAction {
        grid-column: 1;
        grid-row: auto;
    }

    .next-action-widget-component__primaryAction {
        width: 100%;
        min-height: 2.75rem;
    }

    .next-action-widget-component__pendingItem {
        align-items: stretch;
        flex-direction: column;
    }

    .next-action-widget-component__secondaryAction {
        align-self: flex-start;
    }
}

.financial-summary-widget-component__host {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.financial-summary-widget-component__title {
    font: var(--heading2-font);
    color: var(--main-grey-color);
}

.financial-summary-widget-component__period {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem;
}

.financial-summary-widget-component__periodLabel {
    grid-column: 1 / -1;
    color: var(--main-grey-color);
}

.financial-summary-widget-component__dateInput {
    min-width: 0;
    width: 100%;
    border: 1px solid var(--low-priority-grey-color);
    border-radius: 1rem;
    padding: 0.7rem;
    color: var(--main-grey-color);
    background: white;
    font: var(--default-regular-text-font);
}

.financial-summary-widget-component__showButton {
    grid-column: 1 / -1;
    border: 0;
    border-radius: 2rem;
    padding: 0.8rem 1rem;
    color: white;
    background: var(--main-color);
    font: var(--default-regular-text-font);
    cursor: pointer;
}

.financial-summary-widget-component__content {
    display: flex;
    flex-direction: column;
}

.financial-summary-widget-component__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-top: 1px solid var(--third-priority-color);
    padding: 0.9rem 0;
}

.financial-summary-widget-component__itemLabel {
    margin: 0 0 0.2rem;
    color: var(--main-grey-color);
    font: var(--heading3-font);
}

.financial-summary-widget-component__itemDescription,
.financial-summary-widget-component__message {
    margin: 0;
    color: var(--low-priority-grey-color);
    line-height: 1.35;
}

.financial-summary-widget-component__itemValue {
    flex: 0 0 auto;
    color: var(--main-color);
    font: var(--heading3-font);
    white-space: nowrap;
}

@media (min-width: 720px) {
    .financial-summary-widget-component__period {
        grid-template-columns: auto minmax(9rem, 12rem) minmax(9rem, 12rem) auto;
        align-items: center;
    }

    .financial-summary-widget-component__periodLabel,
    .financial-summary-widget-component__showButton {
        grid-column: auto;
    }

    .financial-summary-widget-component__content {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1rem;
    }

    .financial-summary-widget-component__item {
        align-items: flex-start;
        flex-direction: column;
        border-top: 0;
        border-left: 1px solid var(--third-priority-color);
        padding: 0 1rem;
    }
}

.recipe-feed-component__host {
    display: flex;
    flex-direction: column;
    gap: var(--safe-zone-one-side-padding);
}

.recipe-feed-component__recipeFeedMain {
    flex-grow: 1;
    min-height: 0;
}
.fav-recipe-switch-component__icon {
    cursor: pointer;
    width: 1.75rem;
    height: 1.75rem;
    mask-size: cover;
    mask-repeat: no-repeat;
    background-color: var(--low-priority-grey-color);
}

.fav-recipe-switch-component__active {
    background-color: var(--main-color);
}
.column-switch-component__switch {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    cursor: pointer;
}

.column-switch-component__icon {
    width: 1.5rem;
    height: 1.5rem;
    mask-size: cover;
    mask-repeat: no-repeat;
    background-color: var(--low-priority-grey-color);
}

.column-switch-component__options {
    display: flex;
}

.column-switch-component__optionValue {
    font: var(--additional-bold-text-font);
    color: var(--low-priority-grey-color);
}

.column-switch-component__active {
    color: var(--main-color);
}
.time-switch-component__switch {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    cursor: pointer;
}

.time-switch-component__clockIcon {
    width: 1.5rem;
    height: 1.5rem;
    mask-repeat: no-repeat;
    mask-size: cover;
    background-color: var(--low-priority-grey-color);
}

.time-switch-component__arrows {
    display: flex;
}

.time-switch-component__arrowIcon {
    height: 1rem;
    aspect-ratio: 10/14;
    mask-repeat: no-repeat;
    mask-size: contain;
    background-color: var(--low-priority-grey-color);
}

.time-switch-component__arrowDown {
    rotate: 180deg;
}

.time-switch-component__active {
    background-color: var(--main-color);
}

.recipe-filters-component__host {
    display: flex;
    align-items: center;
}

.recipe-filters-component__favSwitch {
    margin-right: auto;
}

.recipe-filters-component__columnsSwitch {
    margin-right: 1rem;
}

.recipe-feed-main-component__host {
    display: flex;
}

.recipe-feed-main-component__recipe {
    display: flex;
    flex-direction: column;
}

.recipe-feed-main-component__recipeName {
    font: var(--default-bold-text-font);
    color: var(--main-grey-color);
    word-break: break-all;
}

.recipe-feed-main-component__nothingFoundPlaceholder {
    width: 100%;
}
.recipe-overlay-component__host {
    display: flex;
    justify-content: flex-end;
}

.recipe-overlay-component__content {
    display: flex;
    flex-direction: column;
    gap: var(--safe-zone-one-side-padding);
    padding: var(--safe-zone-one-side-padding);

    overflow-y: scroll;
    scrollbar-width: none;

    transition: translate 0.1s ease-in;
    translate: 0 0;

    background-color: var(--app-bg-color);

    padding-bottom: var(--nav-panel-mobile-height);

    @starting-style {
        translate: 100% 0;
    }
}

.recipe-overlay-component__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.recipe-overlay-component__backLink {
    width: 1.25rem;
    height: 1.25rem;
    mask-size: cover;
    mask-repeat: no-repeat;
    background-color: var(--main-grey-color);
    
    &:hover {
        cursor: pointer;
    }
}

.recipe-overlay-component__title {
    font: var(--heading3-font);
    color: var(--main-grey-color);
}

@media (min-width: 960px) {
    .recipe-overlay-component__content {
        width: clamp(600px, 40vw, 1000px);
        box-shadow: 0 0 20px 10px rgb(0, 0, 0, 0.4);
        margin-bottom: unset;
    }
}
.nothing-found-placeholder-component__host {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.nothing-found-placeholder-component__icon {
    width: var(--placeholder-icon-one-side-size);
    height: var(--placeholder-icon-one-side-size);
    mask-repeat: no-repeat;
    mask-size: cover;
    background-color: var(--low-priority-grey-color);
}

.nothing-found-placeholder-component__text {
    font: var(--default-bold-text-font);
    color: var(--low-priority-grey-color);
    font-size: var(--placeholder-font-size);
    text-align: center;
    margin-bottom: 1rem;
}
.recipe-plate-component__host {
    display: flex;
    position: relative;

    &:hover {
        cursor: pointer;
    }

    --inner-side-padding: 0.5rem;
}

.recipe-plate-component__photoPreview {
    width: 100%;
    border-radius: var(--island-border-radius);
    overflow: hidden;
}

.recipe-plate-component__favSwitch {
    position: absolute;
    top: var(--inner-side-padding);
    left: var(--inner-side-padding);
}

.recipe-plate-component__timePlate {
    position: absolute;
    top: var(--inner-side-padding);
    right: var(--inner-side-padding);
}

.recipe-plate-component__portions {
    position: absolute;
    left: var(--inner-side-padding);
    bottom: var(--inner-side-padding);
}

.recipe-plate-component__sign {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: saturate(0.5) brightness(0.5);
    border-radius: var(--island-border-radius);
}

.recipe-plate-component__doneSignText {
    font: var(--heading3-font);
    color: var(--secondary-color);
    rotate: 15deg;
    text-shadow: 0 0 2px var(--default-text-shadow-color);
}

.recipe-plate-component__addBtn {
    position: absolute;
    right: var(--inner-side-padding);
    bottom: var(--inner-side-padding);
}

.recipe-plate-component__squareRatio {
    aspect-ratio: 1/1;
}

.recipe-plate-component__horizontalRatio {
    aspect-ratio: 16/9;
}
.time-plate-component__host {
    display: flex;
    align-items: center;
    padding: 0.325rem 0.5rem;
    gap: 0.25rem;
    border-radius: 3rem;
    background-color: var(--island-bg-color);
    box-shadow: var(--default-box-shadow)
}

.time-plate-component__clockIcon {
    width: 1rem;
    height: 1rem;
    background-color: var(--main-grey-color);
    mask-repeat: no-repeat;
    mask-size: cover;
}

.time-plate-component__timeValue {
    font: var(--additional-text-font);
    color: var(--main-grey-color);
}

.portions-component__portions {
    display: flex;
    align-items: center;
    gap: 0.125rem;
    border-radius: 0.5rem;
    padding: 0.25rem 0.75rem 0.25rem 0.25rem;
    background-color: var(--island-bg-color);
    box-shadow: var(--default-box-shadow)
}

.portions-component__icon {
    width: 1.25rem;
    height: 1.25rem;
    mask-repeat: no-repeat;
    mask-size: cover;
    background-color: var(--main-grey-color);
}

.portions-component__text {
    font: var(--default-bold-text-font);
    font-size: 0.75rem;
    color: var(--main-grey-color);
}
.animated-fav-recipe-switch-component__plate {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    box-shadow: var(--default-box-shadow);
    background-color: var(--island-bg-color);
    position: relative;
    overflow: hidden;

    &:hover {
        cursor: pointer;
    }
}

.animated-fav-recipe-switch-component__starIcon, .animated-fav-recipe-switch-component__filledStarIcon {
    position: absolute;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    height: 70%;
    width: 70%;
    background-color: var(--main-color);
    mask-repeat: no-repeat;
    mask-size: cover;
}
.add-btn-component__btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;

    background-color: var(--third-priority-color);
    border-radius: 2rem;
    outline: none;
    border: none;
    padding: 0.5rem 1rem;

    &:hover {
        cursor: pointer;
    }
}

.add-btn-component__text {
    font: var(--additional-text-font);
    color: var(--secondary-color);
}

.add-btn-component__icon {
    width: 1.5rem;
    height: 1.5rem;
    background-color: var(--secondary-color);
    mask-repeat: no-repeat;
    mask-image: cover;
}
.pagination-feed-component__host {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.pagination-feed-component__feed {
    display: grid;
    grid-auto-rows: min-content;
    gap: 0.5rem;
    height: 100%;
    overflow-y: scroll;
    scrollbar-width: none;
}

.pagination-feed-component__columns2 {
    grid-template-columns: 1fr 1fr;
}

.pagination-feed-component__columns3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    
}

.pagination-feed-component__columnsauto {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr))
}
.loader-spinner-component__host {
    display: flex;
    align-items: center;
    justify-content: center;
}

.loader-spinner-component__loader {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    position: relative;
    animation: loader-spinner-component__rotate 1s linear infinite
}

.loader-spinner-component__loader::before {
    content: "";
    box-sizing: border-box;
    position: absolute;
    inset: 0px;
    border-radius: 50%;
    border: 3px solid var(--main-color);
    animation: loader-spinner-component__prixClipFix 2s linear infinite;
}

@keyframes loader-spinner-component__rotate {
    100%   {transform: rotate(360deg)}
}

@keyframes loader-spinner-component__prixClipFix {
    0%   {clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)}
    25%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)}
    50%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}
    75%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 100%)}
    100% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 0)}
}
.tag-component__tag {
    padding: 0.25rem 0.75rem;
    border-radius: 3rem;
    white-space: nowrap;
}

.tag-component__selectable {
    background-color: white;
    border: 1px solid var(--main-color);
    color: var(--main-color);

    &:hover {
        cursor: pointer;
    }
}

.tag-component__readonly {
    background-color: var(--low-priority-grey-color);
    color: var(--text-on-main-color);
}

.tag-component__selected {
    border-color: var(--main-color);
    color: white;
    background: var(--main-color);
}

.tags-component__tagsList {
    display: flex;
    gap: 0.25rem;
    list-style-type: none;
    overflow: auto;
    scrollbar-width: none;
}
.nutrition-facts-component__nutritionFacts {
    display: flex;
    width: 100%;
    justify-content: center;
    gap: 3rem;
}

.nutrition-facts-component__nutritionFact {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    color: var(--main-grey-color);
    font: var(--default-bold-text-font);
}

.nutrition-facts-component__nutritionFactTitle, .nutrition-facts-component__nutritionFactValue {
    text-align: center;
}
.recipe-advice-component__advice {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.recipe-advice-component__adviceHeader {
    display: flex;
    gap: 0.25rem;
    align-items: center;
}

.recipe-advice-component__adviceIcon {
    width: 1.5rem;
    height: 1.5rem;
    mask-repeat: no-repeat;
    mask-size: cover;
    background-color: var(--secondary-color);
}

.recipe-advice-component__adviceTitle {
    font: var(--heading4-font);
    color: var(--main-grey-color);
}

.recipe-advice-component__adviceParagraph {
    color: var(--secondary-grey-color);
}
.recipe-ingredients-component__ingredients {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.recipe-ingredients-component__ingredientsHeader {
    display: flex;
    gap: 0.25rem;
    align-items: center;
}

.recipe-ingredients-component__ingredientsIcon {
    width: 1.5rem;
    height: 1.5rem;
    mask-repeat: no-repeat;
    mask-size: cover;
    background-color: var(--secondary-color);
}

.recipe-ingredients-component__ingredientsTitle {
    font: var(--heading4-font);
    color: var(--main-grey-color);
}

.recipe-ingredients-component__ingredientsList {
    list-style-position: inside;
    margin-left: 0.75rem;
}

.recipe-ingredients-component__ingredientsListItem {
    color: var(--secondary-grey-color);
}
.recipe-serving-component__serving {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.recipe-serving-component__servingHeader {
    display: flex;
    gap: 0.25rem;
    align-items: center;
}

.recipe-serving-component__servingIcon {
    width: 1.5rem;
    height: 1.5rem;
    mask-repeat: no-repeat;
    mask-size: cover;
    background-color: var(--secondary-color);
}

.recipe-serving-component__servingTitle {
    font: var(--heading4-font);
    color: var(--main-grey-color);
}

.recipe-serving-component__servingParagraph {
    color: var(--secondary-grey-color);
}
.recipe-step-component__step {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.recipe-step-component__stepHeader {
    display: flex;
    gap: 0.25rem;
    align-items: center;
}

.recipe-step-component__stepIcon {
    width: 1.5rem;
    height: 1.5rem;
    mask-repeat: no-repeat;
    mask-size: cover;
    background-color: var(--secondary-color);
}

.recipe-step-component__stepTitle {
    font: var(--heading4-font);
    color: var(--main-grey-color);
}

.recipe-step-component__stepDesc {
    color: var(--secondary-grey-color);
}
.selector-component__selector {
    outline: none;
    padding: 0.5rem 1rem;
    border-radius: 2rem;
    color: var(--main-color);
    border: 1px solid var(--main-color);
    background-color: white;
    cursor: pointer;
    font: var(--default-regular-text-font);
}

.recipe-component__host {
    display: flex;
    flex-direction: column;
    gap: var(--safe-zone-one-side-padding);
}

.recipe-component__header {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
}

.recipe-component__steps {
    display: flex;
    flex-direction: column;
    gap: var(--safe-zone-one-side-padding);
}
.planner-cards-component__host {
    display: flex;
    gap: var(--safe-zone-one-side-padding);
    overflow-x: auto;
    scrollbar-width: none;

    & > * {
        flex-shrink: 0;
    }
}

/* DESKTOP */
@media (min-width: 960px) {
    .planner-cards-component__host {
        scrollbar-width: thin;
    }
}
.planner-card-component__host {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    width: 300px;
    background-color: var(--secondary-grey-color);
    padding: calc(2 * var(--safe-zone-one-side-padding));
    position: relative;
    overflow: hidden;
    border-radius: var(--island-border-radius);
    border: 3px solid transparent;
}

.planner-card-component__interactive {
    cursor: pointer;
    transition: translate 0.15s ease, border-color 0.15s ease;
}

.planner-card-component__interactive:hover,
.planner-card-component__interactive:focus-visible {
    border-color: var(--main-color);
    translate: 0 -2px;
    outline: none;
}

.planner-card-component__dateTitle {
    display: block;
    font: var(--heading2-font);
    color: var(--text-on-main-color);
    text-align: center;
    pointer-events: none;
}

.planner-card-component__meals {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    pointer-events: none;
}

.planner-card-component__dayName {
    position: absolute;
    right: -0.5rem;
    bottom: -2rem;
    font-size: 12rem;
    font-weight: 900;
    font-family: 'Roboto Condensed', sans-serif;
    line-height: 1;
    color: rgb(255, 255, 255, 0.2);
    text-transform: uppercase;
    pointer-events: none;
}

.planner-card-meal-component__host {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.planner-card-meal-component__mealName {
    font: var(--heading3-font);
    color: var(--text-on-main-color);
}

.planner-card-meal-component__mealList {
    display: flex;
    gap: 1rem;   
    flex-wrap: wrap;
    list-style-type: none;
}

.planner-card-meal-component__dishName {
    font: var(--additional-text-font);
    color: var(--text-on-main-color);
}

.planner-card-meal-component__lineThrough {
    text-decoration: line-through;
}
.recipes-component__host {
    height: 100%;

    display: flex;
    flex-direction: column;
    gap: var(--safe-zone-one-side-padding);
}

.recipes-component__recipeFeed {
    margin-bottom: var(--nav-panel-mobile-height);

    /* min-height: 0 tells browsers that this element can be smaller than content inside it */
    min-height: 0;
    flex-grow: 1;
}

.recipes-component__header {
    transition: opacity 0.1s ease-in;
    opacity: 1;

    @starting-style {
        opacity: 0
    }
}

.recipes-component__hidden {
    display: none !important;
}

/* DESKTOP */
@media (min-width: 960px) {
    .recipes-component__recipeFeed {
        margin-bottom: unset;
    }
}
.search-bar-component__host {
    display: flex;
    width: 100%;
    padding: 0 1rem;
    align-items: center;
    border: 1px solid var(--main-grey-color);
    border-radius: 2rem;
}

.search-bar-component__loupeIcon {
    width: 2rem;
    height: 2rem;
    mask-repeat: no-repeat;
    mask-size: cover;
    background-color: var(--main-grey-color);
}

.search-bar-component__textInput {
    width: 100%;
    border: none;
    outline: none;
    font-size: 1rem;
    padding: 1rem;
    background-color: transparent;
}
.recipes-header-component__host {
    display: flex;
    flex-direction: column;
    gap: var(--safe-zone-one-side-padding);
}
.recipe-search-filters-component__host {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.recipe-search-filters-component__toolbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.recipe-search-filters-component__filterButton, .recipe-search-filters-component__addButton {
    border: 1px solid var(--main-color);
    border-radius: 2rem;
    padding: 0.65rem 1rem;
    background: white;
    color: var(--main-color);
    font: inherit;
    cursor: pointer;
}

.recipe-search-filters-component__filterButtonActive, .recipe-search-filters-component__addButton {
    background: var(--main-color);
    color: var(--text-on-main-color);
}

.recipe-search-filters-component__resetButton {
    border: none;
    background: transparent;
    color: var(--secondary-color);
    font: inherit;
    cursor: pointer;
}

.recipe-search-filters-component__selectedFilters, .recipe-search-filters-component__options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.recipe-search-filters-component__selectedFilters:empty {
    display: none;
}

.recipe-search-filters-component__selectedChip, .recipe-search-filters-component__option {
    border: 1px solid var(--main-color);
    border-radius: 2rem;
    padding: 0.35rem 0.7rem;
    background: white;
    color: var(--main-color);
    font: inherit;
    cursor: pointer;
}

.recipe-search-filters-component__selectedChip, .recipe-search-filters-component__optionSelected {
    border-color: var(--main-color);
    color: white;
    background: var(--main-color);
}

.recipe-search-filters-component__panel {
    display: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem 1rem;
    max-height: min(55dvh, 34rem);
    overflow: auto;
    padding-top: 0.25rem;
}

.recipe-search-filters-component__panelOpen {
    display: grid;
}

.recipe-search-filters-component__group {
    min-width: 0;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--third-priority-color);
}

.recipe-search-filters-component__group summary {
    color: var(--main-grey-color);
    font-weight: 600;
    cursor: pointer;
    padding: 0.3rem 0;
}

.recipe-search-filters-component__options, .recipe-search-filters-component__ingredientRow {
    margin-top: 0.5rem;
}

.recipe-search-filters-component__ingredientRow {
    display: flex;
    gap: 0.4rem;
}

.recipe-search-filters-component__ingredientInput {
    min-width: 0;
    width: 100%;
    border: 1px solid var(--main-grey-color);
    border-radius: 2rem;
    padding: 0.65rem 0.8rem;
    font: inherit;
}

.recipe-search-filters-component__loading {
    color: var(--low-priority-grey-color);
}

@media (max-width: 599px) {
    .recipe-search-filters-component__panelOpen {
        display: block;
    }

    .recipe-search-filters-component__group {
        width: 100%;
    }

    .recipe-search-filters-component__toolbar {
        justify-content: space-between;
    }
}

.planner-component__host {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--safe-zone-one-side-padding);
}

.planner-component__body {
    margin-bottom: calc(var(--nav-panel-mobile-height) + 1rem);
    flex-grow: 1;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: none;
}

.planner-component__selectDayPlaceholder, .planner-component__plannerDay {
    height: 100%;
    width: 100%;
}

.planner-component__overdueSummary {
    border: 1px solid #f1a8ba;
    background: #fff4f7;
}

.planner-component__overdueToggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    cursor: pointer;
    list-style: none;
}

.planner-component__overdueToggle::-webkit-details-marker {
    display: none;
}

.planner-component__overdueHeading {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.65rem;
}

.planner-component__attentionBadge {
    display: grid;
    flex: 0 0 auto;
    width: 1.65rem;
    height: 1.65rem;
    place-items: center;
    border-radius: 50%;
    color: white;
    background: var(--main-color);
    font-weight: 800;
}

.planner-component__overdueContent {
    display: grid;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid #f1a8ba;
}

.planner-component__overdueArrow {
    flex: 0 0 auto;
    color: var(--main-color);
    font-size: 1.5rem;
    line-height: 1;
    transition: transform 160ms ease;
}

.planner-component__overdueSummary[open] .planner-component__overdueArrow {
    transform: rotate(180deg);
}

.planner-component__hidden {
    display: none;
}

.planner-component__overdueTitle {
    color: var(--main-color);
    font: var(--heading3-font);
}

.planner-component__overdueText {
    color: var(--secondary-grey-color);
    line-height: 1.4;
}

.planner-component__overdueDays {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.planner-component__overdueDays button {
    border: 1px solid var(--main-color);
    border-radius: 2rem;
    padding: 0.55rem 0.85rem;
    color: var(--main-color);
    background: white;
    cursor: pointer;
    font: inherit;
}

.planner-component__overdueDays button:active,
.planner-component__overdueDays button:focus-visible {
    color: white;
    background: var(--main-color);
}

/* DESKTOP */
@media (min-width: 960px) {
    .planner-component__host {
        --placeholder-icon-one-side-size: 8rem;
        --placeholder-font-size: 2rem;
    }

    .planner-component__body {
        margin-bottom: unset;
    }
}

.weekday-picker-component__host {
    display: flex;
    width: 100%;
    min-width: 0;
}

.weekday-picker-component__weekdays {
    display: flex;
    width: 100%;
    min-width: 0;
    justify-content: space-between;
}

.edit-btn-component__btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;

    background-color: var(--third-priority-color);
    border-radius: 2rem;
    outline: none;
    border: none;
    padding: 0.5rem 1rem;

    &:hover {
        cursor: pointer;
    }
}

.edit-btn-component__btnName {
    font: var(--additional-text-font);
    color: var(--secondary-color);
}

.edit-btn-component__icon {
    width: 1.5rem;
    height: 1.5rem;
    background-color: var(--secondary-color);
    mask-repeat: no-repeat;
    mask-image: cover;
}
.photo-preview-component__host {
    display: flex;
    position: relative;
}

.photo-preview-component__photo {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.photo-preview-component__darkOverlay {
    filter: brightness(50%);
}

.photo-preview-component__signature {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 2rem;
    color: #fff;
    font: var(--default-regular-text-font);
}
.weekday-picker-day-component__host {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 2.9rem;
    min-height: 4.35rem;
    padding: 0.35rem 0.2rem;
    border: 1px solid transparent;
    border-radius: 1rem;
    position: relative;
    z-index: 1;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;

    &:hover {
        cursor: pointer;
    }
}

.weekday-picker-day-component__monthDate {
    font: var(--additional-text-font);
    font-size: 1.5rem;
    color: var(--main-grey-color);
}

.weekday-picker-day-component__dayAbbreviation {
    font: var(--additional-text-font);
    font-size: 0.875rem;
    color: var(--main-grey-color);
}

.weekday-picker-day-component__planStatus {
    min-height: 0.75rem;
    color: var(--main-color);
    font-size: 0.58rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.weekday-picker-day-component__planned {
    border-color: var(--main-color);
    background: var(--third-priority-color);
}

.weekday-picker-day-component__planned .weekday-picker-day-component__monthDate {
    color: var(--main-color);
    font-weight: 700;
}

.weekday-picker-day-component__pendingBadge {
    position: absolute;
    top: 0;
    right: -0.15rem;
    display: grid;
    min-width: 1.15rem;
    height: 1.15rem;
    place-items: center;
    border-radius: 1rem;
    padding: 0 0.25rem;
    color: white;
    background: var(--main-color);
    font-size: 0.7rem;
    font-weight: 700;
    box-sizing: border-box;
}

.weekday-picker-day-component__pendingBadge[hidden] {
    display: none;
}

.weekday-picker-day-component__active .weekday-picker-day-component__pendingBadge {
    color: var(--main-color);
    background: white;
}

.weekday-picker-day-component__active {
    border-color: var(--main-color);
    background: var(--main-color);

    .weekday-picker-day-component__monthDate {
        color: var(--text-on-main-color);
    }

    .weekday-picker-day-component__dayAbbreviation {
        color: var(--text-on-main-color);
    }

    .weekday-picker-day-component__planStatus {
        color: var(--text-on-main-color);
    }
}

@media (max-width: 390px) {
    .weekday-picker-day-component__host {
        min-width: 2.55rem;
    }

    .weekday-picker-day-component__planStatus {
        font-size: 0.52rem;
    }
}

.select-day-placeholder-component__host {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.select-day-placeholder-component__icon {
    width: var(--placeholder-icon-one-side-size);
    height: var(--placeholder-icon-one-side-size);
    mask-repeat: no-repeat;
    mask-size: cover;
    background-color: var(--low-priority-grey-color);
}

.select-day-placeholder-component__text {
    font: var(--default-bold-text-font);
    color: var(--low-priority-grey-color);
    font-size: var(--placeholder-font-size);
    width: min(32rem, 90%);
    line-height: 1.35;
    text-align: center;
}

.planner-day-component__host {
    display: flex;
}

.planner-day-component__plannerDayManager, .planner-day-component__plannerDayManualEditor {
    width: 100%;
    height: 100%;
}
.planner-day-copy-editor-overlay-component__host {
    display: flex;
    justify-content: flex-end;
}

.planner-day-copy-editor-overlay-component__content {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--safe-zone-one-side-padding);
    padding: var(--safe-zone-one-side-padding);

    overflow-y: scroll;
    scrollbar-width: none;

    transition: translate 0.1s ease-in;
    translate: 0 0;

    background-color: var(--app-bg-color);

    margin-bottom: var(--nav-panel-mobile-height);

    @starting-style {
        translate: 100% 0;
    }
}

.planner-day-copy-editor-overlay-component__dayPicker {
    display: flex;
    flex-direction: column;
    gap: calc(2 * var(--safe-zone-one-side-padding));
}

.planner-day-copy-editor-overlay-component__desc {
    font: var(--heading3-font);
    color: var(--main-grey-color);
}

.planner-day-copy-editor-overlay-component__plannerCardCont {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40vh;
}

.planner-day-copy-editor-overlay-component__plannerCards {
    flex-grow: 1;
    min-width: 0;
}

.planner-day-copy-editor-overlay-component__selectedCard {
    border-color: var(--main-color);
}

.planner-day-copy-editor-overlay-component__copyBtn {
    margin-left: auto;
}

@media (min-width: 960px) {
    .planner-day-copy-editor-overlay-component__content {
        width: clamp(1200px, 70vw, 1600px);
        box-shadow: 0 0 20px 10px rgb(0, 0, 0, 0.4);
        margin-bottom: unset;
    }
}
.planner-day-manager-component__host {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.planner-day-manager-component__icon {
    width: var(--placeholder-icon-one-side-size);
    height: var(--placeholder-icon-one-side-size);
    mask-repeat: no-repeat;
    mask-size: cover;
    background-color: var(--low-priority-grey-color);
}

.planner-day-manager-component__text {
    font: var(--default-bold-text-font);
    color: var(--low-priority-grey-color);
    font-size: var(--placeholder-font-size);
    width: min-content;
    text-align: center;
    margin-bottom: 1rem;
}

.planner-day-manager-component__btns {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    color: var(--low-priority-grey-color);
    font: var(--default-bold-text-font);
}

/* DESKTOP */
@media (min-width: 960px) {
    .planner-day-manager-component__btns {
        flex-direction: row;
        gap: 1rem;
    }
}
.select-dish-placeholder-component__host {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.select-dish-placeholder-component__icon {
    width: 3rem;
    height: 3rem;
    mask-repeat: no-repeat;
    mask-size: cover;
    background-color: var(--low-priority-grey-color);
}

.select-dish-placeholder-component__text {
    font: var(--default-bold-text-font);
    color: var(--low-priority-grey-color);
    width: min-content;
    text-align: center;
    margin-bottom: 1rem;
}
.dish-slider-component__slider {
    width: 100%;
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    scrollbar-width: none;
}

.dish-slider-component__dish {
    cursor: pointer;
    width: 200px;
    height: 150px;
}

.dish-slider-component__selectDishPlaceholder {
    justify-self: center;
}
.meal-component__mealCont {
    display: flex;
    flex-direction: column;
    gap: calc(2 * var(--safe-zone-one-side-padding));
}

.meal-component__header {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
}

.meal-component__heading {
    font: var(--default-bold-text-font);
    color: var(--main-grey-color);
}
.dish-overlay-component__host {
    display: flex;
    justify-content: flex-end;
}

.dish-overlay-component__content {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--safe-zone-one-side-padding);
    padding: var(--safe-zone-one-side-padding);

    overflow-y: scroll;
    scrollbar-width: none;

    transition: translate 0.1s ease-in;
    translate: 0 0;

    background-color: var(--app-bg-color);

    margin-bottom: var(--nav-panel-mobile-height);

    @starting-style {
        translate: 100% 0;
    }
}

.dish-overlay-component__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dish-overlay-component__backLink {
    width: 1.25rem;
    height: 1.25rem;
    mask-size: cover;
    mask-repeat: no-repeat;
    background-color: var(--main-grey-color);
    
    &:hover {
        cursor: pointer;
    }
}

.dish-overlay-component__title {
    font: var(--heading3-font);
    color: var(--main-grey-color);
}

@media (min-width: 960px) {
    .dish-overlay-component__content {
        width: clamp(600px, 40vw, 1000px);
        box-shadow: 0 0 20px 10px rgb(0, 0, 0, 0.4);
        margin-bottom: unset;
    }
}
.meal-edit-overlay-component__host {
    display: flex;
    justify-content: flex-end;
}

.meal-edit-overlay-component__content {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--safe-zone-one-side-padding);
    padding: var(--safe-zone-one-side-padding);
    position: relative;

    overflow-y: scroll;
    scrollbar-width: none;

    transition: translate 0.1s ease-in;
    translate: 0 0;

    background-color: var(--app-bg-color);

    margin-bottom: var(--nav-panel-mobile-height);

    @starting-style {
        translate: 100% 0;
    }
}

.meal-edit-overlay-component__mealEdit {
    transition: opacity 0.1s ease-in-out;

    @starting-style {
        opacity: 0
    }
}

.meal-edit-overlay-component__dishSearcher {
    min-height: 0;
}

.meal-edit-overlay-component__hidden {
    display: none !important;
}

.meal-edit-overlay-component__collapseBtn {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
}

.meal-edit-overlay-component__saveResult {
    width: min(34rem, calc(100% - 2rem));
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
}

.meal-edit-overlay-component__saveResultMarker {
    display: grid;
    width: 3.5rem;
    height: 3.5rem;
    place-items: center;
    border-radius: 50%;
    color: white;
    background: var(--main-color);
    font-size: 2rem;
}

.meal-edit-overlay-component__saveResult h2 {
    color: var(--main-grey-color);
}

.meal-edit-overlay-component__saveResult p {
    margin: 0;
    color: var(--secondary-grey-color);
    line-height: 1.5;
}

.meal-edit-overlay-component__saveResultActions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
}

.meal-edit-overlay-component__saveResultAction {
    display: block;
}

.meal-edit-overlay-component__saveResultAction button {
    min-width: 12rem;
    border: 2px solid var(--main-color);
    background: transparent;
    color: var(--main-color);
    transition: background-color 0.12s ease, color 0.12s ease, transform 0.12s ease;
}

.meal-edit-overlay-component__saveResultAction button:hover,
.meal-edit-overlay-component__saveResultAction button:focus-visible {
    background: color-mix(in srgb, var(--main-color) 10%, transparent);
}

.meal-edit-overlay-component__saveResultAction button:active {
    transform: scale(0.98);
}

.meal-edit-overlay-component__saveResultActionSelected button,
.meal-edit-overlay-component__saveResultActionSelected button:hover,
.meal-edit-overlay-component__saveResultActionSelected button:focus-visible {
    background: var(--main-color);
    color: var(--text-on-main-color);
}

@media (max-width: 520px) {
    .meal-edit-overlay-component__saveResult {
        width: calc(100% - 1rem);
        gap: 0.75rem;
    }

    .meal-edit-overlay-component__saveResultActions {
        flex-direction: column;
    }

    .meal-edit-overlay-component__saveResultAction,
    .meal-edit-overlay-component__saveResultAction button {
        width: 100%;
    }
}

@media (min-width: 960px) {
    .meal-edit-overlay-component__content {
        width: clamp(1200px, 70vw, 1600px);
        box-shadow: 0 0 20px 10px rgb(0, 0, 0, 0.4);
        margin-bottom: unset;
    }
}

.planner-day-manual-editor-component__meals {
    display: flex;
    flex-direction: column;
    gap: var(--safe-zone-one-side-padding);
}
.two-mode-switch-component__host {
    display: flex;
    gap: 0.5rem;
}

.two-mode-switch-component__option {
    display: flex;
    min-height: 2.75rem;
    flex-grow: 1;
    flex-basis: 0;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0.5rem 1rem;
    border: 1px solid var(--main-color);
    border-radius: 2rem;
    color: var(--main-color);
    background: white;
    font: inherit;

    &:hover {
        cursor: pointer;
    }
}

.two-mode-switch-component__active {
    background-color: var(--main-color);
    color: var(--text-on-main-color);
}

.planner-header-component__host {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.planner-header-component__heading {
    font: var(--heading2-font);
    color: var(--main-grey-color);
}

.planner-header-component__topRow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.planner-header-component__weekNavigation {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
}

.planner-header-component__weekNavigation button {
    width: 2.3rem;
    height: 2.3rem;
    border: 1px solid var(--main-color);
    border-radius: 50%;
    background: white;
    color: var(--main-color);
    cursor: pointer;
    font: inherit;
}

.planner-header-component__weekLabel {
    min-width: 8.5rem;
    text-align: center;
    color: var(--main-grey-color);
}

@media (max-width: 480px) {
    .planner-header-component__topRow {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
        gap: 0.45rem;
    }

    .planner-header-component__heading {
        padding-right: 2.75rem;
    }

    .planner-header-component__weekNavigation {
        width: 100%;
        justify-content: space-between;
    }

    .planner-header-component__weekLabel {
        min-width: 0;
        flex: 1;
        font-size: 0.82rem;
    }

    .planner-header-component__weekNavigation button { width: 2rem; height: 2rem; }

    .planner-header-component__weekdayPicker {
        width: 100%;
        min-width: 0;
    }
}

/* DESKTOP */
@media (min-width: 960px) {
    .planner-header-component__weekdayPicker {
        width: 600px;
    }
}

.planner-body-component__host {
    display: flex;
    gap: var(--safe-zone-one-side-padding);
    flex-direction: column;
}

.planner-body-component__selectDayPlaceholder, .planner-body-component__plannerDay, .planner-body-component__cookingDay {
    height: 100%;
    width: 100%;
}

.planner-body-component__twoModeSwitch {
    width: 100%;
    box-sizing: border-box;
}

.planner-body-component__selectedDayLabel {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 0.75rem 1rem;
    border: 1px solid var(--third-priority-color);
    color: var(--main-grey-color);
    font-weight: 700;
}

.planner-body-component__pastDayResolution {
    border: 1px solid #f1a8ba;
    color: var(--main-grey-color);
    background: #fff4f7;
    line-height: 1.4;
}

.planner-body-component__pastDayToggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    cursor: pointer;
    list-style: none;
}

.planner-body-component__pastDayToggle::-webkit-details-marker {
    display: none;
}

.planner-body-component__pastDayHeading {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.65rem;
}

.planner-body-component__attentionBadge {
    display: grid;
    flex: 0 0 auto;
    width: 1.65rem;
    height: 1.65rem;
    place-items: center;
    border-radius: 50%;
    color: white;
    background: var(--main-color);
    font-weight: 800;
}

.planner-body-component__pastDayContent {
    display: grid;
    gap: 0.6rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid #f1a8ba;
}

.planner-body-component__pastDayArrow {
    flex: 0 0 auto;
    color: var(--main-color);
    font-size: 1.5rem;
    line-height: 1;
    transition: transform 160ms ease;
}

.planner-body-component__pastDayResolution[open] .planner-body-component__pastDayArrow {
    transform: rotate(180deg);
}

.planner-body-component__pastDayTitle {
    font: var(--heading3-font);
    color: var(--main-color);
}

.planner-body-component__pastDayText {
    color: var(--secondary-grey-color);
}

.planner-body-component__pastDishList {
    display: grid;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.planner-body-component__pastDishCard {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    border-radius: 1rem;
    padding: 1rem;
    background: white;
}

.planner-body-component__pastDishCard > div:first-child {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.planner-body-component__pastDishMeta {
    color: var(--low-priority-grey-color);
    font-size: 0.9rem;
}

.planner-body-component__pastDishActions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.planner-body-component__pastDishActions button {
    border-radius: 2rem;
    padding: 0.7rem 1rem;
    cursor: pointer;
    font: inherit;
}

.planner-body-component__pastPrimaryAction {
    border: 0;
    color: white;
    background: var(--main-color);
}

.planner-body-component__pastSecondaryAction {
    border: 1px solid var(--main-color);
    color: var(--main-color);
    background: white;
}

@media (min-width: 960px) {
    .planner-body-component__twoModeSwitch {
        width: 100%;
        align-self: stretch;
        justify-content: flex-start;
    }

    .planner-body-component__twoModeSwitch > button {
        width: calc((600px - 0.5rem) / 2);
        max-width: calc((600px - 0.5rem) / 2);
        flex: 0 1 calc((600px - 0.5rem) / 2);
    }

    .planner-body-component__pastDishCard {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .planner-body-component__pastDishActions {
        justify-content: flex-end;
    }
}

.cooking-day-component__host {
    display: flex;
    flex-direction: column;
    gap: var(--safe-zone-one-side-padding);
}

.cooking-day-component__placeholder {
    height: 100%;
}
.confirm-cancel-modal-component__host {
    display: flex;
    align-items: center;
    justify-content: center;
}

.confirm-cancel-modal-component__content {
    max-width: 80vw;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 3rem;
}

.confirm-cancel-modal-component__desc {
    font: var(--default-regular-text-font);
    text-align: center;
}

.confirm-cancel-modal-component__btns {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

/* DESKTOP */
@media (min-width: 960px) {
    content {
        max-width: 400px;
    }
}
.cooking-dish-card-component__host {
    display: flex;
    flex-direction: column;
    gap: calc(2 * var(--safe-zone-one-side-padding));
}

.cooking-dish-card-component__ingredientsTitle {
    font: var(--heading3-font);
    color: var(--main-grey-color);
}

.cooking-dish-card-component__deductionHint {
    border: 2px solid var(--main-color);
    border-radius: 0.75rem;
    padding: 0.75rem;
    color: var(--secondary-grey-color);
    background: #fff4f7;
    line-height: 1.4;
}

.cooking-dish-card-component__cookingAction {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.75rem;
}

.cooking-dish-card-component__cookingHint {
    width: 100%;
    border: 2px solid var(--main-color);
    border-radius: 0.75rem;
    padding: 0.8rem;
    color: var(--main-grey-color);
    background: #fff4f7;
    line-height: 1.45;
}

.cooking-dish-card-component__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.cooking-dish-card-component__tab {
    flex: 1 1 10rem;
    border: 1px solid var(--main-color);
    border-radius: 2rem;
    padding: 0.65rem 0.9rem;
    color: var(--main-color);
    background: white;
    cursor: pointer;
    font: inherit;
}

.cooking-dish-card-component__tabActive {
    color: white;
    background: var(--main-color);
}

.cooking-dish-card-component__tabContent {
    display: grid;
    gap: 0.75rem;
}

.cooking-dish-card-component__recipeSteps {
    display: grid;
    gap: 0.75rem;
    padding-left: 1.5rem;
    color: var(--secondary-grey-color);
    line-height: 1.5;
}

.cooking-dish-card-component__advice {
    border-radius: 0.75rem;
    padding: 0.8rem;
    color: var(--main-grey-color);
    background: #fff4f7;
    line-height: 1.45;
}

.cooking-dish-card-component__readyBtn {
    max-width: 100%;
}

.cooking-dish-card-component__shortageModal {
    z-index: 20;
    display: grid;
    place-items: center;
    padding: 1rem;
}

.cooking-dish-card-component__shortagePanel {
    width: min(100%, 44rem);
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
    display: grid;
    gap: 1rem;
    border: 2px solid var(--main-color);
}

.cooking-dish-card-component__shortageTitle {
    color: var(--main-color);
    font: var(--heading3-font);
}

.cooking-dish-card-component__shortageSummary {
    color: var(--main-grey-color);
    line-height: 1.45;
}

.cooking-dish-card-component__shortageGroup {
    display: grid;
    gap: 0.5rem;
}

.cooking-dish-card-component__shortageGroup h3 {
    color: var(--main-grey-color);
    font: var(--default-regular-text-font);
    font-weight: 700;
}

.cooking-dish-card-component__shortageGroup ul {
    display: grid;
    gap: 0.4rem;
    padding-left: 1.3rem;
    color: var(--secondary-grey-color);
    line-height: 1.45;
}

.cooking-dish-card-component__shortageGuidance {
    border: 2px solid var(--main-color);
    border-radius: 0.75rem;
    padding: 0.8rem;
    color: var(--main-grey-color);
    background: #fff4f7;
    line-height: 1.45;
}

.cooking-dish-card-component__shortageActions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.65rem;
}

.cooking-dish-card-component__shortagePrimary,
.cooking-dish-card-component__shortageSecondary {
    min-height: 3rem;
    border: 1px solid var(--main-color);
    border-radius: 2rem;
    padding: 0.65rem 1rem;
    font: var(--default-regular-text-font);
    cursor: pointer;
}

.cooking-dish-card-component__shortagePrimary {
    color: var(--text-on-main-color);
    background: var(--main-color);
}

.cooking-dish-card-component__shortageSecondary {
    color: var(--main-color);
    background: white;
}

.cooking-dish-card-component__shortagePrimary:focus-visible,
.cooking-dish-card-component__shortageSecondary:focus-visible {
    outline: 3px solid #ffb5ca;
    outline-offset: 2px;
}

@media (max-width: 599px) {
    .cooking-dish-card-component__cookingAction {
        align-items: stretch;
    }

    .cooking-dish-card-component__cookingAction app-default-btn > button {
        width: 100%;
    }

    .cooking-dish-card-component__shortageActions {
        flex-direction: column;
    }

    .cooking-dish-card-component__shortagePrimary,
    .cooking-dish-card-component__shortageSecondary {
        width: 100%;
    }
}

/* DESKTOP */
@media (min-width: 960px) {
    .cooking-dish-card-component__host {
        width: 600px;
    }
}

.empty-cooking-day-placeholder-component__host {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.empty-cooking-day-placeholder-component__icon {
    width: var(--placeholder-icon-one-side-size);
    height: var(--placeholder-icon-one-side-size);
    mask-repeat: no-repeat;
    mask-size: cover;
    background-color: var(--low-priority-grey-color);
}

.empty-cooking-day-placeholder-component__text {
    font: var(--default-bold-text-font);
    color: var(--low-priority-grey-color);
    font-size: var(--placeholder-font-size);
    width: min-content;
    text-align: center;
}
.dish-deduction-component__island {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.dish-deduction-component__paragraph {
    color: var(--secondary-grey-color);
}
.save-btn-component__btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;

    background-color: var(--third-priority-color);
    border-radius: 2rem;
    outline: none;
    border: none;
    padding: 0.5rem 1rem;

    &:hover {
        cursor: pointer;
    }

    &:disabled {
        cursor: default;
        opacity: 0.45;
    }
}

.save-btn-component__btnName {
    font: var(--additional-text-font);
    color: var(--secondary-color);
}

.save-btn-component__icon {
    width: 1.5rem;
    height: 1.5rem;
    background-color: var(--secondary-color);
    mask-repeat: no-repeat;
    mask-image: cover;
}

.close-btn-component__host {
    display: inline-block;
}

.close-btn-component__btn {
    outline: none;
    background-color: var(--third-priority-color);
    border-radius: 50%;
    border: none;
    padding: 0.5rem;
}

.close-btn-component__icon {
    width: 1rem;
    height: 1rem;
    mask-size: cover;
    mask-repeat: no-repeat;
    background-color: var(--main-color);
}
.amount-control-component__cont {
    display: flex;
    gap: 0.5rem;
}

.amount-control-component__btn {
    outline: none;
    background-color: var(--third-priority-color);
    border-radius: 50%;
    border: none;
    padding: 0.5rem;

    &:hover {
        cursor: pointer;
    }
}

.amount-control-component__icon {
    width: 1rem;
    height: 1rem;
    background-color: var(--secondary-color);
    mask-repeat: no-repeat;
    mask-size: cover;
}

.amount-control-component__input {
    width: 90px;
    border: none;
    outline: none;
    border-radius: 0.5rem;
    padding: 0 0.25rem;
    text-align: center;
    background-color: var(--third-priority-color);
    color: var(--secondary-color);
    font: var(--default-regular-text-font);

    -moz-appearance: textfield;

    &::-webkit-outer-spin-button, &::-webkit-inner-spin-button {
        -webkit-appearance: none;
    }
}
.editable-dish-component__host {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.editable-dish-component__dishPhoto {
    border-radius: var(--island-border-radius);
    overflow: hidden;
    min-height: 0;
    flex-grow: 1;
}

.editable-dish-component__closeBtn {
    position: absolute;
    top: 4px;
    right: 4px;
}

.editable-dish-component__amountControl {
    align-self: center;
}
.edit-dish-slider-component__host {
    display: flex;
}

.edit-dish-slider-component__dishes {
    height: 100%;
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    scrollbar-width: none;
}

.edit-dish-slider-component__dish {
    width: min(44vw, 180px);
    height: 100%;
    flex: 0 0 auto;
}

 /* DESKTOP */
@media (min-width: 960px) {
    .edit-dish-slider-component__dish {
        width: 200px;
        height: 100%;
    }
}

.dish-searcher-component__host {
    display: flex;
    flex-direction: column;
    gap: var(--safe-zone-one-side-padding);
}

.dish-searcher-component__header {
    display: flex;
    flex-direction: column;
    gap: var(--safe-zone-one-side-padding);

    transition: opacity 0.1s ease-in;
    opacity: 1;

    @starting-style {
        opacity: 0
    }
}

.dish-searcher-component__recipeFeed {
    min-height: 0;
}

.dish-searcher-component__hidden {
    display: none !important;
}

/* DESKTOP */
/* @media (min-width: 960px) {
    .recipesFeed {
        margin-bottom: unset;
    }
} */
.meal-edit-component__host {
    display: flex;
    flex-direction: column;
    gap: calc(2 * var(--safe-zone-one-side-padding));
}

.meal-edit-component__header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
}

.meal-edit-component__zone {
    height: 148px;

    border: 1px solid var(--third-priority-color);
    border-radius: var(--island-border-radius);
    padding: 0.75rem;

    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.meal-edit-component__zoneEmpty {
    display: none;
}

.meal-edit-component__sliderComp {
    width: 100%;
    flex: 1;
    min-height: 0;
    
    & > *:first-child {
        padding-left: 0.75rem;
    }

    & > *:last-child {
        padding-right: 0.75rem;
    }
}

.meal-edit-component__backLink {
    display: flex;
    align-items: center;
    gap: 0.5rem;

    &:hover {
        cursor: pointer;
    }
}

.meal-edit-component__backLinkIcon {
    width: 1.25rem;
    height: 1.25rem;
    mask-size: cover;
    mask-repeat: no-repeat;
    background-color: var(--main-grey-color);
}

.meal-edit-component__backLinkText {
    font: var(--heading3-font);
    color: var(--main-grey-color);
}

.meal-edit-component__mealTitle {
    margin: 0;
    font: var(--heading3-font);
    color: var(--main-grey-color);
    text-align: center;
}

.meal-edit-component__header app-save-btn {
    justify-self: end;
}

.meal-edit-component__selectionTitle {
    margin: 0;
    font: var(--additional-text-font);
    color: var(--main-grey-color);
}

@media (max-width: 480px) {
    .meal-edit-component__header {
        grid-template-columns: auto 1fr auto;
        gap: 0.5rem;
    }

    .meal-edit-component__mealTitle {
        min-width: 0;
        font: var(--additional-text-font);
        white-space: nowrap;
    }
}

.planner-day-copy-editor-header-component__host {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 2rem;
}

.planner-day-copy-editor-header-component__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;

    background-color: var(--island-bg-color);
    border-radius: var(--island-border-radius);
    padding: var(--safe-zone-one-side-padding);
}

.planner-day-copy-editor-header-component__backLink {
    width: 1.25rem;
    height: 1.25rem;
    mask-size: cover;
    mask-repeat: no-repeat;
    background-color: var(--main-grey-color);
    
    &:hover {
        cursor: pointer;
    }
}

.planner-day-copy-editor-header-component__title {
    font: var(--heading3-font);
    color: var(--main-grey-color);
}
.ingredient-list-component__host {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.ingredient-list-item-component__host {
    display: block;
    position: relative;
    min-width: 0;
}

.ingredient-list-item-component__ingredientInfo {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.ingredient-list-item-component__ingredientName {
    display: flex;
    gap: 0.25rem;
    align-items: flex-start;
    width: calc(100% - 10.75rem);
    min-width: 0;
}

.ingredient-list-item-component__ingredientTitle {
    min-width: 0;
    font: var(--default-bold-text-font);
    color: var(--main-grey-color);
    overflow-wrap: anywhere;
}

.ingredient-list-item-component__ingredientName app-tooltip {
    flex: 0 0 1.25rem;
    margin-top: 0.05rem;
}

.ingredient-list-item-component__ingredientDetails {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ingredient-list-item-component__manualPurchase {
    align-self: flex-start;
    border-radius: 1rem;
    padding: 0.2rem 0.55rem;
    color: var(--main-color);
    background: #fff0f4;
    font-size: 0.85rem;
}

.ingredient-list-item-component__homeStockAction {
    align-self: flex-start;
    border: 1px solid var(--main-color);
    border-radius: 1rem;
    padding: 0.3rem 0.7rem;
    color: var(--main-color);
    background: transparent;
    font: var(--default-regular-text-font);
    font-size: 0.88rem;
    line-height: 1.2;
    cursor: pointer;
}

.ingredient-list-item-component__homeStockAction:hover,
.ingredient-list-item-component__homeStockAction:focus-visible {
    background: var(--third-priority-color);
}

.ingredient-list-item-component__amountControl {
    position: absolute;
    top: 0;
    right: 0;
}

.ingredient-list-item-component__readOnly {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
}

.ingredient-list-item-component__readOnly .ingredient-list-item-component__ingredientName {
    width: auto;
}

.ingredient-list-item-component__readOnlyAmount {
    min-width: 5.5rem;
    border-radius: 0.75rem;
    padding: 0.45rem 0.7rem;
    color: var(--main-color);
    background: var(--third-priority-color);
    text-align: center;
    white-space: nowrap;
}

.target-amount-component__host {
    display: flex;
    gap: 0.25rem;
    align-items: center;
}

.target-amount-component__icon {
    width: 1.5rem;
    height: 1.5rem;
    mask-size: cover;
    mask-repeat: no-repeat;
    background-color: var(--secondary-color);
}

.target-amount-component__text {
    font: var(--default-regular-text-font);
    color: var(--low-priority-grey-color);
}
.storage-amount-component__host {
    display: flex;
    gap: 0.25rem;
    align-items: center;
}

.storage-amount-component__icon {
    width: 1.5rem;
    height: 1.5rem;
    mask-size: cover;
    mask-repeat: no-repeat;
    background-color: var(--secondary-color);
}

.storage-amount-component__text {
    font: var(--default-regular-text-font);
    color: var(--low-priority-grey-color);
}
.ingredient-price-per-unit-component__cont {
    display: flex;
    gap: 0.25rem;
    align-items: center;
}

.ingredient-price-per-unit-component__icon {
    width: 1.5rem;
    height: 1.5rem;
    mask-size: cover;
    mask-repeat: no-repeat;
    background-color: var(--secondary-color);
}

.ingredient-price-per-unit-component__plate {
    font: var(--default-regular-text-font);
    color: var(--secondary-color);
    background-color: var(--third-priority-color);
    border-radius: 0.5rem;
    padding: 0.125rem 0.75rem
}
.tooltip-component__host {
    display: flex;
    position: relative;

    --desc-width: 200px;
}

.tooltip-component__trigger {
    height: 1.25rem;
    width: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--third-priority-color);
    color: var(--secondary-color);
    border-radius: 50%;

    &:hover {
        cursor: pointer;
    }
}

.tooltip-component__desc {
    position: absolute;
    width: var(--desc-width);
    background-color: var(--third-priority-color);
    color: var(--main-grey-color);
    padding: 1rem;
    border-radius: var(--island-border-radius);
    box-shadow: var(--default-box-shadow);
}

.tooltip-component__leftAligned {
    left: 0;
    bottom: 2rem;
}

.tooltip-component__rightAligned {
    right: 0;
    bottom: 2rem;
}

.tooltip-component__centerAligned {
    left: 0;
    translate: -100px 0;
    bottom: 2rem;
}
.package-set-selector-component__host {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.package-set-selector-component__label {
    display: flex;
    gap: 0.25rem;
    align-items: center;
    font: var(--default-regular-text-font);
    color: var(--low-priority-grey-color);
    padding-top: 0.25rem;
}

.package-set-selector-component__icon {
    width: 1.5rem;
    height: 1.5rem;
    mask-size: cover;
    mask-repeat: no-repeat;
    background-color: var(--secondary-color);
}

.package-set-component__host {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.package-chip-component__host {
    display: flex;
    padding: 0.25rem 0.75rem;
    border-radius: 3rem;
    white-space: nowrap;
}

.package-chip-component__name {
    pointer-events: none;
}

.package-chip-component__selectable {
    background-color: white;
    border: 1px solid var(--main-color);
    color: var(--main-color);

    &:hover {
        cursor: pointer;
    }
}

.package-chip-component__readonly {
    background-color: var(--low-priority-grey-color);
    color: var(--text-on-main-color);
}

.package-chip-component__selected {
    border-color: var(--main-color);
    color: white;
    background: var(--main-color);
}

.cart-component__host {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--safe-zone-one-side-padding);
    padding-bottom: calc(var(--nav-panel-mobile-height) + 0.5rem);
    overflow-y: auto;
    scrollbar-width: none;
}

.cart-component__emptyCartPlaceholder {
    height: 100%;
}

.cart-component__purchaseAction {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.75rem;
}

.cart-component__purchaseHint {
    width: min(100%, 42rem);
    border: 2px solid var(--main-color);
    border-radius: 0.9rem;
    padding: 0.85rem 1rem;
    color: var(--main-grey-color);
    background: #fff4f7;
    line-height: 1.45;
}

.cart-component__purchaseBtn {
    max-width: 100%;
}

.cart-component__purchaseSuccessModal {
    z-index: 20;
    display: grid;
    place-items: center;
    padding: 1rem;
}

.cart-component__purchaseSuccessPanel {
    width: min(100%, 38rem);
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
    display: grid;
    gap: 1rem;
    border: 2px solid var(--main-color);
}

.cart-component__purchaseSuccessTitle {
    color: var(--main-color);
    font: var(--heading3-font);
}

.cart-component__purchaseSuccessText {
    color: var(--main-grey-color);
    line-height: 1.5;
}

.cart-component__purchaseSuccessActions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.75rem;
}

.cart-component__purchaseSuccessPrimary,
.cart-component__purchaseSuccessSecondary {
    min-height: 3rem;
    border: 1px solid var(--main-color);
    border-radius: 2rem;
    padding: 0.65rem 1rem;
    font: var(--default-regular-text-font);
    cursor: pointer;
}

.cart-component__purchaseSuccessPrimary {
    color: var(--text-on-main-color);
    background: var(--main-color);
}

.cart-component__purchaseSuccessSecondary {
    color: var(--main-color);
    background: white;
}

.cart-component__purchaseSuccessPrimary:focus-visible,
.cart-component__purchaseSuccessSecondary:focus-visible {
    outline: 3px solid #ffb5ca;
    outline-offset: 2px;
}

.cart-component__homeStockModal {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 20;
}

.cart-component__homeStockPanel {
    width: 100%;
    max-width: 34rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    border-radius: 1.5rem 1.5rem 0 0;
    padding: 1.5rem 1.5rem max(1.5rem, env(safe-area-inset-bottom));
    max-height: 100dvh;
    overflow-y: auto;
}

.cart-component__homeStockTitle {
    color: var(--main-grey-color);
    font: var(--heading3-font);
}

.cart-component__homeStockHint {
    color: var(--low-priority-grey-color);
}

.cart-component__homeStockAmountRow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
}

.cart-component__homeStockInput {
    width: 100%;
    min-height: 3rem;
    border: 1px solid var(--secondary-color);
    border-radius: 1rem;
    padding: 0.65rem 1rem;
    color: var(--main-grey-color);
    background: var(--third-priority-color);
    font: var(--default-regular-text-font);
    outline: none;
}

.cart-component__homeStockInput:focus {
    border-color: var(--main-color);
}

.cart-component__homeStockUnit {
    min-width: 3rem;
    color: var(--main-grey-color);
}

.cart-component__homeStockError {
    min-height: 1.25rem;
    color: var(--main-color);
    font-size: 0.85rem;
}

.cart-component__homeStockActions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.cart-component__homeStockCancel,
.cart-component__homeStockSave {
    min-height: 3rem;
    border: 1px solid var(--main-color);
    border-radius: 2rem;
    padding: 0.6rem 1rem;
    font: var(--default-regular-text-font);
    cursor: pointer;
}

.cart-component__homeStockCancel {
    color: var(--main-color);
    background: transparent;
}

.cart-component__homeStockSave {
    color: var(--text-on-main-color);
    background: var(--main-color);
}

.cart-component__homeStockSave:disabled {
    opacity: 0.65;
}

/* DESKTOP */
@media (min-width: 960px) {
    .cart-component__host {
        padding-bottom: unset;
    }

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

    .cart-component__homeStockPanel {
        border-radius: var(--island-border-radius);
    }
}

@media (max-width: 599px) {
    .cart-component__purchaseAction {
        align-items: stretch;
    }

    .cart-component__purchaseBtn > button {
        width: 100%;
    }

    .cart-component__purchaseSuccessActions {
        flex-direction: column-reverse;
    }

    .cart-component__purchaseSuccessPrimary,
    .cart-component__purchaseSuccessSecondary {
        width: 100%;
    }
}

.ingredient-selector-modal-component__host {
    display: flex;
    align-items: center;
    justify-content: center;
}

.ingredient-selector-modal-component__content {
    background-color: var(--island-bg-color);
    padding: 1.5rem 1rem;
    border-radius: var(--island-border-radius);
    height: 50vh;
    width: clamp(0px, 90%, 1000px);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ingredient-selector-modal-component__ingredientList {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.ingredient-selector-modal-component__ingredient {
    padding: 1rem 0.5rem;
    border-radius: 0.5rem;

    &:hover {
        cursor: pointer;
        background-color: var(--third-priority-color);
    }
}

.ingredient-selector-modal-component__nothingFoundPlaceholder {
    height: 100%;
}
.cart-header-component__host {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.cart-header-component__heading {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.cart-header-component__title {
    font: var(--heading2-font);
    color: var(--main-grey-color);
}

.cart-header-component__printVersionLink {
    display: flex;
    gap: 0.25rem;
    align-items: center;
    cursor: pointer;
    width: fit-content;
    padding: 0;
    border: 0;
    background: transparent;

    &:focus-visible {
        outline: 2px solid var(--secondary-color);
        outline-offset: 2px;
        border-radius: 0.25rem;
    }
}

.cart-header-component__printVersionText {
    font: var(--default-regular-text-font);
    color: var(--secondary-color);
    text-decoration: underline;
}

.cart-header-component__printIcon {
    width: 1.5rem;
    height: 1.5rem;
    mask-repeat: no-repeat;
    mask-size: cover;
    background-color: var(--secondary-color);
}

.cart-categories-component__host {
    display: flex;
    flex-direction: column;
    gap: var(--safe-zone-one-side-padding);
}
.accordion-component__host {
    display: flex;
    flex-direction: column;
}

.accordion-component__header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    &:hover {
        cursor: pointer;
    }
}

.accordion-component__heading {
    font: var(--heading3-font);
    color: var(--main-grey-color);
}

.accordion-component__arrowIcon {
    width: 1rem;
    height: 1rem;
    mask-repeat: no-repeat;
    mask-size: cover;
    background-color: var(--low-priority-grey-color);
    rotate: -90deg;
    transition: rotate 0.1s ease-in-out;
}

.accordion-component__content {
    transition: opacity 0.1s ease-in;
    opacity: 1;
    margin-top: 1rem;

    @starting-style {
        opacity: 0;
    }
}

.accordion-component__open {
    rotate: 90deg;
}

.accordion-component__hidden {
    display: none;
}
.empty-cart-placeholder-component__host {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    gap: 1rem;
}

.empty-cart-placeholder-component__text {
    font: var(--default-bold-text-font);
    color: var(--low-priority-grey-color);
    font-size: var(--placeholder-font-size);
    text-align: center;
}

/* DESKTOP */
@media (min-width: 960px) {
    .empty-cart-placeholder-component__text {
        width: 400px;
    }
}
.storage-component__host {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--safe-zone-one-side-padding);
    padding-bottom: calc(var(--nav-panel-mobile-height) + 0.5rem);
    overflow-y: auto;
    scrollbar-width: none;
}

.storage-component__emptyStoragePlaceholder {
    height: 100%;
}

.storage-component__categories {
    flex-grow: 1;
}

/* DESKTOP */
@media (min-width: 960px) {
    .storage-component__host {
        padding-bottom: unset;
    }
}
.storage-header-component__host {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.storage-header-component__title {
    font: var(--heading2-font);
    color: var(--main-grey-color);
}

.storage-header-component__heading {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.storage-header-component__valueSummary {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    border-radius: 1rem;
    padding: 0.8rem 1rem;
    color: var(--main-grey-color);
    background: var(--third-priority-color);
}

.storage-header-component__value {
    font: var(--default-bold-text-font);
}

.storage-header-component__valueNote {
    color: var(--low-priority-grey-color);
    font-size: 0.85rem;
}

@media (min-width: 960px) {
    .storage-header-component__valueSummary {
        align-self: flex-start;
        min-width: 22rem;
    }
}

.storage-categories-component__host {
    display: flex;
    flex-direction: column;
    gap: var(--safe-zone-one-side-padding);
}

.storage-categories-component__emptyCategoriesPlaceholder {
    flex-grow: 1;
}

.empty-storage-placeholder-component__host {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    gap: 1rem;
}

.empty-storage-placeholder-component__text {
    font: var(--default-bold-text-font);
    color: var(--low-priority-grey-color);
    font-size: var(--placeholder-font-size);
    text-align: center;
}

/* DESKTOP */
@media (min-width: 960px) {
    .empty-storage-placeholder-component__text {
        width: 400px;
    }
}
.prices-component__host {
    display: flex;
    flex-direction: column;
    gap: var(--safe-zone-one-side-padding);
    padding-bottom: calc(var(--nav-panel-mobile-height));
    height: 100%;
    overflow-y: auto;
    scrollbar-width: none;
}

.prices-component__categories {
    flex-grow: 1;
}

/* DESKTOP */
@media (min-width: 960px) {
    .prices-component__host {
        padding-bottom: unset;
    }
}
.new-price-overlay-component__host {
    display: flex;
    justify-content: flex-end;
}

.new-price-overlay-component__content {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--safe-zone-one-side-padding);
    padding: var(--safe-zone-one-side-padding);

    overflow-y: scroll;
    scrollbar-width: none;

    transition: translate 0.1s ease-in;
    translate: 0 0;

    background-color: var(--app-bg-color);

    margin-bottom: var(--nav-panel-mobile-height);

    @starting-style {
        translate: 100% 0;
    }
}

@media (min-width: 960px) {
    .new-price-overlay-component__content {
        width: clamp(600px, 40vw, 1000px);
        box-shadow: 0 0 20px 10px rgb(0, 0, 0, 0.4);
        margin-bottom: unset;
    }
}
.new-price-overlay-header-component__host {
    width: 100%;

    display: flex;
    flex-direction: column;
}

.new-price-overlay-header-component__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;

    background-color: var(--island-bg-color);
    border-radius: var(--island-border-radius);
    padding: var(--safe-zone-one-side-padding);
}

.new-price-overlay-header-component__backLink {
    width: 1.25rem;
    height: 1.25rem;
    mask-size: cover;
    mask-repeat: no-repeat;
    background-color: var(--main-grey-color);
    
    &:hover {
        cursor: pointer;
    }
}

.new-price-overlay-header-component__title {
    font: var(--heading3-font);
    color: var(--main-grey-color);
}
.price-header-component__host {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.price-header-component__heading {
    display: flex;
    align-items: center;
    gap: 0.75rem;

    font: var(--heading2-font);
    color: var(--main-grey-color);
}

.price-list-categories-component__host {
    display: flex;
    flex-direction: column;
    gap: var(--safe-zone-one-side-padding);
}

.price-list-categories-component__emptyCategoriesPlaceholder {
    flex-grow: 1;
}
.new-price-form-component__host {
    display: flex;
}

.new-price-form-component__form {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: var(--safe-zone-one-side-padding);
}

.new-price-form-component__formControls {
    background-color: var(--island-bg-color);
    border-radius: var(--island-border-radius);
    padding: var(--safe-zone-one-side-padding);

    display: flex;
    flex-direction: column;
    gap: var(--safe-zone-one-side-padding);
}

.new-price-form-component__formControl {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font: var(--default-regular-text-font);
    color: var(--main-grey-color);
}

.new-price-form-component__customNotice {
    margin: 0;
    border-radius: 0.75rem;
    padding: 0.75rem;
    color: var(--secondary-grey-color);
    background: #fff4f7;
    line-height: 1.4;
}

.new-price-form-component__btns {
    display: flex;
    gap: 0.5rem;
    margin-left: auto;
}

.text-input-component__host {
    display: flex;
}

.text-input-component__input {
    width: 100%;
    border: none;
    outline: none;
    border-radius: 0.5rem;
    padding: 0.5rem 1rem;
    background-color: var(--third-priority-color);
    color: var(--secondary-color);
    font: var(--default-regular-text-font);
}
.profile-component__host {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--safe-zone-one-side-padding);
    padding-bottom: var(--nav-panel-mobile-height);
}

.profile-component__footer {
    align-self: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.profile-component__privacyLink {
    color: var(--link-color);
    font: var(--link-font);
    text-align: center;
}

.profile-component__dangerZone {
    width: 100%;
    box-sizing: border-box;
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid #f0c6d1;
    border-radius: 1rem;
    background: #fff8fa;
}

.profile-component__dangerZone h2 {
    margin: 0 0 0.4rem;
    font: var(--default-regular-text-font);
    font-weight: 700;
}

.profile-component__dangerZone p {
    margin: 0 0 0.9rem;
    color: var(--low-priority-grey-color);
    font: var(--small-text-font);
    line-height: 1.45;
}

.profile-component__deleteButton,
.profile-component__confirmDeleteButton {
    min-height: 2.75rem;
    padding: 0.7rem 1rem;
    border: 1px solid #b00032;
    border-radius: 2rem;
    background: #ffffff;
    color: #a0002e;
    font: var(--default-regular-text-font);
    cursor: pointer;
}

.profile-component__deleteOverlay {
    position: fixed;
    z-index: 10001;
    inset: 0;
    display: grid;
    place-items: center;
    box-sizing: border-box;
    padding: 1rem;
    background: rgba(47, 35, 39, 0.72);
}

.profile-component__deleteDialog {
    width: min(520px, 100%);
    box-sizing: border-box;
    padding: 1.5rem;
    border-radius: 1.25rem;
    background: #ffffff;
    box-shadow: 0 24px 70px rgba(34, 21, 25, 0.3);
}

.profile-component__deleteDialog h2 {
    margin: 0 0 0.65rem;
    font: var(--heading3-font);
}

.profile-component__deleteDialog > p {
    line-height: 1.5;
}

.profile-component__deleteDialog label {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-top: 0.85rem;
    font: var(--default-regular-text-font);
}

.profile-component__deleteDialog input {
    box-sizing: border-box;
    width: 100%;
    padding: 0.8rem 1rem;
    border: 1px solid var(--low-priority-grey-color);
    border-radius: 0.8rem;
    font: var(--default-regular-text-font);
}

.profile-component__deleteActions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1rem;
}

.profile-component__deleteActions button:not(.profile-component__confirmDeleteButton) {
    min-height: 2.75rem;
    padding: 0.7rem 1rem;
    border: 1px solid #d7c6cb;
    border-radius: 2rem;
    background: #ffffff;
    font: var(--default-regular-text-font);
    cursor: pointer;
}

.profile-component__confirmDeleteButton {
    background: #a0002e;
    color: #ffffff;
}

.profile-component__deleteStatus {
    min-height: 1.25rem;
    color: #a0002e;
    font: var(--small-text-font);
}

@media (max-width: 600px) {
    .profile-component__deleteActions {
        flex-direction: column-reverse;
    }
}

@media (min-width: 960px) {
    .profile-component__host {
        width: clamp(600px, 40vw, 1000px);
    }
}

.profile-info-overlay-component__host {
    display: flex;
    justify-content: flex-end;
}

.profile-info-overlay-component__content {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--safe-zone-one-side-padding);
    padding: var(--safe-zone-one-side-padding);

    overflow-y: scroll;
    scrollbar-width: none;

    transition: translate 0.1s ease-in;
    translate: 0 0;

    background-color: var(--app-bg-color);

    margin-bottom: var(--nav-panel-mobile-height);

    @starting-style {
        translate: 100% 0;
    }
}

.profile-info-overlay-component__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.profile-info-overlay-component__backLink {
    width: 1.25rem;
    height: 1.25rem;
    mask-size: cover;
    mask-repeat: no-repeat;
    background-color: var(--main-grey-color);
    
    &:hover {
        cursor: pointer;
    }
}

.profile-info-overlay-component__title {
    font: var(--heading3-font);
    color: var(--main-grey-color);
}

@media (min-width: 960px) {
    .profile-info-overlay-component__content {
        width: clamp(600px, 40vw, 1000px);
        box-shadow: 0 0 20px 10px rgb(0, 0, 0, 0.4);
        margin-bottom: unset;
    }
}
.profile-credentials-overlay-component__host {
    display: flex;
    justify-content: flex-end;
}

.profile-credentials-overlay-component__content {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--safe-zone-one-side-padding);
    padding: var(--safe-zone-one-side-padding);

    overflow-y: scroll;
    scrollbar-width: none;

    transition: translate 0.1s ease-in;
    translate: 0 0;

    background-color: var(--app-bg-color);

    margin-bottom: var(--nav-panel-mobile-height);

    @starting-style {
        translate: 100% 0;
    }
}

.profile-credentials-overlay-component__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;

    background-color: var(--island-bg-color);
    border-radius: var(--island-border-radius);
    padding: var(--safe-zone-one-side-padding);
}

.profile-credentials-overlay-component__backLink {
    width: 1.25rem;
    height: 1.25rem;
    mask-size: cover;
    mask-repeat: no-repeat;
    background-color: var(--main-grey-color);
    
    &:hover {
        cursor: pointer;
    }
}

.profile-credentials-overlay-component__title {
    font: var(--heading3-font);
    color: var(--main-grey-color);
}

@media (min-width: 960px) {
    .profile-credentials-overlay-component__content {
        width: clamp(600px, 40vw, 1000px);
        box-shadow: 0 0 20px 10px rgb(0, 0, 0, 0.4);
        margin-bottom: unset;
    }
}
.profile-header-component__host {
    width: 100%;

    display: flex;
    flex-direction: column;
}

.profile-header-component__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.profile-header-component__backLink {
    width: 1.25rem;
    height: 1.25rem;
    mask-size: cover;
    mask-repeat: no-repeat;
    background-color: var(--main-grey-color);
    
    &:hover {
        cursor: pointer;
    }
}

.profile-header-component__title {
    font: var(--heading3-font);
    color: var(--main-grey-color);
}
.photo-upload-component__host {
    display: flex;
}

.photo-upload-component__label {
    display: flex;
    align-items: center;
    gap: 0.5rem;

    background-color: var(--third-priority-color);
    border-radius: 2rem;
    outline: none;
    border: none;
    padding: 0.5rem 1rem;
}

.photo-upload-component__icon {
    width: 1.5rem;
    height: 1.5rem;
    mask-repeat: no-repeat;
    mask-size: cover;
    background-color: var(--secondary-color);
}

.photo-upload-component__uploadText {
    font: var(--default-regular-text-font);
    color: var(--secondary-color);
}

.photo-upload-component__input {
    display: none;
}
.profile-photo-component__host {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--safe-zone-one-side-padding);
}

.profile-photo-component__photo {
    width: 40vw;
    aspect-ratio: 1/1;
    object-fit: cover;
    border-radius: 50%;
}

@media (min-width: 960px) {
    .profile-photo-component__photo {
        width: 300px;
    }
}
.profile-info-form-component__host {
    display: flex;
    flex-direction: column;
    gap: var(--safe-zone-one-side-padding);
}

.profile-info-form-component__form {
    display: flex;
    flex-direction: column;
    gap: var(--safe-zone-one-side-padding);
}

.profile-info-form-component__formControls {
    display: flex;
    flex-direction: column;
    gap: calc(2 * var(--safe-zone-one-side-padding));
}

.profile-info-form-component__formControl {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font: var(--default-regular-text-font);
    color: var(--main-grey-color);
}

.profile-info-form-component__btns {
    display: flex;
    gap: 0.5rem;
    margin-left: auto;
}
.profile-credentials-form-component__host {
    display: flex;
    flex-direction: column;
    gap: var(--safe-zone-one-side-padding);
}

.profile-credentials-form-component__form {
    display: flex;
    flex-direction: column;
    gap: var(--safe-zone-one-side-padding);
}

.profile-credentials-form-component__formControls {
    display: flex;
    flex-direction: column;
    gap: calc(2 * var(--safe-zone-one-side-padding));
}

.profile-credentials-form-component__formControl {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font: var(--default-regular-text-font);
    color: var(--main-grey-color);
}

.profile-credentials-form-component__btns {
    display: flex;
    gap: 0.5rem;
    margin-left: auto;
}
.packages-component__host {
    display: flex;
    flex-direction: column;
    gap: var(--safe-zone-one-side-padding);
    padding-bottom: calc(var(--nav-panel-mobile-height));
    height: 100%;
    overflow-y: auto;
    scrollbar-width: none;
}

/* DESKTOP */
@media (min-width: 960px) {
    .packages-component__host {
        padding-bottom: unset;
    }
}
.package-header-component__host {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.package-header-component__heading {
    display: flex;
    align-items: center;
    gap: 0.75rem;

    font: var(--heading2-font);
    color: var(--main-grey-color);
}
.package-list-category-component__host {
    display: flex;
    flex-direction: column;
    gap: calc(4 * var(--safe-zone-one-side-padding));
}

.package-list-category-component__ingredient {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.package-list-category-component__info {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.package-list-category-component__ingredientName {
    color: var(--main-grey-color);
    font: var(--default-bold-text-font);
}

.package-list-category-component__emptyText {
    color: var(--low-priority-grey-color);
    font: var(--additional-text-font);
}

.package-list-category-component__arrowIcon {
    width: 1rem;
    height: 1rem;
    mask-repeat: no-repeat;
    mask-size: cover;
    background-color: var(--low-priority-grey-color);
    rotate: 180deg;
}
.package-set-edit-overlay-component__host {
    display: flex;
    justify-content: flex-end;
}

.package-set-edit-overlay-component__content {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--safe-zone-one-side-padding);
    padding: var(--safe-zone-one-side-padding);

    overflow-y: scroll;
    scrollbar-width: none;

    transition: translate 0.1s ease-in;
    translate: 0 0;

    background-color: var(--app-bg-color);

    margin-bottom: var(--nav-panel-mobile-height);

    @starting-style {
        translate: 100% 0;
    }
}

@media (min-width: 960px) {
    .package-set-edit-overlay-component__content {
        width: clamp(600px, 40vw, 1000px);
        box-shadow: 0 0 20px 10px rgb(0, 0, 0, 0.4);
        margin-bottom: unset;
    }
}
.package-list-component__host {
    display: flex;
    flex-direction: column;
    gap: var(--safe-zone-one-side-padding);
}
.package-set-edit-overlay-header-component__host {
    width: 100%;

    display: flex;
    flex-direction: column;
}

.package-set-edit-overlay-header-component__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.package-set-edit-overlay-header-component__backLink {
    width: 1.25rem;
    height: 1.25rem;
    mask-size: cover;
    mask-repeat: no-repeat;
    background-color: var(--main-grey-color);
    
    &:hover {
        cursor: pointer;
    }
}

.package-set-edit-overlay-header-component__title {
    font: var(--heading3-font);
    color: var(--main-grey-color);
}
.package-set-edit-overlay-form-component__host {
    display: flex;
}

.package-set-edit-overlay-form-component__form {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.package-set-edit-overlay-form-component__packageSetControls {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;    
}

.package-set-edit-overlay-form-component__addPackageSetControlBtn {
    color: var(--low-priority-grey-color);
    font: var(--additional-bold-text-font);
    font-size: 1rem;
    padding: 0.5rem;
    border: none;
    background-color: transparent;
}

.package-set-edit-overlay-form-component__btns {
    margin-top: 1rem;
    margin-left: auto;
    display: flex;
    gap: 0.5rem;
}
.package-set-control-component__host {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.package-set-control-component__ingredientPackageLabel {
    font: var(--default-regular-text-font);
    color: var(--main-grey-color);
}

.package-set-control-component__measurementUnitLabel, .package-set-control-component__amountInputControl {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font: var(--default-regular-text-font);
    color: var(--secondary-grey-color);
}

.package-set-control-component__deleteBtn {
    position: absolute;
    top: var(--safe-zone-one-side-padding);
    right: var(--safe-zone-one-side-padding);
    background-color: var(--secondary-color);
    width: 1.5rem;
    height: 1.5rem;
    mask-repeat: no-repeat;
    mask-size: cover;
    border: none;

    &:hover {
        cursor: pointer;
    }
}
.testing-admin-component__host {
    display: block;
    color: var(--main-grey-color);
}

.testing-admin-component__page {
    display: grid;
    gap: 1rem;
    min-width: 0;
}

.testing-admin-component__header,
.testing-admin-component__card {
    border-radius: 1rem;
    padding: 1.25rem;
    background: var(--island-bg-color);
}

.testing-admin-component__header h1,
.testing-admin-component__card h2 {
    margin: 0;
}

.testing-admin-component__header p {
    margin: 0.5rem 0 0;
    color: var(--secondary-grey-color);
}

.testing-admin-component__cardHint {
    margin: 0.6rem 0 0;
    color: var(--secondary-grey-color);
}

.testing-admin-component__betaCapacity {
    display: grid;
    gap: 0.75rem;
    margin-top: 1rem;
    border: 1px solid var(--main-color);
    border-radius: 0.9rem;
    padding: 1rem;
    background: #fff8fa;
}

.testing-admin-component__betaCapacityMetrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.65rem;
}

.testing-admin-component__betaCapacityMetrics div {
    display: grid;
    min-width: 0;
    gap: 0.25rem;
    border-radius: 0.75rem;
    padding: 0.75rem;
    background: white;
}

.testing-admin-component__betaCapacityMetrics span {
    color: var(--secondary-grey-color);
    font-size: 0.82rem;
    overflow-wrap: anywhere;
}

.testing-admin-component__betaCapacityMetrics strong {
    color: var(--main-color);
    font-size: 1.45rem;
}

.testing-admin-component__betaCapacityWarning {
    margin: 0;
    color: var(--main-color);
    font-weight: 700;
}

.testing-admin-component__senderNotice {
    margin: 0.7rem 0 0;
    border-radius: 0.8rem;
    padding: 0.75rem 0.9rem;
    color: var(--main-grey-color);
    background: #fff4f7;
    font-size: 0.9rem;
}

.testing-admin-component__groupEmailPrivacy {
    margin: 0;
    border: 1px solid var(--main-color);
    border-radius: 0.8rem;
    padding: 0.8rem 0.9rem;
    color: var(--main-grey-color);
    background: #fff4f7;
    font-weight: 600;
}

.testing-admin-component__groupEmailToolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
}

.testing-admin-component__groupEmailCount {
    margin-left: auto;
    color: var(--main-color);
}

.testing-admin-component__groupEmailRecipients {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 0.55rem;
    min-width: 0;
    margin: 0;
    border: 1px solid var(--third-priority-color);
    border-radius: 0.9rem;
    padding: 0.9rem;
}

.testing-admin-component__groupEmailRecipients legend {
    padding-inline: 0.35rem;
    color: var(--main-grey-color);
    font-weight: 700;
}

.testing-admin-component__groupEmailRecipient {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.25rem 0.55rem;
    min-width: 0;
    border-radius: 0.7rem;
    padding: 0.65rem 0.75rem;
    background: #fffafb;
    cursor: pointer;
}

.testing-admin-component__groupEmailRecipient span,
.testing-admin-component__groupEmailRecipient small {
    overflow-wrap: anywhere;
}

.testing-admin-component__groupEmailRecipient small {
    grid-column: 2;
    color: var(--low-priority-grey-color);
}

.testing-admin-component__groupEmailRecipient:has(input:disabled) {
    cursor: not-allowed;
    opacity: 0.68;
}

.testing-admin-component__summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 0.75rem;
}

.testing-admin-component__metric {
    border-radius: 0.9rem;
    padding: 1rem;
    background: #fff4f7;
}

.testing-admin-component__metric strong {
    display: block;
    color: var(--main-color);
    font-size: 1.75rem;
}

.testing-admin-component__workspace {
    display: grid;
    min-width: 0;
    gap: 0.75rem;
}

.testing-admin-component__tabList {
    display: flex;
    gap: 0.4rem;
    overflow-x: auto;
    padding: 0.4rem;
    border-radius: 1rem;
    background: var(--island-bg-color);
    scrollbar-width: thin;
}

.testing-admin-component__tabButton {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    flex: 0 0 auto;
    min-height: 2.8rem;
    border: 1px solid var(--main-color);
    border-radius: 999px;
    padding: 0.65rem 1rem;
    color: var(--main-color);
    background: white;
    font: inherit;
    cursor: pointer;
}

.testing-admin-component__tabAttention {
    display: grid;
    width: 1.35rem;
    height: 1.35rem;
    place-items: center;
    border-radius: 50%;
    color: white;
    background: var(--main-color);
    font-size: 0.8rem;
    font-weight: 800;
}

.testing-admin-component__tabButton[aria-selected='true'] .testing-admin-component__tabAttention {
    color: var(--main-color);
    background: white;
}

.testing-admin-component__tabButton[aria-selected='true'] {
    border-color: var(--main-color);
    color: white;
    background: var(--main-color);
}

.testing-admin-component__tabPanels,
.testing-admin-component__tabPanel {
    min-width: 0;
}

.testing-admin-component__tabPanel[hidden],
.testing-admin-component__groupBody[hidden] {
    display: none;
}

.testing-admin-component__form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 1rem;
}

.testing-admin-component__form input,
.testing-admin-component__form button,
.testing-admin-component__statusSelect {
    min-height: 2.75rem;
    border-radius: 999px;
    padding: 0.65rem 1rem;
    font: inherit;
}

.testing-admin-component__filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;
    margin-top: 1rem;
}

.testing-admin-component__quickFilters,
.testing-admin-component__subjectTools,
.testing-admin-component__subjectSuggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.testing-admin-component__quickFilters { margin-top: 1rem; }

.testing-admin-component__quickFilter,
.testing-admin-component__subjectSuggestion {
    min-height: 2.4rem;
    border: 1px solid var(--main-color);
    border-radius: 999px;
    padding: 0.45rem 0.8rem;
    color: var(--main-color);
    background: white;
    font: inherit;
    cursor: pointer;
}

.testing-admin-component__quickFilter[data-active='true'] {
    color: white;
    background: var(--main-color);
}

.testing-admin-component__filters .testing-admin-component__statusSelect {
    max-width: 100%;
    border: 1px solid var(--third-priority-color);
    color: var(--main-grey-color);
    background: white;
}

.testing-admin-component__filterCount {
    margin-left: auto;
    color: var(--secondary-grey-color);
    font-size: 0.85rem;
}

.testing-admin-component__form input {
    flex: 1 1 18rem;
    border: 1px solid var(--low-priority-grey-color);
}

.testing-admin-component__form button,
.testing-admin-component__copyButton {
    border: 1px solid var(--main-color);
    color: white;
    background: var(--main-color);
    cursor: pointer;
}

.testing-admin-component__list {
    display: grid;
    gap: 0.65rem;
    margin-top: 1rem;
}

.testing-admin-component__item {
    display: grid;
    gap: 0.35rem;
    border: 1px solid var(--third-priority-color);
    border-radius: 0.8rem;
    padding: 0.85rem;
}

.testing-admin-component__journey {
    border: 1px solid var(--third-priority-color);
    border-radius: 0.9rem;
    overflow: hidden;
}

.testing-admin-component__compactGroup {
    border: 1px solid var(--third-priority-color);
    border-radius: 0.9rem;
    overflow: hidden;
}

.testing-admin-component__groupToggle {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    width: 100%;
    gap: 0.75rem;
    border: 0;
    padding: 0.9rem 1rem;
    color: var(--main-grey-color);
    background: white;
    text-align: left;
    font: inherit;
    cursor: pointer;
}

.testing-admin-component__groupToggle strong {
    min-width: 0;
    overflow-wrap: anywhere;
}

.testing-admin-component__groupSummary {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.4rem;
    color: var(--main-color);
    font-size: 0.86rem;
}

.testing-admin-component__groupArrow {
    color: var(--main-color);
    font-size: 1.4rem;
    line-height: 1;
    transition: transform 160ms ease;
}

.testing-admin-component__groupToggle[aria-expanded='true'] .testing-admin-component__groupArrow {
    transform: rotate(180deg);
}

.testing-admin-component__groupBody {
    display: grid;
    gap: 0.75rem;
    border-top: 1px solid var(--third-priority-color);
    padding: 0.9rem 1rem;
    background: #fffafb;
}

.testing-admin-component__attention {
    color: var(--main-color);
    font-weight: 600;
}

.testing-admin-component__accessBadge {
    border-radius: 999px;
    padding: 0.3rem 0.6rem;
    font-size: 0.8rem;
}

.testing-admin-component__accessActive {
    color: #27623a;
    background: #e7f6eb;
}

.testing-admin-component__accessDisabled {
    color: var(--main-color);
    background: var(--third-priority-color);
}

.testing-admin-component__reminderState {
    border-radius: 999px;
    padding: 0.3rem 0.6rem;
    font-size: 0.8rem;
}

.testing-admin-component__reminderDue {
    color: white;
    background: var(--main-color);
}

.testing-admin-component__reminderNeutral {
    color: var(--main-grey-color);
    background: var(--app-bg-color);
}

.testing-admin-component__draftField {
    display: grid;
    gap: 0.35rem;
    color: var(--secondary-grey-color);
    font-size: 0.88rem;
}

.testing-admin-component__draftField input,
.testing-admin-component__draftField textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--third-priority-color);
    border-radius: 0.8rem;
    padding: 0.75rem;
    color: var(--main-grey-color);
    background: white;
    font: inherit;
}

.testing-admin-component__subjectTools { align-items: flex-start; }

.testing-admin-component__subjectSuggestions[hidden] { display: none; }

.testing-admin-component__subjectSuggestion {
    text-align: left;
}

.testing-admin-component__draftField textarea {
    min-height: 14rem;
    resize: vertical;
    line-height: 1.45;
}

.testing-admin-component__signaturePreview {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border: 1px solid var(--third-priority-color);
    border-radius: 0.8rem;
    padding: 0.8rem;
    background: white;
}

.testing-admin-component__signaturePreview img {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 0.8rem;
}

.testing-admin-component__signaturePreview div {
    display: grid;
    gap: 0.15rem;
}

.testing-admin-component__signaturePreview strong {
    color: var(--main-color);
}

.testing-admin-component__signaturePreview span {
    color: var(--secondary-grey-color);
    font-size: 0.85rem;
}

.testing-admin-component__emailPreviewDetails {
    border: 1px solid var(--third-priority-color);
    border-radius: 0.9rem;
    overflow: hidden;
    background: white;
}

.testing-admin-component__emailPreviewDetails summary {
    padding: 0.8rem 1rem;
    color: var(--main-color);
    background: #fff2f5;
    font-weight: 700;
    cursor: pointer;
}

.testing-admin-component__emailPreview {
    overflow-x: auto;
    padding: 0.75rem;
    background: #f4f1f2;
}

.testing-admin-component__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.testing-admin-component__badge {
    border-radius: 999px;
    padding: 0.35rem 0.65rem;
    font-size: 0.82rem;
}

.testing-admin-component__badgeDone {
    color: #27623a;
    background: #e7f6eb;
}

.testing-admin-component__badgePending {
    color: var(--low-priority-grey-color);
    background: var(--app-bg-color);
}

.testing-admin-component__itemMeta {
    color: var(--low-priority-grey-color);
    font-size: 0.85rem;
}

.testing-admin-component__activityItem {
    display: grid;
    grid-template-columns: minmax(8rem, auto) minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.85rem;
    border: 1px solid var(--third-priority-color);
    border-left-width: 0.35rem;
    border-radius: 0.8rem;
    padding: 0.85rem;
    background: white;
}

.testing-admin-component__activityDetailed {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
}

.testing-admin-component__activityDetailed .testing-admin-component__activityTime {
    display: none;
}

.testing-admin-component__activityGroupBody {
    background: var(--app-bg-color);
}

.testing-admin-component__activitySuccess { border-left-color: #63a779; }

.testing-admin-component__activityError {
    border-left-color: var(--main-color);
    background: #fff8fa;
}

.testing-admin-component__activityTime {
    color: var(--secondary-grey-color);
    font-size: 0.82rem;
    white-space: nowrap;
}

.testing-admin-component__activityContent {
    display: grid;
    min-width: 0;
    gap: 0.25rem;
}

.testing-admin-component__activityFacts {
    display: grid;
    gap: 0.45rem;
    margin-top: 0.25rem;
}

.testing-admin-component__activityFact {
    color: var(--main-grey-color);
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.testing-admin-component__activityFact strong {
    color: var(--secondary-grey-color);
}

.testing-admin-component__activityDescription {
    color: var(--main-grey-color);
}

.testing-admin-component__activityFollowUp {
    color: #27623a;
    font-weight: 600;
}

.testing-admin-component__technicalDetails {
    color: var(--secondary-grey-color);
    font-size: 0.82rem;
}

.testing-admin-component__technicalDetails summary {
    width: fit-content;
    color: var(--main-color);
    cursor: pointer;
}

.testing-admin-component__technicalDetails span {
    display: block;
    margin-top: 0.35rem;
    overflow-wrap: anywhere;
}

.testing-admin-component__linkedNotice {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    border: 1px solid var(--main-color);
    border-radius: 0.75rem;
    padding: 0.65rem;
    color: var(--main-color);
    background: #fff8fa;
}

.testing-admin-component__linkedHighlight {
    outline: 3px solid #f2a8ba;
    outline-offset: 2px;
}

.testing-admin-component__errorOverview {
    display: grid;
    gap: 0.65rem;
    margin-top: 1rem;
    border: 1px solid var(--main-color);
    border-radius: 0.9rem;
    padding: 1rem;
    background: #fff8fa;
}

.testing-admin-component__errorOverview h3,
.testing-admin-component__errorOverview p {
    margin: 0;
}

.testing-admin-component__errorOverviewItem {
    display: grid;
    min-width: 0;
    gap: 0.3rem;
    border-top: 1px solid var(--third-priority-color);
    padding-top: 0.65rem;
}

.testing-admin-component__errorOverviewItem span {
    overflow-wrap: anywhere;
    color: var(--secondary-grey-color);
    font-size: 0.84rem;
}

.testing-admin-component__activityResult {
    border-radius: 999px;
    padding: 0.35rem 0.6rem;
    color: #27623a;
    background: #e7f6eb;
    font-size: 0.78rem;
    white-space: nowrap;
}

.testing-admin-component__activityError .testing-admin-component__activityResult {
    color: var(--main-color);
    background: var(--third-priority-color);
}

.testing-admin-component__itemActions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.testing-admin-component__inviteLink {
    overflow-wrap: anywhere;
    color: var(--link-color);
}

.testing-admin-component__copyButton {
    border-radius: 999px;
    padding: 0.45rem 0.75rem;
}

.testing-admin-component__copyButton:disabled,
.testing-admin-component__outlineButton:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.testing-admin-component__outlineButton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--main-color);
    border-radius: 999px;
    padding: 0.45rem 0.75rem;
    color: var(--main-color);
    background: white;
    text-decoration: none;
}

.testing-admin-component__empty {
    color: var(--low-priority-grey-color);
}

.testing-admin-component__resetBox {
    margin-top: 1rem;
    background: #fff8fa;
}

@media (max-width: 959px) {
    .testing-admin-component__host {
        height: 100%;
        overflow-y: auto;
        padding-bottom: calc(var(--nav-panel-mobile-height) + 1rem);
        scroll-padding-bottom: calc(var(--nav-panel-mobile-height) + 1rem);
    }
}

@media (max-width: 599px) {
    .testing-admin-component__header,
    .testing-admin-component__card { padding: 1rem; }

    .testing-admin-component__activityItem {
        grid-template-columns: 1fr;
        gap: 0.45rem;
    }

    .testing-admin-component__activityResult {
        width: fit-content;
    }

    .testing-admin-component__summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .testing-admin-component__betaCapacityMetrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .testing-admin-component__metric {
        padding: 0.8rem;
    }

    .testing-admin-component__metric strong {
        font-size: 1.4rem;
    }

    .testing-admin-component__tabList {
        margin-inline: -0.15rem;
    }

    .testing-admin-component__tabButton {
        min-height: 2.6rem;
        padding-inline: 0.85rem;
    }

    .testing-admin-component__filters {
        display: grid;
        grid-template-columns: 1fr;
    }

    .testing-admin-component__quickFilters {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .testing-admin-component__quickFilter,
    .testing-admin-component__subjectSuggestion {
        width: 100%;
    }

    .testing-admin-component__filters .testing-admin-component__statusSelect {
        width: 100%;
    }

    .testing-admin-component__filterCount {
        margin-left: 0;
    }

    .testing-admin-component__groupToggle {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0.45rem;
        padding: 0.85rem;
    }

    .testing-admin-component__groupSummary {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-content: flex-start;
    }

    .testing-admin-component__groupArrow {
        grid-column: 2;
        grid-row: 1;
    }

    .testing-admin-component__groupBody {
        padding: 0.8rem;
    }

    .testing-admin-component__copyButton {
        width: 100%;
        min-height: 2.7rem;
    }

    .testing-admin-component__groupEmailToolbar {
        display: grid;
        grid-template-columns: 1fr;
    }

    .testing-admin-component__groupEmailCount {
        margin-left: 0;
    }

    .testing-admin-component__groupEmailRecipients {
        grid-template-columns: 1fr;
        padding: 0.75rem;
    }

    .testing-admin-component__outlineButton {
        width: 100%;
        min-height: 2.7rem;
        box-sizing: border-box;
    }

    .testing-admin-component__draftField textarea {
        min-height: 18rem;
    }
}

.recipe-admin-component__host { display: block; color: var(--main-grey-color); padding-bottom: 6rem; }
.recipe-admin-component__page { display: grid; gap: 1rem; }
.recipe-admin-component__header, .recipe-admin-component__sidebar, .recipe-admin-component__editor { border-radius: 1rem; background: var(--island-bg-color); padding: 1.25rem; }
.recipe-admin-component__header h1, .recipe-admin-component__editor h2, .recipe-admin-component__formSection h3 { margin: .4rem 0; }
.recipe-admin-component__header p, .recipe-admin-component__hint { color: var(--secondary-grey-color); }
.recipe-admin-component__header a { color: var(--main-color); }
.recipe-admin-component__workspace { display: grid; grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr); gap: 1rem; align-items: start; }
.recipe-admin-component__sidebar { display: grid; gap: .75rem; position: sticky; top: 1rem; max-height: calc(100vh - 2rem); }
.recipe-admin-component__search, .recipe-admin-component__field input, .recipe-admin-component__field textarea, .recipe-admin-component__ingredientRow input, .recipe-admin-component__ingredientRow select, .recipe-admin-component__stepRow textarea {
    width: 100%; box-sizing: border-box; border: 1px solid var(--low-priority-grey-color); border-radius: .75rem; padding: .75rem; font: inherit; background: white;
}
.recipe-admin-component__recipeList { display: grid; gap: .6rem; overflow: auto; }
.recipe-admin-component__recipeGroup { overflow: hidden; border: 1px solid var(--third-priority-color); border-radius: .8rem; background: #fffafb; }
.recipe-admin-component__recipeGroupSummary { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: .55rem; padding: .75rem; color: var(--main-grey-color); background: white; cursor: pointer; list-style: none; }
.recipe-admin-component__recipeGroupSummary::-webkit-details-marker { display: none; }
.recipe-admin-component__recipeGroupCount { display: grid; min-width: 1.65rem; height: 1.65rem; place-items: center; border-radius: 999px; color: var(--main-color); background: var(--third-priority-color); font-size: .85rem; }
.recipe-admin-component__recipeGroupArrow { color: var(--main-color); font-size: 1.35rem; line-height: 1; transition: transform 160ms ease; }
.recipe-admin-component__recipeGroup[open] .recipe-admin-component__recipeGroupArrow { transform: rotate(180deg); }
.recipe-admin-component__recipeGroupContent { display: grid; gap: .45rem; border-top: 1px solid var(--third-priority-color); padding: .55rem; }
.recipe-admin-component__emptyList { margin: 0; padding: .8rem; color: var(--secondary-grey-color); line-height: 1.4; }
.recipe-admin-component__recipeButton { display: grid; gap: .2rem; border: 1px solid var(--third-priority-color); border-radius: .75rem; padding: .75rem; text-align: left; color: inherit; background: white; cursor: pointer; }
.recipe-admin-component__recipeButton span { color: var(--secondary-grey-color); font-size: .9rem; }
.recipe-admin-component__selected { border-color: var(--main-color); background: #fff4f7; }
.recipe-admin-component__form { display: grid; gap: 1rem; }
.recipe-admin-component__aiAssistant { display: grid; gap: .8rem; border: 1px solid var(--main-color); border-radius: 1rem; padding: 1rem; background: #fff8fa; }
.recipe-admin-component__aiAssistant summary { color: var(--main-color); font-size: 1.15rem; font-weight: 700; cursor: pointer; }
.recipe-admin-component__aiAssistant[open] summary { margin-bottom: .25rem; }
.recipe-admin-component__aiGrid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .6rem; align-items: center; }
.recipe-admin-component__aiName, .recipe-admin-component__aiTextarea, .recipe-admin-component__ingredientCandidate select { width: 100%; box-sizing: border-box; border: 1px solid var(--low-priority-grey-color); border-radius: .75rem; padding: .75rem; color: inherit; background: white; font: inherit; }
.recipe-admin-component__aiTextarea { resize: vertical; }
.recipe-admin-component__aiResult { display: grid; gap: .65rem; border-top: 1px solid var(--third-priority-color); padding-top: .75rem; }
.recipe-admin-component__aiResult:empty { display: none; }
.recipe-admin-component__sourceList { display: grid; gap: .45rem; margin: 0; padding-left: 1.4rem; }
.recipe-admin-component__sourceList a { color: var(--main-color); overflow-wrap: anywhere; }
.recipe-admin-component__aiSources { border: 1px solid var(--third-priority-color); border-radius: .75rem; padding: .7rem; background: white; }
.recipe-admin-component__aiSources summary { color: var(--main-grey-color); font-size: 1rem; font-weight: 500; }
.recipe-admin-component__aiSources[open] .recipe-admin-component__sourceList { margin-top: .7rem; }
.recipe-admin-component__ingredientCandidate { display: grid; gap: .75rem; border: 1px solid var(--main-color); border-radius: .9rem; padding: .9rem; background: white; }
.recipe-admin-component__candidateGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
.recipe-admin-component__tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .45rem; position: sticky; top: 0; z-index: 3; padding: .45rem; border-radius: .9rem; background: var(--island-bg-color); box-shadow: 0 .35rem 1rem rgba(70, 45, 50, .08); }
.recipe-admin-component__tab { min-height: 2.7rem; border: 1px solid var(--main-color); border-radius: .7rem; padding: .45rem; color: var(--main-color); background: white; font: inherit; cursor: pointer; }
.recipe-admin-component__tabActive { border-color: var(--main-color); color: white; background: var(--main-color); }
.recipe-admin-component__formSection { display: grid; gap: .75rem; border-top: 1px solid var(--third-priority-color); padding-top: .75rem; }
.recipe-admin-component__field { display: grid; gap: .35rem; }
.recipe-admin-component__compactGrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .65rem; }
.recipe-admin-component__rows { display: grid; gap: .6rem; }
.recipe-admin-component__ingredientRow { display: grid; grid-template-columns: minmax(10rem, 2fr) minmax(6rem, .7fr) minmax(7rem, .7fr) auto; gap: .5rem; align-items: center; }
.recipe-admin-component__stepRow { display: grid; grid-template-columns: 1fr auto; gap: .5rem; align-items: start; }
.recipe-admin-component__primaryButton, .recipe-admin-component__secondaryButton, .recipe-admin-component__addButton, .recipe-admin-component__removeButton { min-height: 2.75rem; border-radius: 999px; padding: .6rem 1rem; font: inherit; cursor: pointer; }
.recipe-admin-component__primaryButton { border: 1px solid var(--main-color); color: white; background: var(--main-color); }
.recipe-admin-component__secondaryButton, .recipe-admin-component__addButton { border: 1px solid var(--main-color); color: var(--main-color); background: white; }
.recipe-admin-component__removeButton { border: 0; color: var(--main-color); background: #fff4f7; }
.recipe-admin-component__actions { display: flex; flex-wrap: wrap; gap: .6rem; position: sticky; bottom: .5rem; z-index: 3; padding: .65rem; border-radius: 1rem; background: rgba(255, 255, 255, .96); box-shadow: 0 -.35rem 1.2rem rgba(70, 45, 50, .1); }
.recipe-admin-component__preview { display: block; width: min(100%, 28rem); max-height: 18rem; border-radius: .8rem; object-fit: cover; }
.recipe-admin-component__draftNotice { margin: .75rem 0; border: 1px solid var(--main-color); border-radius: .8rem; padding: .8rem; color: var(--main-color); background: #fff4f7; }
.recipe-admin-component__userPreview { display: grid; gap: .35rem; margin-top: .75rem; border: 1px solid var(--third-priority-color); border-radius: 1rem; padding: 1rem; background: #fff8fa; }
.recipe-admin-component__userPreview span { color: var(--main-color); }
.recipe-admin-component__userPreview h3, .recipe-admin-component__userPreview p { margin: 0; }
.recipe-admin-component__message { min-height: 1.5rem; margin: 0; color: #287a43; }
.recipe-admin-component__form:has(.recipe-admin-component__aiAssistant[open]) > .recipe-admin-component__actions { position: static; }
.recipe-admin-component__error { color: #a51f36; }
@media (max-width: 800px) {
    .recipe-admin-component__host { padding-bottom: 7rem; }
    .recipe-admin-component__header, .recipe-admin-component__sidebar, .recipe-admin-component__editor { padding: 1rem; }
    .recipe-admin-component__workspace { grid-template-columns: 1fr; }
    .recipe-admin-component__sidebar { position: static; max-height: none; }
    .recipe-admin-component__recipeList { max-height: 16rem; }
    .recipe-admin-component__compactGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .recipe-admin-component__tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); top: .25rem; }
    .recipe-admin-component__aiGrid, .recipe-admin-component__candidateGrid { grid-template-columns: 1fr; }
    .recipe-admin-component__tab { font-size: .9rem; }
    .recipe-admin-component__ingredientRow { grid-template-columns: minmax(0, 1fr) 6rem; }
    .recipe-admin-component__ingredientRow select:nth-of-type(2) { grid-column: 1; }
    .recipe-admin-component__ingredientRow .recipe-admin-component__removeButton { grid-column: 2; grid-row: 2; }
    .recipe-admin-component__primaryButton, .recipe-admin-component__secondaryButton, .recipe-admin-component__addButton { width: 100%; }
    .recipe-admin-component__actions { bottom: 5.7rem; }
}

.price-monitor-component__host { display: block; min-height: 100%; background: #fff8fa; color: #3d2630; }
.price-monitor-component__page { width: min(1080px, calc(100% - 2rem)); margin: 0 auto; padding: 2rem 0 5rem; }
.price-monitor-component__header { margin-bottom: 1.5rem; }
.price-monitor-component__header a { color: #8f0031; text-decoration: none; font-weight: 700; }
.price-monitor-component__header h1 { margin: .75rem 0 .35rem; font-size: clamp(1.8rem, 4vw, 2.7rem); }
.price-monitor-component__header p { max-width: 760px; margin: 0; line-height: 1.55; color: #715361; }
.price-monitor-component__summary { display: grid; grid-template-columns: repeat(3, minmax(120px, 1fr)) minmax(260px, 2fr); gap: .75rem; margin-bottom: 1.5rem; }
.price-monitor-component__summary > div { display: flex; flex-direction: column; gap: .25rem; padding: 1rem; border: 1px solid #ead2db; border-radius: 16px; background: white; }
.price-monitor-component__summary strong { font-size: 1.35rem; }
.price-monitor-component__summary span { color: #775a66; font-size: .9rem; }
.price-monitor-component__run { background: #f7e5eb !important; }
.price-monitor-component__section { margin-top: 1.5rem; }
.price-monitor-component__section h2 { margin: 0 0 .8rem; font-size: 1.35rem; }
.price-monitor-component__card { padding: 1.1rem; margin-bottom: .85rem; border: 1px solid #e5cbd5; border-radius: 18px; background: #fff; box-shadow: 0 8px 24px rgba(86, 26, 47, .05); }
.price-monitor-component__cardTop { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.price-monitor-component__cardTop h3 { margin: 0 0 .2rem; font-size: 1.2rem; }
.price-monitor-component__cardTop span { color: #816672; font-size: .85rem; }
.price-monitor-component__cardTop > strong { padding: .35rem .55rem; border-radius: 9px; }
.price-monitor-component__up { color: #9a3412; background: #ffedd5; }
.price-monitor-component__down { color: #166534; background: #dcfce7; }
.price-monitor-component__prices { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin: 1rem 0; }
.price-monitor-component__prices > * { display: flex; flex-direction: column; gap: .35rem; padding: .8rem; border-radius: 12px; background: #fff7f9; }
.price-monitor-component__prices span { color: #765a65; font-size: .85rem; }
.price-monitor-component__prices input { width: 100%; box-sizing: border-box; border: 1px solid #cfaebb; border-radius: 9px; padding: .55rem; font: inherit; font-weight: 700; }
.price-monitor-component__sources { display: flex; flex-wrap: wrap; gap: .5rem; }
.price-monitor-component__sources a { padding: .45rem .65rem; border-radius: 999px; background: #f4e7ec; color: #6f1636; text-decoration: none; font-size: .88rem; }
.price-monitor-component__note { margin: .8rem 0; color: #765a65; line-height: 1.45; }
.price-monitor-component__actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.price-monitor-component__actions button { border: 1px solid #cbaab7; border-radius: 10px; padding: .65rem .9rem; background: white; color: #5d2338; font: inherit; font-weight: 700; cursor: pointer; }
.price-monitor-component__actions button:disabled { opacity: .55; cursor: wait; }
.price-monitor-component__actions .price-monitor-component__approve { border-color: #8f0031; background: #8f0031; color: white; }
.price-monitor-component__history { overflow: hidden; border: 1px solid #e5cbd5; border-radius: 14px; background: white; }
.price-monitor-component__history > div { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(220px, 1fr) minmax(220px, 1fr); gap: .75rem; padding: .8rem 1rem; border-bottom: 1px solid #f0e0e6; }
.price-monitor-component__history > div:last-child { border-bottom: 0; }
.price-monitor-component__history span { color: #715361; }
.price-monitor-component__issues { overflow: hidden; border: 1px solid #f3c7b7; border-radius: 14px; background: #fffaf7; }
.price-monitor-component__issues > div { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(110px, .5fr) minmax(220px, 1fr); gap: .75rem; padding: .75rem 1rem; border-bottom: 1px solid #f5ddd4; }
.price-monitor-component__issues > div:last-child { border-bottom: 0; }
.price-monitor-component__issues a { color: #8f0031; }
.price-monitor-component__issues span { color: #8a4b34; }
.price-monitor-component__empty { padding: 1rem; border-radius: 14px; background: white; color: #765a65; }
@media (max-width: 780px) {
  .price-monitor-component__summary { grid-template-columns: 1fr 1fr; }
  .price-monitor-component__run { grid-column: 1 / -1; }
  .price-monitor-component__prices { grid-template-columns: 1fr; }
  .price-monitor-component__history > div { grid-template-columns: 1fr; gap: .25rem; }
  .price-monitor-component__issues > div { grid-template-columns: 1fr; gap: .25rem; }
}

.privacy-component__host {
    display: block;
    min-height: 100vh;
    box-sizing: border-box;
    padding: clamp(1rem, 4vw, 3rem);
    background: linear-gradient(180deg, #fff6f8 0%, #ffffff 28%);
    color: var(--main-grey-color);
}

.privacy-component__card {
    width: min(860px, 100%);
    box-sizing: border-box;
    margin: 0 auto;
    padding: clamp(1.25rem, 4vw, 3rem);
    border: 1px solid #f1d8df;
    border-radius: 1.5rem;
    background: #ffffff;
    box-shadow: 0 18px 45px rgba(94, 43, 58, 0.08);
}

.privacy-component__card h1 {
    margin: 1.25rem 0 0.5rem;
    font: var(--heading2-font);
    line-height: 1.15;
}

.privacy-component__card h2 {
    margin: 2rem 0 0.65rem;
    font: var(--heading3-font);
}

.privacy-component__card p,
.privacy-component__card li {
    font: var(--default-regular-text-font);
    line-height: 1.65;
}

.privacy-component__card p {
    margin: 0.55rem 0;
}

.privacy-component__card li + li {
    margin-top: 0.4rem;
}

.privacy-component__card a {
    color: var(--link-color);
}

.privacy-component__back {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    font: var(--link-font);
}

.privacy-component__meta {
    color: var(--low-priority-grey-color);
}

.privacy-component__contact {
    margin-top: 1.25rem !important;
    padding: 1rem 1.15rem;
    border-left: 4px solid var(--main-color);
    border-radius: 0.75rem;
    background: #fff4f7;
}

@media (max-width: 600px) {
    .privacy-component__host {
        padding: 0;
        background: #ffffff;
    }

    .privacy-component__card {
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }
}