/* =========================
   Cross-device consistency
   Put this at the VERY TOP
   ========================= */

/* Prevent iOS Safari text autosizing differences */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Avoid horizontal shift caused by 100vw on mobile (scrollbar/viewport quirks) */
html, body {
  font-family: 'Heebo', 'Rubik', 'Assistant', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}


/* Keep form controls consistent + prevent iOS zoom-on-focus */
input, textarea, select, button {
  font: inherit;
}

/* iOS Safari zooms when font-size < 16px */
@media (max-width: 991.98px) {
  input, textarea, select {
    font-size: 16px;
  }
}

/* Better font rendering parity */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Backdrop-filter fallback (some devices render it differently) */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .home-hero,
  .home-pill,
  .home-search,
  .home-featured,
  .app-navbar {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: #fff !important; /* simple premium fallback */
    /* rgb(233 236 239) !important; */
    /* #fff !important; simple premium fallback */
  }
}

/* Remove border color from .btn-outline-danger */
.btn-outline-danger {
    border-color: transparent !important;
}
/* ----------------------------
   Global typography + spacing
   ---------------------------- */
:root {
    --app-font-size: clamp(15px, 0.95vw + 12px, 17px);
    --app-font-sans: "Assistant", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
    --app-text: #0f172a;
    --app-muted: #64748b;
    --app-line-height: 1.65;
    --app-bg: #f6f7fb;
    --app-surface: #ffffff;
    --app-border: rgba(15, 23, 42, 0.08);
    --app-shadow: 0 .75rem 1.5rem rgba(15, 23, 42, 0.10);
    --app-shadow-soft: 0 .5rem 1rem rgba(15, 23, 42, 0.08);
    --app-radius: 1.25rem;
    --app-radius-sm: .9rem;
    /* --app-focus: 0 0 0 .22rem rgba(13, 110, 253, 0.22); */
    -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}


@media (min-width: 992px) {
  html {
    font-size: clamp(15px, 0.95vw + 12px, 17px);
  }
}

body {
    font-family: var(--app-font-sans);
    color: var(--app-text);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    background: #f5f5f5;
    /* radial-gradient(900px 420px at 110% -10%, rgba(48,188,162,0.10), transparent 55%),
                radial-gradient(900px 420px at -10% 20%, rgba(97,183,255,0.10), transparent 55%),
                var(--app-bg); */
}

/* Prevent background scroll when full-screen mobile nav is open */
html.nav-open,
body.nav-open {
    height: 100%;
    overflow: hidden !important;
}
html.nav-open {
    overscroll-behavior: none;
}
body.nav-open {
    position: fixed;
    width: 100%;
}


/* Close button defaults (hidden on desktop) */
.app-nav-close {
    display: none;
}

main {
    padding-top: 0.25rem;
    padding-bottom: 1.25rem;
}

/* Recipe details action buttons (Edit/Delete) */
.recipe-details-actions .btn {
    padding: .16rem .75rem;
}

/* ----------------------------
   Global polish (buttons, cards, focus)
   ---------------------------- */

a {
    text-underline-offset: 0.14em;
}

/* .btn {
    border-radius: 999px;
} */

/* ----------------------------
   Authenticated UI: use login-green for primary buttons
   (scoped so login/register pages are unaffected)
   ---------------------------- */
body.app-auth .btn.btn-primary,
body.app-auth .btn-primary {
    background-color: #2BB7A3;
    border-color: #2BB7A3;
    color: #ffffff;
}

body.app-auth .btn.btn-primary:hover,
body.app-auth .btn-primary:hover {
    background-color: #2BB7A3;
    border-color: #2BB7A3;
    color: #ffffff;
}

body.app-auth .btn.btn-primary:active,
body.app-auth .btn-primary:active,
body.app-auth .btn.btn-primary.active,
body.app-auth .btn-primary.active {
    background-color: #2BB7A3;
    border-color: #2BB7A3;
    color: #ffffff;
}

body.app-auth .btn.btn-primary:disabled,
body.app-auth .btn-primary:disabled,
body.app-auth .btn.btn-primary.disabled,
body.app-auth .btn-primary.disabled {
    background-color: #2BB7A3;
    border-color: #2BB7A3;
    opacity: 0.65;
}

body.app-auth .btn.btn-outline-primary,
body.app-auth .btn-outline-primary {
    color: #6c757d;
    border-color: #6c757d;
}

body.app-auth .btn.btn-outline-primary:hover,
body.app-auth .btn-outline-primary:hover,
body.app-auth .btn.btn-outline-primary:active,
body.app-auth .btn-outline-primary:active,
body.app-auth .btn.btn-outline-primary.active,
body.app-auth .btn-outline-primary.active {
    background-color: #6c757d;
    border-color: #6c757d;
    color: #ffffff;
}

.btn:focus,
.btn:focus-visible,
.form-control:focus,
.form-select:focus {
    box-shadow: var(--app-focus) !important;
}

.card {
    background: var(--app-surface);
    border-radius: var(--app-radius);
}

.card.shadow-sm {
    box-shadow: var(--app-shadow-soft) !important;
}

h1, h2, h3, h4, h5, h6 {
    line-height: 1.2;
}

.text-muted {
    color: var(--app-muted) !important;
}

/* ----------------------------
   Modern Home page
   ---------------------------- */
.home-hero {
    background: #fff;
    /* radial-gradient(1200px 500px at 90% -10%, rgba(48,188,162,0.20), transparent 60%),
                radial-gradient(900px 420px at -10% 30%, rgba(97,183,255,0.18), transparent 55%),
                linear-gradient(180deg, rgba(255,255,255,0.75), rgba(255,255,255,0.92)); */
    backdrop-filter: blur(6px);
    border-radius: 1.25rem;
}

/* Template-inspired Home v2 */
.home-hero-v2 {
    position: relative;
}

.home-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.16rem 0.6rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.72);
    /* rgb(243 232 255 / var(--tw-bg-opacity, 1)); */
    /* rgba(255,255,255,0.72); */
    border: 1px solid rgba(15, 23, 42, 0.08);
    color: rgba(15, 23, 42, 0.80);
    backdrop-filter: blur(10px);
    font-weight: 500;
}

.home-search {
    background: rgba(255,255,255,0.65);
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 999px;
    padding: 0.0rem;
    backdrop-filter: blur(10px);
    box-shadow: 0 .7rem 1.2rem rgba(15, 23, 42, 0.08);
}

.home-search .input-group {
    align-items: center;
}

.home-search .input-group-text {
    color: rgba(15, 23, 42, 0.55);
    padding-inline-start: 0.9rem;
}

.home-search .form-control {
    background: transparent;
    border: 0;
    box-shadow: none !important;
    padding-inline-start: 0.5rem;
}

.home-search .btn {
    border-radius: 0.35rem !important;
    /* padding-inline: 1.25rem; */
}

.home-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.home-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.85rem;
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(255, 255, 255, 0.55);
    color: rgba(15, 23, 42, 0.80);
    text-decoration: none;
    transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.home-chip:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.75);
    box-shadow: 0 .6rem 1.1rem rgba(15, 23, 42, 0.10);
}

.home-featured {
    background: rgba(255,255,255,0.75);
    backdrop-filter: blur(10px);
}

.home-featured-media {
    height: clamp(280px, 28vw, 460px);
    background: #f5f5f5;
}

/* Home featured image: give it more presence on phones */
@media (max-width: 575.98px) {
    .home-featured-media {
        height: 320px;
    }
}

/* Premium heading for the Home 'latest recipes' section */
.home-latest-title {
    font-weight: 800;
    letter-spacing: 0.2px;
    color: #0b1220;
    text-align: center;
    font-size: clamp(1.55rem, 1.15vw + 1.25rem, 2rem);
}

/* Underline is rendered via `<hr class="my-line">` in the markup (Home latest section) */
.home-latest-title::after {
    content: none;
}


/* Home hero action buttons: keep side-by-side on phones */
@media (max-width: 575.98px) {
    .home-hero-actions .btn {
        padding-inline: 0.9rem;
        font-size: 1rem;
        white-space: nowrap;
    }
}

.recipe-card-media {
    height: 280px;
    background: #f5f5f5;
}

/* Shared recipe cards (Home / Recipes list / Search results) */
.recipe-grid {
    --recipe-grid-gap: 1rem;
}

.recipe-grid .recipe-card {
    background: var(--app-surface);
    border: 1px solid var(--app-border);
}

.recipe-card-media img {
    object-fit: cover;
}

.recipe-owner {
    font-size: 0.95rem;
    color: #e36a6a;
    margin: 0;
}

.recipe-meta-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    background:#6cb8ad29;
    /* #2bb7a329; */
     /* #2bb7a321; */
    /* linear-gradient(135deg, rgba(48,188,162,0.16), rgba(97,183,255,0.14)); */
    /* rgb(220 252 231 / var(--tw-bg-opacity, 1)); */
     /* rgb(255 237 213 / var(--tw-bg-opacity, 1)); */
    /* #20bca2; */
     /* rgba(15, 23, 42, 0.06); */
    /* border: 1px solid rgba(15, 23, 42, 0.10); */
    color:rgb(55 122 113);
     /* rgba(15, 23, 42, 0.78); */
    /* rgb(30 64 175 / var(--tw-text-opacity, 1)); */
    /* rgba(15, 23, 42, 0.78); */
    /* rgb(22 101 52 / var(--tw-text-opacity, 1)); */
    /* rgb(154 52 18 / var(--tw-text-opacity, 1)); */
     /* rgba(15, 23, 42, 0.78); */
    font-size: 0.85rem;
    white-space: nowrap;
    /* box-shadow: 0 .35rem .8rem rgba(15, 23, 42, 0.06); */
    font-weight: 500;
}

.recipe-meta-badge i {
    color: currentColor;
    opacity: 0.9;
}

/* Variant pills (requested): Vue.js + PHP colors */
.recipe-meta-badge--vue {
    --tw-bg-opacity: 1;    
    background: #e9ecef;
    /* rgb(219 234 254 / var(--tw-bg-opacity, 1)); */
    border-color: #e9ecef;
    /* rgb(219 234 254 / var(--tw-bg-opacity, 1)); */
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.6rem;
    /* border: 1px solid rgba(15, 23, 42, 0.10); */
    color: #6c757d;
    /* rgb(30 64 175 / var(--tw-text-opacity, 1)); */
    /* rgba(15, 23, 42, 0.78); */
    font-size: 0.85rem;
    white-space: nowrap;
    /* box-shadow: 0 .35rem .8rem rgba(15, 23, 42, 0.06); */
    font-weight: 500;


}

.recipe-meta-badge--php {
    --tw-bg-opacity: 1;

    background:#6cb8ad29;
     /* #2bb7a329; */
    /* rgb(220 252 231 / var(--tw-bg-opacity, 1)); */
    border-color: rgba(66, 184, 131, 0.28);
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.6rem;
    /* border: 1px solid rgba(15, 23, 42, 0.10); */
    color:rgb(55 122 113);
    /* rgb(17 94 89 / var(--tw-text-opacity, 1)); */
     /* rgba(15, 23, 42, 0.78); */
    font-size: 0.85rem;
    white-space: nowrap;
    /* box-shadow: 0 .35rem .8rem rgba(15, 23, 42, 0.06); */
    font-weight: 500;    
}

/* Category pill color (requested) */
.recipe-meta-badge--category {
    --tw-bg-opacity: 1;
    --tw-text-opacity: 1;
    background:#6cb8ad29;
     /* #2bb7a329; */
    /* :#f5f5f5; */
    /* #ced4da; */
    /* #ffc10745; */
     /* #ffc10745; */
    /* rgb(243 232 255 / var(--tw-bg-opacity, 1)); */
    /* rgb(255 237 213 / var(--tw-bg-opacity, 1)); */
    /* rgb(243 232 255 / var(--tw-bg-opacity, 1)); */
    border-color: rgb(255 238 188);
    /* rgb(243 232 255 / var(--tw-bg-opacity, 1)); */
    color:rgb(55 122 113);
     /* var(--bs-gray-800); */
    /* :#738296; */
    /* var(--bs-gray-700); */
    /* rgb(111 85 9); */
     /* rgb(0 0 0);   */
    /* rgb(88 28 135 / var(--tw-text-opacity, 1)); */
    /* rgb(154 52 18 / var(--tw-text-opacity, 1)); */
    /* rgb(88 28 135 / var(--tw-text-opacity, 1)); */
}

/* Category picker chips (Create/Edit) */
.recipe-category-picker {
    display: flow-root;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.5rem;
    
}

.recipe-category-pill.recipe-meta-badge {
    padding: 0.15rem 1.5rem;
    font-size: 0.82rem;
    line-height: 1.25;
    background: #f5f5f5;
    /* rgb(243 232 255 / var(--tw-bg-opacity, 1)); */
    /* rgba(15, 23, 42, 0.04); */
    border: 1px solid rgba(15, 23, 42, 0.12);
    color: rgba(15, 23, 42, 0.78);
    cursor: pointer;
    user-select: none;
    transition: box-shadow 160ms ease, transform 160ms ease, background 160ms ease, border-color 160ms ease, color 160ms ease;
}

/* Per-category pastel colors (using colors already present in this stylesheet) */
.recipe-category-pill[data-value] {
    --cat-bg: #f5f5f5;
    /* rgba(15, 23, 42, 0.04); */
    --cat-border: rgba(15, 23, 42, 0.12);
    --cat-text: rgba(15, 23, 42, 0.78);
    background: #f5f5f5;
    /* var(--cat-bg); */
    border-color: var(--cat-border);
    color: var(--cat-text);
}

/* Create/Edit: keep all unselected category chips the same color */
.recipe-category-picker[data-target-select="Category"] .recipe-category-pill {
    --tw-bg-opacity: 1;
    --tw-text-opacity: 1;
    --cat-bg:#f5f5f5;
    --cat-border: #f5f5f5;
     /* rgb(246 244 244); */
    /* rgb(219 234 254 / var(--tw-bg-opacity, 1)); */
    /* --cat-border: rgba(30, 64, 175, 0.16); */
    --cat-text: #545a5d;
    /* rgb(30 64 175 / var(--tw-text-opacity, 1)); */
        border-radius: 1.2rem;
}

/* List/Search/SearchResults: same default color before selection */
.recipe-category-picker[data-target-input="category"] .recipe-category-pill {
    --tw-bg-opacity: 1;
    --tw-text-opacity: 1;
    /* --cat-bg: rgb(246 244 244); */
    --cat-border: #f5f5f5;
    background: #f8f9fa;
    /* rgb(219 234 254 / var(--tw-bg-opacity, 1)); */
    /* --cat-border: rgba(30, 64, 175, 0.16); */
    --cat-text: #545a5d;
    /* rgb(30 64 175 / var(--tw-text-opacity, 1)); */
}

/* Purple (requested) */
.recipe-category-pill[data-value="עיקריות"],
.recipe-category-pill[data-value="קינוחים"] {
    --tw-bg-opacity: 1;
    --tw-text-opacity: 1;
    /* --cat-bg: #f5f5f5; */
    /* rgb(243 232 255 / var(--tw-bg-opacity, 1)); */
    /* --cat-border: rgba(88, 28, 135, 0.18); */
    --cat-text: #545a5d;
    background: #f5f5f5;
}

/* Blue (Vue) */
.recipe-category-pill[data-value="מאפים"] {
    --tw-bg-opacity: 1;
    --tw-text-opacity: 1;
    --cat-bg: rgb(219 234 254 / var(--tw-bg-opacity, 1));
    /* --cat-border: rgba(30, 64, 175, 0.16); */
    --cat-text: #f5f5f5;
        background: #f5f5f5;
}

/* Green (PHP) */
.recipe-category-pill[data-value="סלטים"],
.recipe-category-pill[data-value="מרקים"] {
    --tw-bg-opacity: 1;
    --tw-text-opacity: 1;
    --cat-bg: rgb(220 252 231 / var(--tw-bg-opacity, 1));
    /* --cat-border: rgba(66, 184, 131, 0.22); */
    --cat-text: #545a5d;
        background: #f5f5f5;
}

/* Orange (Tailwind-like orange used elsewhere in this repo) */

.recipe-category-pill[data-value="תוספות"] {
    --tw-bg-opacity: 1;
    --tw-text-opacity: 1;
    --cat-bg: rgb(255 237 213 / var(--tw-bg-opacity, 1));
    /* --cat-border: rgba(154, 52, 18, 0.18); */
    --cat-text: #545a5d;

        background: #f5f5f5;
}

.recipe-category-pill:hover {
    box-shadow: var(--app-shadow-soft);
}

.recipe-category-pill:focus-visible {
    box-shadow: var(--app-focus);
}

.recipe-category-pill.is-selected {
    /* --tw-bg-opacity: 1;
    --tw-text-opacity: 1;
    background: rgb(243 232 255 / var(--tw-bg-opacity, 1));
    border-color: rgb(243 232 255 / var(--tw-bg-opacity, 1));
    color: rgb(88 28 135 / var(--tw-text-opacity, 1));
    border-width: 2px; */
    /* border-color: rgba(88, 28, 135, 0.40); */
    box-shadow: inset 0 0 0px 20rem #6cb8ad29, var(--app-shadow-soft);
    /* 0 0 0 .18rem rgba(88, 28, 135, 0.14), var(--app-shadow-soft); */
    /* transform: translateY(-1px); */
    --tw-bg-opacity: 1;
    --tw-text-opacity: 1;
    background: #6cb8ad29;
    /* #ced4da; */
    /* var(--bs-gray-400); */
    /* #ffc10745; */
    /* rgb(243 232 255 / var(--tw-bg-opacity, 1)); */
    /* border-color: var(--bs-gray-400); */
    /* rgb(243 232 255 / var(--tw-bg-opacity, 1)); */
    color:rgb(55 122 113);
    /* var(--bs-gray-800); */
    /* rgb(111 85 9); */
     /* rgb(0 0 0); */
    /* rgb(88 28 135 / var(--tw-text-opacity, 1));     */
}

.recipe-card {
    transition: transform 160ms ease, box-shadow 160ms ease;
}

/* If the anchor is the hovered element (common when the card is wrapped in a link),
   apply the same lift+shadow to the inner card. */
.recipe-grid a:hover .recipe-card,
.recipe-grid a:focus-visible .recipe-card {
    transform: translateY(-2px);
    box-shadow: var(--app-shadow) !important;
}

.recipe-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--app-shadow) !important;
}

.recipe-card:focus-within {
    box-shadow: var(--app-focus) !important;
}

/* ----------------------------
   Recipes/Create polish
   ---------------------------- */
.recipe-ingredients-table {
    border: 1px solid var(--app-border);
    border-radius: 1rem;
    overflow: hidden;
    background: rgba(255,255,255,0.75);
}

.recipe-ingredients-table thead th {
    background: rgba(15, 23, 42, 0.04);
    color: rgba(15, 23, 42, 0.70);
    font-weight: 700;
    border-bottom-color: rgba(15, 23, 42, 0.08) !important;
}

.recipe-ingredients-table td,
.recipe-ingredients-table th {
    border-color: rgba(15, 23, 42, 0.06) !important;
}

.recipe-upload-card {
    background: rgb(245 245 245);
    border-radius: 0.25rem;
}

/* ----------------------------
   Modern navbar + search
   ---------------------------- */

/* Full-screen mobile nav (collapse -> overlay) */
@media (max-width: 991.98px) {
    .app-navbar {
        position: sticky;
        top: 0;
        z-index: 1030;
    }

    /* Make the top bar a consistent compact height (match icon/button size) */
    .app-navbar .container-fluid {
        /* min-height: 60px; */
        padding-block: 0.35rem;
    align-items: center;
    }

    .app-navbar .navbar-brand {
        padding-block: 0;
        line-height: 1;
        display: inline-flex;
        align-items: center;
    }

    .app-navbar .navbar-toggler {
        padding: 0.4rem 0.55rem;
        border-radius: 0;
        border: 0;
        background: transparent;
        line-height: 1;
    }

    .app-navbar .navbar-toggler:focus,
    .app-navbar .navbar-toggler:focus-visible {
        outline: none;
        box-shadow: none;
    }

    .app-navbar .navbar-toggler-icon {
        width: 1.5rem;
        height: 1.5rem;
    }

    /* Custom toggler icon: hamburger -> X when expanded */
    .app-navbar .navbar-toggler .app-toggler-icon {
        position: relative;
        display: inline-block;
        width: 1.5rem;
        height: 0.9rem;
    }

    /* Build the hamburger using 3 bars */
    .app-navbar .navbar-toggler .app-toggler-icon .icon-open,
    .app-navbar .navbar-toggler .app-toggler-icon .icon-open::before,
    .app-navbar .navbar-toggler .app-toggler-icon .icon-open::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        height: 2px;
        background: rgba(15, 23, 42, 0.8);
        border-radius: 2px;
        transition: transform 900ms ease, opacity 900ms ease, top 900ms ease;
    }

    .app-navbar .navbar-toggler .app-toggler-icon .icon-open {
        top: 50%;
        transform: translateY(-50%);
    }

    .app-navbar .navbar-toggler .app-toggler-icon .icon-open::before {
        top: -6px;
    }

    .app-navbar .navbar-toggler .app-toggler-icon .icon-open::after {
        top: 6px;
    }

    /* Build the X using 2 crossing bars */
    .app-navbar .navbar-toggler .app-toggler-icon .icon-close::before,
    .app-navbar .navbar-toggler .app-toggler-icon .icon-close::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 50%;
        height: 2px;
        background: rgba(15, 23, 42, 0.8);
        border-radius: 2px;
        opacity: 0;
        transform: translateY(-50%) rotate(0deg);
        transition: transform 900ms ease, opacity 900ms ease;
    }

    .app-navbar .navbar-toggler .app-toggler-icon .icon-close::before {
        transform: translateY(-50%) rotate(45deg);
    }

    .app-navbar .navbar-toggler .app-toggler-icon .icon-close::after {
        transform: translateY(-50%) rotate(-45deg);
    }

    /* When expanded: hide hamburger, show X */
    .app-navbar .navbar-toggler[aria-expanded="true"] .app-toggler-icon .icon-open {
        opacity: 0;
    }

    .app-navbar .navbar-toggler[aria-expanded="true"] .app-toggler-icon .icon-open::before {
        top: 0;
        opacity: 0;
    }

    .app-navbar .navbar-toggler[aria-expanded="true"] .app-toggler-icon .icon-open::after {
        top: 0;
        opacity: 0;
    }

    .app-navbar .navbar-toggler[aria-expanded="true"] .app-toggler-icon .icon-close::before,
    .app-navbar .navbar-toggler[aria-expanded="true"] .app-toggler-icon .icon-close::after {
        opacity: 1;
    }

    .app-navbar .navbar-collapse {
        position: fixed;
        inset: 0;
        height: 100dvh;
        width: 100vw;
        background: #ffffff;
        padding: 4.25rem 1rem 1.5rem;
        overflow-y: auto;
        transform: translateX(100%);
        transition: transform 250ms ease;
        box-shadow: -0.75rem 0 1.5rem rgba(15, 23, 42, 0.12);
    }

    /* Bootstrap adds .show when expanded */
    .app-navbar .navbar-collapse.show {
        background-color: #f8f9fa;
        background-image: #f5f5f5;
        /* radial-gradient(1200px 500px at 90% -10%, rgba(48, 188, 162, 0.20), transparent 60%), radial-gradient(900px 420px at -10% 30%, rgba(97, 183, 255, 0.18), transparent 55%), linear-gradient(180deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.92)); */
        transform: translateX(0);
        backdrop-filter: blur(12px);

    }

    /* Make the close action easier: reuse the toggler, keep it top-left in RTL */
    .app-navbar .navbar-toggler {
        position: relative;
        z-index: 1031;
    }

    /* Bigger menu items */
    .app-navbar .navbar-nav .nav-link {
        font-size: 1.2rem;
        font-weight: 700;
        padding-block: 0.9rem;
    }

    /* Phone overlay: make all nav links bigger (welcome + login/logout included) */
    .app-navbar .navbar-collapse .nav-link {
        font-size: 1.5rem;
        line-height: 1.25;
    }

    .app-navbar .navbar-nav {
        gap: 0.1rem;
        border-top: 1px solid rgba(15, 23, 42, 0.06);
        padding-top: 0.75rem;
        margin-top: 0.75rem;
    }

    /* Bigger search inside the overlay */
    .app-navbar form[role="search"] {
        width: 100%;
        margin-top: 0.75rem;
        margin-bottom: 0.75rem;
    }

    .app-navbar .app-search {
        width: 100%;
    }

    .app-navbar .app-search .form-control {
        font-size: 1.05rem;
        padding-block: 0.1rem;
    }

    .app-navbar .app-search .btn {
        padding-inline: 1rem;
    }

    .app-navbar .navbar-brand {
        max-width: calc(100% - 3.25rem);
        overflow: visible;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Mobile close (X) button inside the overlay */
    .app-navbar .app-nav-close {
        display: inline-flex;
        position: absolute;
        top: 0.85rem;
        left: 0.85rem;
    width: 44px;
    height: 44px;
        align-items: center;
        justify-content: center;
    border-radius: 0;
    background: transparent;
    border: 0;
        color: rgba(15, 23, 42, 0.75);
        z-index: 1032;
    }

    .app-navbar .app-nav-close:hover {
        color: rgba(15, 23, 42, 0.9);
    }
}
.app-navbar {
    position: sticky;
    top: 0;
    z-index: 1020;
    background:#f5f5f5 !important;
    /* rgb(232 235 238) !important; */
     /* rgba(255,255,255,0.85) !important; */
    backdrop-filter: blur(10px);
}

/* Navbar version label (mobile): shown under the logout button inside the overlay menu */
.app-navbar-version-mobile {
    margin-top: 0;
    padding-top: 0.15rem;
    padding-bottom: 0.9rem;
    font-size: 0.95rem;
}

.app-search .form-control {
    border-radius: 999px;
    background-color: #f5f5f5;
    border-color: #f5f5f5;
}

/* Ensure the whole input-group (including the button) is pill-shaped in all browsers */
.app-search {
    border-radius: 999px;
    overflow: hidden;
}

.app-search .input-group-text,
.app-search .btn,
.app-search .form-control {
    border-radius: 0 !important;
}

.app-search .btn {
    border-radius: 999px;
}

.app-search .btn-outline-secondary {
    border-color: transparent;
    background-color: transparent;
}

.app-search .btn-outline-secondary:hover {
    background-color: rgba(15, 23, 42, 0.06);
}

/* Make the magnifier (input-group-text) background match the search field */
.app-search .input-group-text {
    background-color: #f5f5f5 !important;
    border-color: #f5f5f5 !important;
    color: rgba(15, 23, 42, 0.55);
}

/* Some browsers render the input-group wrapper with a different background; force it to match */
.app-search.input-group {
    background-color: #f5f5f5;
}

/* Search inputs: restyle the built-in clear (X) button (mobile browsers) */
.app-search input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    height: 18px;
    width: 18px;
    cursor: pointer;
    opacity: 0.65;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%236c757d' d='M18.3 5.71a1 1 0 0 0-1.41 0L12 10.59 7.11 5.7A1 1 0 0 0 5.7 7.11L10.59 12 5.7 16.89a1 1 0 1 0 1.41 1.41L12 13.41l4.89 4.89a1 1 0 0 0 1.41-1.41L13.41 12l4.89-4.89a1 1 0 0 0 0-1.4Z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.app-search input[type="search"]::-webkit-search-cancel-button:hover {
    opacity: 0.9;
}

.app-search input[type="search"]::-ms-clear {
    display: none;
    width: 0;
    height: 0;
}

/* Recipe image upload: custom drag & drop area (keeps native file input hidden) */
.recipe-dropzone {
    position: relative; 
    border: 2px dashed rgba(15, 23, 42, 0.22);
    border-radius: 1rem;
    padding: 1rem;
    text-align: start;
    user-select: none;
    transition: background-color .15s ease, border-color .15s ease, opacity .15s ease;
}

.recipe-dropzone-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.recipe-dropzone-title {
    font-weight: 700;
}

.recipe-dropzone.is-dragover {
    background-color: #f5f5f5;
    border-color: rgba(15, 23, 42, 0.35);
}

.recipe-dropzone.is-disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.recipe-dropzone.is-disabled .recipe-dropzone-input {
    pointer-events: none;
}

.recipe-dropzone:not(.is-disabled) {
    cursor: pointer;
}

/* Home page polish */
.home-hero .display-6 {
    letter-spacing: -0.01em;
}

.home-hero {
    box-shadow: 0 .75rem 1.25rem rgba(15, 23, 42, 0.06);
}

html {
  position: relative;
  min-height: 100%;
 
}


.table > :not(caption) > * > * {
    padding: 0.1rem 0.1rem;
    background-color: var(--bs-table-bg);
    border-bottom-width: 1px;
    /*    box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);
*/ /*vertical-align: top;*/
/*    vertical-align: middle;*/
}
tbody, td, tfoot, th, thead, tr {
    border-color: inherit;
    border-style: none;
    border-width: 0;
}

textarea.form-control {
    min-height: calc(1.5em + .75rem + 92px);
    height: 200px;

}

#create-recipe {
    border-radius: 1.25rem;
    
}


#myDropzone {
    border: 3px dashed #ccc;
    text-align: center; 
    padding: 1px 1px 1px 1px; 
    margin-bottom: 25px;
    border-radius: .25rem;
}

#dropzone {
    text-align: center;
    border-radius: 50%;

}

#removeImagee {
    border-radius: 1.25rem;
}
#AddIngredient {
    border-radius: 1.25rem;
}


#image-preview {
    margin-top: 25px;
}

.row > * {

    flex-shrink: 0;
    margin-top: var(--bs-gutter-y);
}

.card-item {
    opacity: 0;
    transition: opacity 1s;
}


#account {
    margin-top: 30%;
}

/* ----------------------------
   Login/Register/ForgotPassword sizing
   ---------------------------- */
/* Split layout for Identity auth pages (left image / right panel) */
#lolo.auth-split {
    min-height: 100vh;
    min-height: 100dvh;
    height: 100dvh;
    /* Full-page background image + centered form */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1.25rem, 3vw, 3rem);

    background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6)), url(/images/logo/register.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

    /* This page is rendered inside a Bootstrap `.container` in `_Layout`.
       Break out to full viewport width so the image is truly left-to-middle. */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);

    /* Avoid page scrollbars caused by 100vw breakout */
    overflow: hidden;
}

#lolo.auth-split .auth-split-left {
    display: none;
}

#lolo.auth-split .auth-split-right {
    background: transparent;
    width: min(92vw, 560px);
    display: flex;
    align-items: center;
    justify-content: center;
    /* Hebrew content should read RTL */
    direction: rtl;
    text-align: right;
}

/* On desktop, move the form to the right half */
@media (min-width: 992px) {
    #lolo.auth-split {
        justify-content: flex-start;
    }

    #lolo.auth-split .auth-split-right {
        width: min(50vw, 560px);
    }
}

#lolo.auth-split .auth-card {
    flex: 0 0 auto;
    width: min(92vw, 520px);
    padding: clamp(1.5rem, 3vw, 2.5rem);
    background: #d7d4cf;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    box-shadow: var(--app-shadow);
    color: var(--app-text);
    text-align: right;

    /* No scrolling anywhere on auth pages */
    max-height: calc(100dvh - 2rem);
    overflow: hidden;
}

#lolo.auth-split .auth-card a {
  color: #6B7280;
  text-decoration: none;
}

#lolo.auth-split .auth-card #login {
    display: inline-block;
    margin-top: -100px;
}

#lolo.auth-split .auth-card a:hover {
    color: var(--app-text);
    /* text-decoration: underline; */
    
}

#lolo.auth-split .auth-card .form-label {
    color: var(--app-text);
}

/* On phones, stack: image on top, form below */
@media (max-width: 767.98px) {
    #lolo.auth-split {
        padding: 1.25rem;
    }
}

/* iPhone-only scroll lock for Identity auth pages.
   Applied via JS only on /Identity/Account/Login|Register|ForgotPassword. */
html.auth-scroll-lock,
body.auth-scroll-lock {
    height: 100%;
    overflow: hidden;
}

html.auth-scroll-lock {
    overscroll-behavior: none;
}

/* Auth pages should cover the full viewport with no top gap */
body.auth-fullscreen > header {
    display: none !important;
}

body.auth-fullscreen > .app-container,
body.auth-fullscreen > .app-container > .app-main {
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
}

/* If the viewport is short (landscape phone/tablet), allow scrolling so fields aren't cut off */
@media (max-height: 560px) {
    #lolo.auth-split {
        height: auto;
        min-height: 100dvh;
        overflow: visible;
    }

    #lolo.auth-split .auth-card {
        max-height: none;
        overflow: visible;
    }
}

body.auth-scroll-lock {
    position: fixed;
    width: 100%;
}

#lolo.auth-split #account,
#lolo.auth-split #registerForm {
    margin-top: 0;
}

#account h1,
#registerForm h1,
#registerForm h2 {
    font-size: clamp(2.4rem, 3vw, 3.15rem);
}

#account h4,
#registerForm h4 {
    font-size: clamp(1.4rem, 2vw, 1.9rem);
}

/* Bigger controls so desktop matches the phone "big" feel */
#account .form-control,
#registerForm .form-control {
    font-size: 1.1rem;
    padding-block: 0.95rem;
}

#login-submit,
#registerSubmit,
#registerForm button[type="submit"] {
    font-size: 1.15rem;
    padding-block: 0.85rem;
}

/* Keep the card slightly narrower on very small screens */
@media (max-width: 575.98px) {
    #lolo.auth-split .auth-card {
        width: min(92vw, 420px);
    }

    /* Make the whole auth form fit in 1 screen (no scroll),
       while keeping normal browser scroll behavior enabled (pull-to-refresh works). */
    #account,
    #registerForm {
        margin-top: 8vh;
    }

    #account h1,
    #registerForm h1,
    #registerForm h2 {
        font-size: 2.15rem;
    }

    #account h4,
    #registerForm h4 {
        font-size: 1.9rem;
    }

    #account .form-control,
    #registerForm .form-control {
        font-size: 1rem;
        padding-block: 0.7rem;
    }

    #login-submit,
    #registerSubmit,
    #registerForm button[type="submit"] {
        font-size: 1.05rem;
        padding-block: 0.7rem;
    }
}

#registerForm {
    /* margin-top: 30%; */
    margin-top: 8vh;
}

.login-input {
    border: 5px solid #00000000;
}

/* ----------------------------
   Login page: pill inputs + wide button (scoped)
   ---------------------------- */
#lolo.auth-split #account .login-input,
#lolo.auth-split #registerForm .login-input {
    margin-bottom: 0.85rem;
}

#lolo.auth-split #account .auth-pill,
#lolo.auth-split #registerForm .auth-pill {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.18);
    padding-inline: 1rem;
    padding-block: 0.15rem;
    box-shadow: 0 .6rem 1.2rem rgba(0, 0, 0, 0.18);
    direction: ltr;
}

#lolo.auth-split #account .auth-pill:focus-within,
#lolo.auth-split #registerForm .auth-pill:focus-within {
    border-color: rgba(32, 188, 162, 0.55);
    box-shadow: 0 0 0 .22rem rgba(32, 188, 162, 0.30);
}

#lolo.auth-split #account .auth-icon,
#lolo.auth-split #registerForm .auth-icon {
    order: 3;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(15, 23, 42, 0.65);
    font-size: 1.05rem;
}

#lolo.auth-split #account .auth-input.form-control,
#lolo.auth-split #registerForm .auth-input.form-control {
    order: 2;
    flex: 1 1 auto;
    min-width: 0;
    background: transparent;
    border: 0;
    box-shadow: none !important;
    padding-inline: 0;
    padding-block: 0.85rem;
    font-size: 1.05rem;
    color: var(--app-text);
    text-align: right;
    direction: rtl;
}

/* Browser autofill can paint inputs light-blue/yellow.
   Force the pill surface color to stay white on auth pages. */
#lolo.auth-split #account .auth-input.form-control:-webkit-autofill,
#lolo.auth-split #account .auth-input.form-control:-webkit-autofill:hover,
#lolo.auth-split #account .auth-input.form-control:-webkit-autofill:focus,
#lolo.auth-split #registerForm .auth-input.form-control:-webkit-autofill,
#lolo.auth-split #registerForm .auth-input.form-control:-webkit-autofill:hover,
#lolo.auth-split #registerForm .auth-input.form-control:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--app-text);
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset;
    box-shadow: 0 0 0 1000px #ffffff inset;
    transition: background-color 9999s ease-out 0s;
}

/* Standardized pseudo-class (supported in newer browsers) */
#lolo.auth-split #account .auth-input.form-control:autofill,
#lolo.auth-split #registerForm .auth-input.form-control:autofill {
    box-shadow: 0 0 0 1000px #ffffff inset;
}

#lolo.auth-split #account .auth-input.form-control::placeholder,
#lolo.auth-split #registerForm .auth-input.form-control::placeholder {
    color: rgba(15, 23, 42, 0.50);
}

#lolo.auth-split #account .auth-toggle,
#lolo.auth-split #registerForm .auth-toggle {
    order: 1;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: rgba(15, 23, 42, 0.65);
    padding: 0.25rem;
    line-height: 0;
    border-radius: 999px;
}

#lolo.auth-split #account .auth-toggle:hover,
#lolo.auth-split #registerForm .auth-toggle:hover {
    color: rgba(15, 23, 42, 0.85);
    background: rgba(15, 23, 42, 0.06);
}

#lolo.auth-split #login-submit {
    border-radius: 999px;
    font-size: 1.15rem;
    padding-block: 0.9rem;
    font-weight: 700;
    background-color: #20bca2 !important;
    border-color: #20bca2 !important;
    color: #ffffff !important;
}

#lolo.auth-split #registerSubmit,
#lolo.auth-split #registerForm button[type="submit"] {
    border-radius: 999px;
    font-size: 1.15rem;
    padding-block: 0.9rem;
    font-weight: 700;
    background-color: #20bca2 !important;
    border-color: #20bca2 !important;
    color: #ffffff !important;
}

#lolo.auth-split #login-submit:hover,
#lolo.auth-split #login-submit:focus {
    background-color: #18a68f !important;
    border-color: #18a68f !important;
}

#lolo.auth-split #registerSubmit:hover,
#lolo.auth-split #registerSubmit:focus,
#lolo.auth-split #registerForm button[type="submit"]:hover,
#lolo.auth-split #registerForm button[type="submit"]:focus {
    background-color: #18a68f !important;
    border-color: #18a68f !important;
}

/* Legacy auth background (replaced by .auth-split-left/.auth-split-right) */


.form-control {
    border-radius: 0.25rem;
    background-color: #f5f5f5;
    border-color: #f5f5f5;
}
#kuku {

    border-radius: 1.25rem;
    max-height: 457px;
    max-width: 645px;
    object-fit: contain;
}

#privacy {
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.9);
     border-radius: 0.25rem; 
     max-width: 50%; 
     max-height: 30%; 
     object-fit: contain;
}

.table-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 5px;
    background-color: #f1f1f1;
    padding: 5px;
    width: 70%; /* adjust the width as needed */
}

.table-header {
    background-color: #4abba4;
    color: white;
    padding: 5px;
    font-size: 24px;
    text-align: center;
}

.table-cell {
    background-color: white;
    color: black;
    padding: 5px;
    /*    font-size: 16px;*/
    text-align: center;
    line-height: var(--bs-body-line-height);
}

.login-register {
    --bs-text-opacity: 1;
    color: rgb(248, 0, 0);
 
}

.remove-Ingredients-table-button {
    color: #96a2ad;
}

.my-line {
    border: none;
    border-top: 2px solid;
    animation: color-change 5s infinite;
    height: 2px;
    width: 100%;
    border-radius: 999px;
}

/* Home latest section underline: keep it short + centered */
.home-latest-title + .my-line {
    /* Match (roughly) the visual width of the title text */
    /* width: fit-content; */
    min-width: 220px;
    max-width: min(520px, 92vw);
    margin-inline: auto;
}

/* ----------------------------
   Recipe Details page
   ---------------------------- */
.recipe-details-hero {
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 .75rem 1.25rem rgba(15, 23, 42, 0.06);
}

.recipe-details-hero-media {
    height: clamp(240px, 32vw, 440px);
    background: #f5f5f5;
}

.recipe-details-hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.recipe-details-section {
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 1.25rem;
}

.recipe-details-section .section-title {
    font-weight: 800;
    letter-spacing: -0.01em;
}

.recipe-details-instructions {
    white-space: pre-wrap;
    line-height: 1.8;
}

.recipe-ingredients-grid {
    display: grid;
    gap: 0.5rem;
}

.recipe-ingredients-grid .ingredient-row {
    display: grid;
    grid-template-columns: 1fr 1fr 2fr;
    gap: 0.5rem;
    padding: 0.55rem 0.65rem;
    border-radius: 0.85rem;
    background: rgba(15, 23, 42, 0.03);
    border: 1px solid rgba(15, 23, 42, 0.06);
}

.recipe-ingredients-grid .ingredient-row > div {
    text-align: center;
}

/* ----------------------------
   Recipe Create/Edit forms
   ---------------------------- */
.recipe-form-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.recipe-form-card {
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 1.25rem;
    box-shadow: 0 .75rem 1.25rem rgba(15, 23, 42, 0.05);
}

.recipe-form-card .section-title {
    font-weight: 800;
    letter-spacing: -0.01em;
}

.recipe-form-help {
    font-size: 0.9rem;
    color: var(--app-muted);
}

.recipe-image-preview {
    width: 100%;
    max-height: 420px;
    /* border-radius: 1rem;
    border: 1px dashed rgba(15, 23, 42, 0.18); */
    background: rgba(15, 23, 42, 0.02);
    object-fit: contain;
    display: none;
}

.recipe-image-preview.is-visible {
    display: block;
}

.recipe-form-actions {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
}
@keyframes color-change {
    0% {
        color: #f28d8d;
    }

    25% {
        color: #ebd489;
    }

    50% {
        color: #96e67f;
    }

    75% {
        color: #73d1cf;
    }

    100% {
        color: #d97de8;
    }
}

/* Slightly nicer navbar links */
.navbar .nav-link {
    border-radius: 999px;
    padding: .5rem .9rem;
}

.navbar .nav-link:hover {
    /* background: rgba(126, 127, 129, 0.05); */
    
}

/* ----------------------------
   Bootstrap Icons helpers
   ---------------------------- */

.app-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 999px;
    background: rgba(48, 188, 162, 0.12);
    color: rgba(15, 23, 42, 0.78);
    border: 1px solid rgba(15, 23, 42, 0.06);
}

.app-icon i {
    font-size: 1.25rem;
    line-height: 1;
}

/* Ensure icons inside buttons align nicely */
.btn .bi,
.nav-link .bi {
    vertical-align: -0.12em;
}

/* Full-height layout so footer sits nicely at the bottom */
.app-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.app-main {
    flex: 1 0 auto;
}

/* Always show vertical scrollbar to prevent layout shift on navbar/menu open */
html {
  overflow-y: scroll;
}

/* Prevent vertical scroll on mobile when navbar is open */
@media (max-width: 768px) {
  body.nav-open,
  html.nav-open {
    overflow: hidden !important;
  }
}