/* MealMuse — gold accent from base.css. */
.search{display:flex;gap:10px;max-width:600px;position:relative}
.search__ico{position:absolute;left:18px;top:50%;transform:translateY(-50%);
  width:17px;height:17px;color:rgba(255,255,255,.7);pointer-events:none}
.search__inp{flex:1;padding:15px 18px 15px 46px;background:rgba(11,29,38,.6);
  backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.22);
  border-radius:var(--r-sm);color:#fff;outline:none}
.search__inp::placeholder{color:rgba(255,255,255,.55)}
.search__inp:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(251,215,132,.16)}
.hero__tags{display:flex;gap:9px;flex-wrap:wrap;margin-top:20px}
.tag{font-size:.8rem;color:rgba(255,255,255,.8);background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.18);padding:6px 14px;border-radius:999px;
  cursor:pointer;transition:.16s;backdrop-filter:blur(6px)}
.tag:hover{color:var(--gold);border-color:var(--gold)}


.badge{display:inline-grid;place-items:center;min-width:19px;height:19px;padding:0 5px;
  border-radius:999px;background:var(--accent);color:#04231a;font-size:.68rem;
  font-weight:800;margin-left:5px}

/* ---- Filters ---- */
.filters{padding:24px 0 18px;border-bottom:1px solid var(--line);display:grid;gap:13px}
.filter-line{display:flex;gap:13px;align-items:flex-start}
.filter-lbl{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;
  color:var(--tx-3);padding-top:9px;flex:none;width:66px}
@media(max-width:640px){.filter-line{flex-direction:column;gap:7px}.filter-lbl{padding-top:0}}
.results-bar{display:flex;align-items:baseline;gap:12px;margin:22px 0 16px}

/* ---- Grid ---- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
@media(max-width:560px){.grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:11px}}
.card-m{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;cursor:pointer;transition:.18s;text-align:left;padding:0;
  display:flex;flex-direction:column}
.card-m:hover{transform:translateY(-4px);border-color:var(--gold)}
.card-m__img{aspect-ratio:4/3;background:var(--bg-3);position:relative;overflow:hidden}
.card-m__img img{width:100%;height:100%;object-fit:cover;opacity:0;transition:.35s}
.card-m__img img.in{opacity:1}
.card-m:hover .card-m__img img{transform:scale(1.05)}
.card-m__body{padding:13px 14px 15px}
.card-m__t{font-weight:700;font-size:.95rem;line-height:1.35;margin-bottom:6px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-m__m{display:flex;gap:6px;flex-wrap:wrap}
.mini{font-size:.68rem;padding:3px 8px;border-radius:999px;background:var(--bg-3);
  border:1px solid var(--line);color:var(--tx-3)}
.card-m__fav{position:absolute;top:8px;right:8px;width:32px;height:32px;border-radius:9px;
  border:0;background:rgba(0,0,0,.55);backdrop-filter:blur(4px);color:#fff;cursor:pointer;
  font-size:15px;display:grid;place-items:center;transition:.15s;z-index:2}
.card-m__fav.on{color:var(--gold)}
.card-m__fav:hover{background:rgba(0,0,0,.75)}

/* ---- Recipe page ---- */
.back{display:inline-flex;align-items:center;gap:6px;color:var(--tx-2);font-size:.88rem;
  background:none;border:0;cursor:pointer;padding:0;margin:24px 0 18px}
.back:hover{color:var(--tx)}
.r-top{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:32px;align-items:start}
@media(max-width:900px){.r-top{grid-template-columns:1fr}}
.r-hero{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);
  aspect-ratio:4/3;background:var(--bg-2)}
.r-hero img{width:100%;height:100%;object-fit:cover}
.r-title{font-size:clamp(1.6rem,3.4vw,2.3rem);margin-bottom:10px}
.r-meta{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.r-acts{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:24px}

.ing{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);
  padding:20px 22px}
.ing h3{font-size:1.05rem;margin-bottom:14px}
.ing ul{list-style:none;margin:0;padding:0}
.ing li{display:flex;justify-content:space-between;gap:14px;padding:9px 0;
  border-bottom:1px solid var(--line);font-size:.92rem}
.ing li:last-child{border-bottom:0}
.ing li span:last-child{color:var(--tx-3);font-size:.85rem;text-align:right;flex:none}
.ing li.done{opacity:.4;text-decoration:line-through}
.ing li{cursor:pointer}

.steps{margin-top:34px}
.steps h3{font-size:1.15rem;margin-bottom:16px}
.step{display:flex;gap:16px;padding:15px 0;border-bottom:1px solid var(--line)}
.step:last-child{border-bottom:0}
.step__n{width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--bg-3);border:1px solid var(--line-2);font-size:.8rem;font-weight:700;
  color:var(--gold)}
.step__t{line-height:1.65;color:var(--tx-2)}

.vid{margin-top:34px;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);
  aspect-ratio:16/9;background:#000}
.vid iframe{width:100%;height:100%;border:0;display:block}

.card-m--noimg .card-m__img{background:var(--bg-3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236c7691'%3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm0 3a3 3 0 110 6 3 3 0 010-6zm0 14a7 7 0 01-5.6-2.8c0-1.9 3.7-2.9 5.6-2.9s5.6 1 5.6 2.9A7 7 0 0112 19z'/%3E%3C/svg%3E") center/40px no-repeat}

/* icon sizing */
.card-m__fav svg{width:15px;height:15px}
.card-m__fav.on svg{fill:currentColor}
.btn .ic{width:15px;height:15px}

/* ---- Servings scaler ---- */
.serves{display:flex;align-items:center;gap:14px;margin-top:18px;padding-top:16px;
  border-top:1px solid var(--line)}
.serves__l{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tx-3)}
.serves__btns{display:flex;gap:6px;margin-left:auto}
.serves__b{padding:6px 13px;background:transparent;border:1px solid var(--line-2);
  border-radius:var(--r-sm);color:var(--tx-2);font-size:.83rem;font-weight:600;
  cursor:pointer;transition:.15s}
.serves__b:hover{border-color:var(--gold);color:var(--gold)}
.serves__b.on{background:var(--gold);border-color:var(--gold);color:#0B1D26}
.ing li [data-qty]{cursor:default}

/* ---- Print: a clean recipe card, no interface ---- */
@media print{
  .filters,.results-bar,.grid,#browse,.serves,.vid,.r-acts,.hero__tags,.search{display:none!important}
  .r-top{display:block}
  .r-hero{border:0;max-width:82mm;aspect-ratio:auto;margin-bottom:8mm}
  .r-hero img{max-height:60mm;object-fit:contain}
  .r-title{font-size:20pt;margin-bottom:4mm}
  .r-meta{margin-bottom:6mm}
  .mini{border:1px solid #bbb;color:#333;background:none}
  .ing{border:1px solid #ccc;padding:5mm;margin-bottom:6mm;break-inside:avoid}
  .ing li{border-bottom:1px solid #e2e2e2;padding:1.5mm 0;font-size:10pt}
  .ing li.done{opacity:1;text-decoration:none}   /* ticks are on-screen only */
  .steps h3{font-size:13pt}
  .step{border-bottom:0;padding:2mm 0;font-size:10pt}
  .step__n{border:1px solid #999;color:#000;width:7mm;height:7mm}
  .step__t{color:#222}
}