/* Blur background slightly for any Bootstrap modal backdrop */
.modal-backdrop.show { backdrop-filter: blur(3px); background-color: rgba(0,0,0,0.25); }

/* Green theme for bold text inside wireframe-styled modals */
.modal-wire strong, .modal-wire .fw-bold, .modal-wire h6 { color: #198754; }

/* Ensure recipe/learning modal ingredient badges wrap nicely */
.modal-wire .badge { font-weight: 600; }
/* ----------------------------------------------------------
   TasteLoop — styles.css
   Theme: Green & White (Bootstrap 5 compatible)
   - Cards & category slider
   - Flag pill
   - Recipe modal right pane & rating
   - Collapsible FAB toolbox
   - Converter / Substitutes / Shopping List modals
   - Footer redesign
---------------------------------------------------------- */

/* Root theme tokens */
:root{
  --tl-green: #198754;            /* BS success */
  --tl-green-600: #157347;
  --tl-green-100: #e9f7ef;
  --tl-ink: #0b1d12;
  --tl-muted: #6c757d;
  --tl-ring: 0 0 0 .25rem rgba(25,135,84,.25);
  --tl-shadow: 0 8px 24px rgba(0,0,0,.08);
  --tl-soft: 0 6px 18px rgba(25,135,84,.12);

  /* UX Palette (from design spec) */
  --ux-primary-500: #17AD4D;
  --ux-primary-700: #008545;
  --ux-primary-100: #B6E1C0;
  --ux-success-500: #06C270;
  --ux-warning-500: #F2C94C;
  --ux-danger-500:  #EB5757;
  --ux-neutral-900: #181616;
  --ux-neutral-600: #666666;
  --ux-neutral-500: #808080;
  --ux-neutral-300: #BFBFBF;
  --ux-neutral-200: #EDEDED;
  --ux-neutral-100: #FAFAFA;

  /* UX Shadows */
  --ux-shadow-1: 3px 3px 32px rgba(24,22,22,0.07);
  --ux-shadow-2: 0 4px 10px rgba(24,22,22,0.07);
}

/* Utilities */
.object-fit-cover{ object-fit: cover; }

/* Badges & buttons */
.badge.text-bg-light.border{ border-color: #e6ece8 !important; }
.btn-success{ box-shadow: var(--tl-soft); }
.btn-outline-success:hover{ background: var(--tl-green); color:#fff; }

/* Navbar */
.navbar{ backdrop-filter: saturate(120%) blur(6px); }

/* Hero carousel height on small screens */
#heroCarousel .ratio{ border-radius: .75rem; overflow: hidden; box-shadow: var(--tl-shadow); }

/* Category arrows */
#catPrev,#catNext{ z-index: 2; border-radius: 999px; width: 38px; height: 38px; padding: 0; }
#catPrev:hover,#catNext:hover{ background: var(--tl-green); color:#fff; }

/* Cards */
.card.shadow-sm{ border: 1px solid #edf2ee; }
.card .card-img-top{ border-top-left-radius: .75rem; border-top-right-radius: .75rem; }
.search-card:hover,
.card.h-100:hover{ transform: translateY(-2px); transition: .15s ease; box-shadow: 0 8px 30px rgba(0,0,0,.09); }

/* Flag pill */
.flag-pill{ display:inline-flex; align-items:center; gap:.45rem; padding:.15rem .6rem; border:1px solid #e6ece8; border-radius: 999px; background:#fff; }
.flag-pill img{ width:18px; height:14px; border-radius:2px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }
.flag-pill span{ font-size:.82rem; color:#223529; }

/* Category card enhancements */
.category-card {
  overflow: hidden;
  position: relative;
}
.category-card .carousel-inner {
  height: 180px;
}
.category-card .carousel-caption {
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(4px);
  padding: 4px 10px;
  border-radius: 16px;
  z-index: 2;
}
.category-card .carousel-control-prev,
.category-card .carousel-control-next {
  opacity: 0;
  transition: opacity 0.3s;
  z-index: 3;
}
.category-card:hover .carousel-control-prev,
.category-card:hover .carousel-control-next {
  opacity: 1;
}
.category-card .carousel-item {
  cursor: pointer;
  height: 180px;
}
.category-card .card-body {
  cursor: pointer;
}

/* Recipe modal */
.modal-content{ border-radius: 14px; border:1px solid #e9f2ed; }
.modal-header{ border-bottom: 1px solid #eef4f0; }
.modal-footer{ border-top: 1px solid #eef4f0; }
.right-pane{ max-height: min(72vh, 720px); overflow: auto; }
.progress{ background:#edf4f0; }
.progress-bar.bg-success{ background: var(--tl-green); }
.rating-stars .star{
  background: transparent; border:0; font-size:1.4rem; line-height:1; cursor:pointer;
  color:#d4d4d4; transition: color .12s, transform .12s;
}
.rating-stars .star:hover{
  transform: scale(1.1);
  color:#fbbf24;
}
.rating-stars .star.active{
  color:#f59e0b;
}
.rating-stars .star:focus{ outline: none; box-shadow: var(--tl-ring); border-radius:4px; }

/* Ingredient list */
[data-r-ingredients] { list-style: none; padding-left: 0; }
[data-r-ingredients] li{ display:flex; align-items: baseline; gap:.35rem; }
.ingredient-qty{ font-weight: 600; color: #0f5132; }

/* FAB toolbox (collapsible) */
.fab{
  position: fixed; bottom: 24px; right: 22px; z-index: 1050;
  display: grid; gap: .5rem; justify-items: end;
}
.fab-main{
  width: 56px; height: 56px; border-radius: 999px; border:0;
  background: var(--tl-green); color:#fff; box-shadow: var(--tl-shadow);
}
.fab-main:focus{ outline: none; box-shadow: var(--tl-ring), var(--tl-shadow); }
.fab-menu{
  display: none; flex-direction: column; gap: .5rem; align-items: stretch;
}
.fab.open .fab-menu{ display: flex; }
.fab-item{
  background:#fff; color:#0f2a1c; border:1px solid #e6ece8; padding:.6rem .9rem; border-radius: .6rem;
  box-shadow: var(--tl-shadow);
}
.fab-item:hover{ background: #f8fbf9; border-color:#dfe8e2; }

/* Converter modal result alert (works even without .alert base) */
#convResult{ margin-top:.5rem; padding:.5rem .75rem; border-radius:.5rem; display:none; }
#convResult:not(.d-none){ display:block; }
#convResult.alert-success{ background: #e9f7ef; color:#0f5132; border:1px solid #cfe9db; }
#convResult.alert-danger{ background: #fff3f1; color:#842029; border:1px solid #f3d0cc; }

/* Substitutes modal hint blocks */
.hint-block{
  border:1px dashed #dfe8e2; border-radius: .75rem; padding: .9rem;
  background: #fcfefd;
}
.hint-title{ font-weight:600; margin-bottom:.35rem; color:#163d2a; }

/* Shopping list */
.list-card{
  display:grid; grid-template-columns: 22px 1fr auto; gap:.75rem;
  align-items: center; border:1px solid #e7efe9; border-radius:.6rem; padding:.55rem .7rem; margin-bottom:.5rem;
}
.list-card.done{ opacity:.6; text-decoration: line-through; }
.list-actions .btn{ border-radius: .5rem; }
#listProgress{ height:8px; background: var(--tl-green); width:0%; border-radius: 999px; transition: width .2s; }

/* FAQ accordion */
.accordion-button:not(.collapsed){ background:#f4faf7; color:#0f2a1c; }

/* Footer redesign */
footer.container{
  background: linear-gradient(180deg,#ffffff 0%,#fbfdfc 100%);
  border: 0 !important; border-radius: 16px; padding: 28px !important;
  box-shadow: var(--tl-shadow);
}
footer h5, footer h6{ color:#123523; }
footer a{ color:#214f35; text-decoration: none; }
footer a:hover{ color: var(--tl-green); text-decoration: underline; }
footer .text-muted{ color: #6c8177 !important; }

/* Tiny helpers */
.small.text-muted{ color:#6c8177 !important; }
.card-body.small .text-muted{ color:#6f7f78 !important; }

/* Responsive tweaks */
@media (max-width: 576px){
  #catPrev,#catNext{ display:none; }
  .fab{ right: 14px; bottom: 16px; }
  .right-pane{ max-height: 64vh; }
}

/* Focus rings for a11y */
.btn:focus, .form-control:focus, .form-select:focus{
  box-shadow: var(--tl-ring);
  border-color: rgba(25,135,84,.35);
}

/* Soft container hr */
hr.container{ border-top:1px solid #edf2ee; opacity:1; }

/* Tooltip-esque hover for search cards title clamp */
.search-card .card-title{
  display:-webkit-box;
  -webkit-line-clamp:2;
  line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* Make carousel controls more visible on light images */
.carousel-control-prev-icon,
.carousel-control-next-icon{
  filter: drop-shadow(0 0 2px rgba(0,0,0,.35));
}

/* ---------- Footer (colored) ---------- */
.site-footer{
  color:#eafff1;
  background: linear-gradient(180deg, var(--tl-green) 0%, var(--tl-green-600) 100%);
}
.site-footer a{ color:#eafff1; text-decoration:none; }
.site-footer a:hover{ color:#fff; text-decoration:underline; }
.site-footer h5,.site-footer h6{ color:#fff; }
.site-footer .social{ color:#eafff1; }
.site-footer .social:hover{ color:#fff; }
.footer-bar{ background: rgba(0,0,0,.12); padding:.75rem 0; color:#eafff1; }
/* Ensure footer logo renders white on green background */
.site-footer .brand-logo{
  filter: brightness(0) invert(1) contrast(1.05);
  opacity: .95;
}

/* ---------- Wireframe modal look (used by Converter/Substitutes/Shopping List) ---------- */
.modal-wire .modal-header{ border-bottom:2px solid #e8efe9; }
.modal-wire .modal-footer{ border-top:2px solid #e8efe9; }
.wf-label{ font-weight:700; letter-spacing:.02em; font-size:.8rem; color:#4f6b5e; }
.wf-block{ border:2px solid #e8efe9; border-radius:10px; padding:1rem; background:#fbfdfb; }
.wf-pills{ display:flex; gap:.5rem; }
.wf-pill{
  border:2px solid #e0ece5; background:#fff; border-radius:8px; padding:.5rem 1rem; font-weight:600;
}
.wf-pill.active,.wf-pill:hover{ background:var(--tl-green); color:#fff; border-color:var(--tl-green); }

/* ---------- FAB: larger & roomier menu ---------- */
.fab-main{ width:64px; height:64px; font-size:26px; }
.fab-menu{ width:240px; } /* gives text buttons breathing room */

/* Learning page: filter cards equal height and scrollable inner controls */
.row.g-3.mb-3 > .col-md-4 > .card {
  min-height: 140px; display:flex; flex-direction:column; justify-content:space-between;
}
.row.g-3.mb-3 .card .d-flex {
  max-height: 68px; overflow:auto; align-items:flex-start; flex-wrap:wrap; padding-right:6px;
}
.row.g-3.mb-3 .card .d-flex::-webkit-scrollbar{ width:8px; }
.row.g-3.mb-3 .card .d-flex::-webkit-scrollbar-thumb{ background: rgba(0,0,0,.08); border-radius:8px; }

/* Difficulty badge on learning cards */
.difficulty-badge{ font-size: .72rem; padding: .25rem .5rem; border-radius: .5rem; font-weight:700; }
.difficulty-badge.easy{ background:#e9f7ef; color:var(--tl-green); border:1px solid #dfeee2; }
.difficulty-badge.medium{ background:#fff7e6; color:#b36b00; border:1px solid #f0e7d2; }
.difficulty-badge.hard{ background:#fdecea; color:#a12626; border:1px solid #f4d2d0; }

/* Learning search input icon style */
.input-group .fa-magnifying-glass{ width:18px; text-align:center; }
.input-group .input-group-text{ border-right:0; }
.input-group .form-control{ border-left:0; }

/* ---------- Buttons polish ---------- */
.btn-outline-success:hover{
  background: var(--tl-green);
  color:#fff;
  border-color: var(--tl-green);
}

/* ---------- UX Buttons (spec-mapped) ---------- */
.btn-ux-primary{
  --btn-bg: var(--ux-primary-500);
  --btn-bg-active: var(--ux-primary-700);
  --btn-fg: #fff;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bg);
  box-shadow: var(--ux-shadow-2);
}
.btn-ux-primary:hover,
.btn-ux-primary:active{
  background: var(--btn-bg-active);
  border-color: var(--btn-bg-active);
  color:#fff;
}
.btn-ux-primary:disabled,
.btn-ux-primary.disabled{
  background: var(--ux-neutral-200);
  border-color: var(--ux-neutral-200);
  color: var(--ux-neutral-500);
  box-shadow: none;
}

.btn-ux-secondary{
  --btn-fg: var(--ux-primary-500);
  background: transparent;
  color: var(--btn-fg);
  border: 2px solid var(--ux-primary-500);
}
.btn-ux-secondary:hover,
.btn-ux-secondary:active{
  background: rgba(23,173,77,0.06);
  border-color: var(--ux-primary-700);
  color: var(--ux-primary-700);
}
.btn-ux-secondary:disabled,
.btn-ux-secondary.disabled{
  border-color: var(--ux-neutral-300);
  color: var(--ux-neutral-500);
  background: transparent;
}

.btn-ux-tertiary{
  background: transparent;
  border: 0;
  color: var(--ux-primary-500);
  font-weight: 600;
}
.btn-ux-tertiary:hover,
.btn-ux-tertiary:active{ color: var(--ux-primary-700); }
.btn-ux-tertiary:disabled{ color: var(--ux-neutral-500); }

/* Icon button (circular) */
.btn-ux-icon{
  width: 44px; height: 44px; border-radius: 999px; padding: 0;
  display:inline-grid; place-items:center;
  background: var(--ux-primary-500); color:#fff; border: 1px solid var(--ux-primary-500);
  box-shadow: var(--ux-shadow-2);
}
.btn-ux-icon.btn-sm{ width:36px; height:36px; }
.btn-ux-icon:hover, .btn-ux-icon:active{ background: var(--ux-primary-700); border-color: var(--ux-primary-700); }
.btn-ux-icon:disabled{ background: var(--ux-neutral-200); border-color: var(--ux-neutral-200); color: var(--ux-neutral-500); box-shadow:none; }

/* Quiz: ensure correct answer uses green theme even inside modals */
#quizModal .btn-success{
  background: var(--tl-green);
  border-color: var(--tl-green);
  color:#fff;
}
#quizModal .btn-success:hover{ background: var(--tl-green-600); border-color: var(--tl-green-600); }
#quizModal .btn-danger{ background:#dc3545; border-color:#dc3545; color:#fff; }

/* Substitutes modal layout polish */
#subsModal .list-group{ max-height: 420px; overflow:auto; }
#subsModal #subsList{ padding:0; max-height:400px; overflow:auto; }
/* ensure substitutes text matches site font and sizing */
#subsModal, #subsModal .modal-content, #subsModal .list-group, #subsModal .subs-item, #subsModal .subs-detail{ font-family: inherit; font-size: 0.95rem; color: inherit; }
.subs-detail{ min-height: 80px; padding: 0.75rem 1rem; border-radius: .5rem; border:1px solid #e6ece8; background: #fff; }
.subs-item{ padding: .8rem; border:1px solid #e6ece8; margin-bottom:.5rem; border-radius:.4rem; cursor:pointer; background: #fff; }
.subs-item:hover{ background:#f7fbf9; }
.subs-item.active{ background: var(--tl-green); color:#fff; border-color: var(--tl-green); }
/* ensure all nested text stays readable on green */
#subsModal .subs-item.active *,
#subsModal .subs-item.active strong,
#subsModal .subs-item.active .small,
#subsModal .subs-item.active .subs-qty{ color:#fff !important; }
.subs-item .subs-qty{ float:right; color:#6c757d; font-size:.9rem; }
.subs-original small{ font-weight:700; }
.subs-card{ border:1px solid #e9f2ed; border-radius:.5rem; background:#fff; }
.subs-badge{ background:#eef6ef; color:var(--tl-green); padding:.35rem .55rem; border-radius:.45rem; font-weight:700; }
.subs-section{ display:flex; gap:1rem; align-items:flex-start; }
.subs-left{ width: 38%; }
.subs-right{ flex:1; }

/* ---------- Recipe modal images ---------- */
#recipeImgCarousel .carousel-item img{ width:100%; height:100%; object-fit:cover; }

/* ---------- Prefer focus-visible (a11y) ---------- */
:focus:not(:focus-visible){ box-shadow:none !important; }

/* === Card redesign (match JS .recipe-card structure) === */
.recipe-card{
  border: 1px solid #edf2ee;
  border-radius: .85rem;
  background: #fff;
  box-shadow: var(--tl-shadow);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  overflow: hidden;
}
.recipe-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 14px 40px rgba(0,0,0,.10);
  border-color: #e5efe9;
}
.recipe-card .card-body{ padding: .9rem .95rem; }
.recipe-card .card-title{ line-height:1.25; }
.recipe-card .meta{ color:#6f7f78; font-size:.82rem; }

/* image wrapper + overlay nav dots (prev/next) */
.recipe-card .img-wrap{
  position: relative;
  height: 210px;
  background:#f6faf8;
}
.recipe-card .img-wrap img{
  width: 100%; height: 100%; object-fit: cover;
  display:block;
}
.recipe-card .nav-dot{
  /* toned-down nav appearance: not a large circular green control */
  position:absolute; top:50%; transform:translateY(-50%);
  width:34px; height:34px; border-radius:.25rem; border:1px solid rgba(11,29,18,0.08);
  background: rgba(255,255,255,0.90); color:#0b1d12;
  display:grid; place-items:center;
  box-shadow: var(--tl-shadow);
  line-height:1; font-weight:700;
}
.recipe-card .nav-dot:hover{ background:#fff; color:var(--tl-green); }
.recipe-card .nav-dot.prev{ left: .5rem; }
.recipe-card .nav-dot.next{ right: .5rem; }

/* Prevent focus rings or other page-level focus styles from producing the large green circle
   and keep the small nav buttons visually on top of any background elements. */
.recipe-card .nav-dot:focus{ outline: none; box-shadow: none; }
.recipe-card .nav-dot{ z-index: 3; }

/* Search cards reuse same vibe */
.search-card{ border-radius:.85rem; overflow:hidden; border:1px solid #edf2ee; box-shadow:var(--tl-shadow); }
.search-card:hover{ transform: translateY(-3px); box-shadow: 0 14px 40px rgba(0,0,0,.10); }

/* === “More categories” smooth expand (prevents button jump) ===
   JS toggles .open on #moreCategories */
#moreCategories{
  /* keep layout but hide when collapsed */
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height .35s ease, opacity .3s ease, margin-top .2s ease;
  margin-top: 0;
}
#moreCategories.open{
  /* big enough to fit all rows; adjust if you have >6 rows */
  max-height: 2400px;
  opacity: 1;
  margin-top: .5rem !important;
}

/* On tiny screens, give cards a taller image for aspect */
@media (max-width: 576px){
  .recipe-card .img-wrap{ height: 240px; }
}

/* === Footer social buttons (Instagram / Facebook / X) ===
   Add anchor class="social-link" around your <i> icons */
.site-footer .social-link{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; margin-right:.4rem;
  border-radius:999px; background: rgba(255,255,255,.14);
  transition: background .15s ease, transform .15s ease;
}
.site-footer .social-link:hover{ background: rgba(255,255,255,.22); transform: translateY(-2px); }
.site-footer .social-link i{ font-size:18px; }

/* === Minor polish so the “More categories” button isn’t crowded */
#btnMoreCats{ min-width: 170px; }

/* Keep carousel images crisp inside modal (already present) */
#recipeImgCarousel .carousel-item img{ width:100%; height:100%; object-fit:cover; }

/* Scrollable recipe grid area on Recipes page */
.recipes-board{
  max-height: calc(100vh - 340px); /* keeps footer visible */
  overflow-y: auto;
  overflow-x: hidden; /* remove horizontal scrollbar, keep vertical */
  padding-right: 2px; /* avoid scrollbar overlap */
}

/* Compact selects in controls row */
#recFilterCategory, #recFilterArea { min-width: 160px; }

/* ensure modals are above blur and fully interactive */
.modal { z-index: 1080; }
.modal-backdrop { z-index: 1075; }

/* ---------- UX Grid helper ---------- */
.grid-ux-4{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 992px){ .grid-ux-4{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 576px){ .grid-ux-4{ grid-template-columns: 1fr; } }
.container-ux{ padding-left:20px; padding-right:20px; }