/* =====================================================================
   EatQuality demo — Restaurant & Recipient portals.
   Loaded after styles.css; reuses its :root tokens.
   ===================================================================== */

.portal{max-width:var(--maxw);margin:0 auto;padding:34px 20px 70px}
.portal-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.portal-head .who{display:flex;align-items:center;gap:12px}
.portal-head .v-avatar{width:46px;height:46px;font-size:24px}
.portal-head h1{font-size:1.5rem;margin:0}
.portal-head .sub{color:var(--muted);font-size:.85rem}
.portal-head .spacer{flex:1}

/* sign-in gate */
.login-stage{display:flex;justify-content:center;padding:50px 16px 80px;
  background:radial-gradient(1100px 460px at 50% -10%, var(--brand-tint-2), var(--brand-tint) 60%)}
.login-card{width:100%;max-width:400px;background:#fff;border:1px solid var(--hairline);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:30px}
.login-card .lc-logo{height:30px;margin-bottom:18px}
.login-card h2{font-size:1.4rem}
.login-card p.muted{font-size:.9rem;margin:6px 0 18px}
.login-card label{font:600 13px Inter;color:var(--muted);display:block;margin:12px 0 4px}
.login-card select,.login-card input{width:100%;border:1.5px solid var(--hairline-2);border-radius:12px;
  padding:13px;font:500 15px Inter;background:#fff}
.login-card select:focus,.login-card input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(254,144,77,.18)}
.login-hint{font-size:.76rem;color:var(--muted);margin-top:14px;text-align:center}

/* segmented tab bar */
.portal-tabs{display:flex;gap:6px;background:#fff;border:1px solid var(--hairline);border-radius:999px;
  padding:5px;margin-bottom:20px;box-shadow:var(--shadow-sm);overflow:auto}
.tab-btn{flex:1;white-space:nowrap;border:0;background:transparent;border-radius:999px;cursor:pointer;
  font:600 13.5px Inter;color:var(--muted);padding:11px 14px}
.tab-btn:hover{color:var(--ink)}
.tab-btn.active{background:var(--ink);color:#fff}

/* status pills (meals + orders) */
.status-pill{font:700 10.5px/1 Inter;padding:6px 9px;border-radius:999px;text-transform:uppercase;
  letter-spacing:.04em;display:inline-block;white-space:nowrap}
.s-active,.s-ready{background:#eafff0;color:#179000}
.s-paused,.s-collected{background:#f0f0f1;color:#777}
.s-preparing,.s-submitted{background:var(--brand-tint);color:var(--brand-deep)}

.stars{color:#f5a623;letter-spacing:1px}
.icon-btn{border:1px solid var(--hairline-2);background:#fff;border-radius:10px;padding:8px 11px;cursor:pointer;
  font:600 12.5px Inter;color:var(--ink)}
.icon-btn:hover{background:var(--brand-tint);border-color:var(--brand)}
.icon-btn.danger:hover{background:#fff1f0;border-color:#ffb4ad;color:#c0392b}

/* ---- restaurant: manage meals ---- */
.meal-row{display:grid;grid-template-columns:54px 1fr auto auto auto auto;gap:14px;align-items:center;
  background:#fff;border:1px solid var(--hairline);border-radius:16px;padding:12px 16px;margin-bottom:10px}
.meal-row.paused{opacity:.62}
.meal-thumb{width:54px;height:54px;border-radius:12px;object-fit:contain;background:var(--brand-tint);padding:4px}
.meal-row .mr-name{font:700 15px "Work Sans";color:var(--ink)}
.meal-row .mr-desc{font-size:.82rem;color:var(--muted);margin-top:2px}
.meal-row .mr-num{text-align:center}
.meal-row .mr-num b{display:block;font:700 16px "Work Sans";color:var(--ink)}
.meal-row .mr-num span{font-size:.7rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.meal-row .mr-actions{display:flex;gap:6px}
@media(max-width:760px){
  .meal-row{grid-template-columns:48px 1fr;grid-auto-rows:auto}
  .meal-row .mr-num,.meal-row .mr-status,.meal-row .mr-actions{grid-column:2}
  .meal-row .mr-actions{justify-content:flex-start;margin-top:4px}
}

/* ---- restaurant: orders ---- */
.order-row{display:grid;grid-template-columns:auto 1fr auto auto;gap:14px;align-items:center;
  background:#fff;border:1px solid var(--hairline);border-radius:14px;padding:13px 16px;margin-bottom:9px}
.order-row .o-code{font:800 13px "Work Sans";letter-spacing:.08em;color:var(--ink);background:var(--brand-tint);
  padding:7px 10px;border-radius:9px}
.order-row .o-meal{font-weight:600;color:var(--ink)}
.order-row .o-meta{font-size:.78rem;color:var(--muted)}

/* modal (add/edit meal + review) */
.modal{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:20px;
  background:rgba(0,0,0,.45)}
.modal.show{display:flex;animation:fade .2s ease}
.modal__card{width:100%;max-width:440px;background:#fff;border-radius:var(--radius-lg);padding:24px;box-shadow:var(--shadow-lg);max-height:90vh;overflow:auto}
.modal__card h3{margin-bottom:6px}
.modal__card label{font:600 13px Inter;color:var(--muted);display:block;margin:12px 0 4px}
.modal__card input,.modal__card textarea,.modal__card select{width:100%;border:1.5px solid var(--hairline-2);
  border-radius:12px;padding:12px;font:500 14px Inter;font-family:Inter}
.modal__card textarea{min-height:74px;resize:vertical}
.modal__actions{display:flex;gap:10px;margin-top:18px}

/* ---- recipient ---- */
.rec-hero{background:linear-gradient(135deg,var(--brand),var(--brand-deep));color:#fff;border-radius:var(--radius-lg);
  padding:22px 24px;display:flex;align-items:center;gap:18px;box-shadow:var(--shadow-md)}
.rec-hero .credit{background:rgba(255,255,255,.18);border-radius:16px;padding:12px 18px;text-align:center}
.rec-hero .credit b{display:block;font:800 2.2rem/1 "Work Sans"}
.rec-hero .credit span{font-size:.74rem;opacity:.9}
.rec-hero h2{color:#fff;margin:0}
.rec-hero p{opacity:.92;font-size:.9rem;margin-top:3px}

.seg{display:inline-flex;background:#fff;border:1px solid var(--hairline);border-radius:999px;padding:4px;margin:18px 0 14px}
.seg button{border:0;background:transparent;border-radius:999px;padding:9px 18px;font:600 13px Inter;color:var(--muted);cursor:pointer}
.seg button.on{background:var(--ink);color:#fff}

.venue-card{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--hairline);
  border-radius:16px;padding:14px;margin-bottom:11px;cursor:pointer;transition:.12s;text-align:left;width:100%}
.venue-card:hover{border-color:var(--brand);box-shadow:var(--shadow-sm);transform:translateY(-1px)}
.v-avatar{width:54px;height:54px;border-radius:14px;background:var(--brand-tint);display:flex;align-items:center;
  justify-content:center;font-size:28px;flex:none}
.venue-card .v-info{flex:1;min-width:0}
.venue-card .v-name{font:700 16px "Work Sans";color:var(--ink)}
.venue-card .v-sub{font-size:.82rem;color:var(--muted)}
.venue-card .v-rating{font-size:.82rem;color:var(--muted);margin-top:2px}
.open-pill{font:700 10px/1 Inter;text-transform:uppercase;letter-spacing:.05em;padding:5px 8px;border-radius:999px;background:#eafff0;color:#179000}
.closed-pill{font:700 10px/1 Inter;text-transform:uppercase;letter-spacing:.05em;padding:5px 8px;border-radius:999px;background:#f0f0f1;color:#888}
.chev{color:var(--hairline-2);font-size:20px}

#rec-map{height:380px;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--hairline);box-shadow:var(--shadow-sm)}
.leaflet-container{font-family:Inter,sans-serif}
.eq-pin{display:flex;align-items:center;justify-content:center;font-size:20px;width:34px;height:34px;
  background:#fff;border:2px solid var(--brand);border-radius:50% 50% 50% 0;transform:rotate(-45deg);box-shadow:var(--shadow-sm)}
.eq-pin span{transform:rotate(45deg)}

/* venue detail */
.detail-head{display:flex;gap:16px;align-items:center;margin-bottom:8px}
.detail-head .v-avatar{width:66px;height:66px;font-size:34px}
.detail-head h2{margin:0}
.detail-meta{color:var(--muted);font-size:.9rem}
.detail-section{background:#fff;border:1px solid var(--hairline);border-radius:16px;padding:18px;margin-top:14px}
.hours-list{list-style:none;display:grid;gap:6px}
.hours-list li{display:flex;justify-content:space-between;font-size:.9rem;color:var(--body);border-bottom:1px dashed var(--hairline);padding-bottom:5px}
.review{padding:11px 0;border-bottom:1px solid var(--hairline)}
.review:last-child{border-bottom:0}
.review .r-top{display:flex;justify-content:space-between;align-items:center}
.review .r-who{font-weight:600;color:var(--ink);font-size:.9rem}
.review .r-text{font-size:.9rem;color:var(--body);margin-top:3px}

.meal-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media(max-width:620px){.meal-grid{grid-template-columns:1fr}}
.meal-card{background:#fff;border:1px solid var(--hairline);border-radius:16px;overflow:hidden;box-shadow:var(--shadow-sm);display:flex;flex-direction:column}
.meal-card.gone{opacity:.55}
.meal-card img{width:100%;height:120px;object-fit:contain;background:var(--brand-tint);padding:10px}
.meal-card .mc-body{padding:14px;flex:1;display:flex;flex-direction:column}
.meal-card .mc-name{font:700 15px "Work Sans";color:var(--ink)}
.meal-card .mc-desc{font-size:.82rem;color:var(--muted);margin:4px 0 8px;flex:1}
.free-badge{font:700 11px/1 Inter;color:#179000;background:#eafff0;padding:5px 8px;border-radius:999px;display:inline-block}

/* order status tracker */
.tracker{display:flex;align-items:center;gap:6px;margin:14px 0}
.tracker .step{flex:1;text-align:center;font:600 11px Inter;color:var(--muted)}
.tracker .step .dot{width:26px;height:26px;border-radius:50%;background:#eee;color:#999;display:flex;align-items:center;
  justify-content:center;margin:0 auto 6px;font-size:13px}
.tracker .step.done .dot{background:var(--success);color:#fff}
.tracker .step.active .dot{background:var(--brand);color:#fff}
.tracker .line{height:2px;flex:1;background:var(--hairline);margin-bottom:18px}
.tracker .line.done{background:var(--success)}

/* star picker */
.star-pick{font-size:30px;color:var(--hairline-2);cursor:pointer;letter-spacing:4px}
.star-pick .on{color:#f5a623}

.empty{text-align:center;color:var(--muted);padding:30px;border:1px dashed var(--hairline-2);border-radius:16px}