/* SmartFoodAdvisor P3C Mobile & PWA hardening — 20260820_p3d_push_mvp_r1 */
:root{
  --sfa-safe-top: env(safe-area-inset-top, 0px);
  --sfa-safe-right: env(safe-area-inset-right, 0px);
  --sfa-safe-bottom: env(safe-area-inset-bottom, 0px);
  --sfa-safe-left: env(safe-area-inset-left, 0px);
}

[hidden]{ display:none !important; }

.topbar{
  padding-top:max(14px, calc(12px + var(--sfa-safe-top))) !important;
  padding-left:max(18px, calc(12px + var(--sfa-safe-left))) !important;
  padding-right:max(18px, calc(12px + var(--sfa-safe-right))) !important;
}

@media (display-mode: standalone), (display-mode: fullscreen), (display-mode: minimal-ui){
  body{ min-height:100dvh; }
}

@media (pointer:coarse){
  .iconbtn{
    min-width:44px !important;
    min-height:44px !important;
  }
  .dropdown-item,
  .btn,
  button.sfa-plan-toggle{
    min-height:44px;
  }
}

@media (max-width:720px){
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea{
    font-size:16px !important;
  }

  body{
    padding-bottom:0 !important;
  }

  body #fixedFooter,
  body.page-pantry #fixedFooter{
    position:relative !important;
    left:auto !important;
    right:auto !important;
    bottom:auto !important;
    margin-top:24px !important;
    padding:12px max(14px, calc(10px + var(--sfa-safe-right))) calc(12px + var(--sfa-safe-bottom)) max(14px, calc(10px + var(--sfa-safe-left))) !important;
    z-index:20 !important;
  }

  body #fixedFooter .footer-links{
    gap:4px 12px !important;
  }

  body #fixedFooter .footer-links a{
    min-height:44px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
}

@media (min-width:721px){
  #fixedFooter{
    padding-bottom:max(10px, calc(7px + var(--sfa-safe-bottom))) !important;
  }
}

@media (max-width:720px){
  .floating-back{
    right:max(14px, calc(10px + var(--sfa-safe-right))) !important;
    bottom:max(14px, calc(10px + var(--sfa-safe-bottom))) !important;
    min-width:44px !important;
    min-height:44px !important;
  }
}

.sfa-pwa-menu-item{
  align-items:center !important;
  gap:10px !important;
  text-align:left !important;
}
.sfa-pwa-menu-icon{
  width:24px;
  height:24px;
  border-radius:8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(31,122,90,.10);
  color:#1f7a5a;
  font-size:17px;
  font-weight:900;
  flex:0 0 auto;
}

.sfa-pwa-settings-card{
  margin-top:22px;
}
.sfa-pwa-settings-content{
  display:grid;
  grid-template-columns:auto minmax(0, 1fr) auto;
  gap:18px;
  align-items:center;
  max-width:820px;
  margin:0 auto;
  padding:18px;
  border:1px solid rgba(31,122,90,.16);
  border-radius:22px;
  background:linear-gradient(135deg, rgba(240,253,244,.95), rgba(239,246,255,.95));
}
.sfa-pwa-settings-icon{
  width:68px;
  height:68px;
  border-radius:18px;
  box-shadow:0 12px 28px rgba(15,23,42,.13);
}
.sfa-pwa-settings-copy strong{
  display:block;
  color:#16233f;
  font-size:17px;
  line-height:1.25;
  margin-bottom:5px;
}
.sfa-pwa-settings-copy span{
  display:block;
  color:#64748b;
  font-weight:700;
  line-height:1.45;
}
.sfa-pwa-settings-actions{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:8px;
}
.sfa-pwa-install-button{
  appearance:none;
  border:0;
  border-radius:999px;
  min-height:46px;
  padding:11px 18px;
  background:#1f7a5a;
  color:#fff;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 10px 24px rgba(31,122,90,.18);
}
.sfa-pwa-install-button:hover{ filter:brightness(.97); }
.sfa-pwa-installed-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  border-radius:999px;
  padding:8px 12px;
  background:#dcfce7;
  color:#166534;
  font-size:13px;
  font-weight:900;
}

@media (max-width:680px){
  .sfa-pwa-settings-content{
    grid-template-columns:auto minmax(0, 1fr);
    padding:16px;
  }
  .sfa-pwa-settings-icon{
    width:58px;
    height:58px;
    border-radius:16px;
  }
  .sfa-pwa-settings-actions{
    grid-column:1 / -1;
    width:100%;
    align-items:stretch;
  }
  .sfa-pwa-install-button{ width:100%; }
}

.sfa-pwa-dialog-open{ overflow:hidden !important; }
.sfa-pwa-dialog-root{
  position:fixed;
  inset:0;
  z-index:22000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:calc(18px + var(--sfa-safe-top)) calc(18px + var(--sfa-safe-right)) calc(18px + var(--sfa-safe-bottom)) calc(18px + var(--sfa-safe-left));
}
.sfa-pwa-dialog-backdrop{
  position:absolute;
  inset:0;
  background:rgba(15,23,42,.54);
  backdrop-filter:blur(5px);
}
.sfa-pwa-dialog{
  position:relative;
  width:min(460px, 100%);
  max-height:calc(100dvh - 36px - var(--sfa-safe-top) - var(--sfa-safe-bottom));
  overflow:auto;
  background:#fff;
  color:#16233f;
  border:1px solid rgba(15,23,42,.10);
  border-radius:28px;
  padding:28px 24px 22px;
  box-shadow:0 30px 80px rgba(15,23,42,.28);
  text-align:center;
  outline:none;
}
.sfa-pwa-dialog-close{
  position:absolute;
  top:12px;
  right:12px;
  width:44px;
  height:44px;
  border:0;
  border-radius:14px;
  background:#f1f5f9;
  color:#334155;
  font-size:26px;
  line-height:1;
  cursor:pointer;
}
.sfa-pwa-dialog-icon{
  display:block;
  margin:0 auto 14px;
  border-radius:20px;
}
.sfa-pwa-dialog h2{
  margin:0 42px 8px;
  font-size:23px;
  line-height:1.15;
}
.sfa-pwa-dialog-intro{
  margin:0 auto 18px;
  color:#64748b;
  font-weight:700;
  line-height:1.5;
}
.sfa-pwa-guide-steps{
  margin:0;
  padding:0;
  list-style:none;
  counter-reset:sfa-pwa-step;
  display:grid;
  gap:10px;
  text-align:left;
}
.sfa-pwa-guide-steps li{
  counter-increment:sfa-pwa-step;
  position:relative;
  padding:13px 14px 13px 48px;
  border-radius:16px;
  background:#f8fafc;
  border:1px solid rgba(15,23,42,.08);
  line-height:1.4;
}
.sfa-pwa-guide-steps li::before{
  content:counter(sfa-pwa-step);
  position:absolute;
  left:13px;
  top:11px;
  width:26px;
  height:26px;
  border-radius:999px;
  background:#1f7a5a;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  font-weight:900;
}
.sfa-pwa-share-symbol{ color:#1f7a5a; font-size:20px; font-weight:900; }
.sfa-pwa-guide-note{ color:#64748b; font-size:13px; line-height:1.45; margin:14px 4px 0; }
.sfa-pwa-dialog-done{
  width:100%;
  min-height:46px;
  margin-top:18px;
  border:0;
  border-radius:999px;
  background:#1f7a5a;
  color:#fff;
  font-weight:900;
  cursor:pointer;
}

.sfa-pwa-install-banner{
  position:fixed;
  right:max(16px, calc(10px + var(--sfa-safe-right)));
  bottom:max(78px, calc(68px + var(--sfa-safe-bottom)));
  z-index:16000;
  width:min(440px, calc(100vw - 32px - var(--sfa-safe-left) - var(--sfa-safe-right)));
  display:grid;
  grid-template-columns:auto minmax(0, 1fr);
  gap:12px;
  align-items:center;
  padding:16px;
  background:rgba(255,255,255,.98);
  border:1px solid rgba(15,23,42,.10);
  border-radius:22px;
  box-shadow:0 24px 60px rgba(15,23,42,.22);
  backdrop-filter:blur(12px);
}
.sfa-pwa-install-banner > img{ border-radius:15px; }
.sfa-pwa-banner-copy strong{ display:block; font-size:15px; line-height:1.25; color:#16233f; }
.sfa-pwa-banner-copy span{ display:block; margin-top:3px; color:#64748b; font-size:13px; line-height:1.35; font-weight:650; }
.sfa-pwa-banner-actions{
  grid-column:1 / -1;
  display:flex;
  gap:9px;
}
.sfa-pwa-banner-actions button{
  min-height:44px;
  border-radius:999px;
  padding:9px 15px;
  font-weight:900;
  cursor:pointer;
}
.sfa-pwa-banner-install{
  flex:1;
  border:0;
  background:#1f7a5a;
  color:#fff;
}
.sfa-pwa-banner-later{
  border:1px solid rgba(15,23,42,.12);
  background:#fff;
  color:#475569;
}

@media (max-width:720px){
  .sfa-pwa-install-banner{
    left:max(12px, calc(8px + var(--sfa-safe-left)));
    right:max(12px, calc(8px + var(--sfa-safe-right)));
    bottom:calc(12px + var(--sfa-safe-bottom));
    width:auto;
  }
}

@media (prefers-reduced-motion:reduce){
  .sfa-pwa-dialog-root,
  .sfa-pwa-install-banner{ scroll-behavior:auto; }
}

/* P3C mobile width hardening: fix real 320 px layout constraints without hiding overflow. */
@media (max-width:720px){
  html,
  body{
    max-width:100%;
  }

  .pagewrap,
  .bubble-container,
  .bubble-card,
  .bubble-card.full-width{
    min-width:0 !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }

  .bubble-container{
    grid-template-columns:minmax(0, 1fr) !important;
  }

  .bubble-card,
  .bubble-card.full-width{
    width:100% !important;
  }

  .bubble-card h1,
  .bubble-card h2,
  .bubble-card h3,
  .bubble-card p,
  .bubble-card li,
  .bubble-card a,
  .contact-mail,
  .contact-link{
    min-width:0;
    max-width:100%;
    overflow-wrap:anywhere;
    word-break:normal;
  }

  /* Cookie status uses <br>; it must remain a vertical text block, not a flex row. */
  #consentStatus{
    display:block !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    overflow-wrap:anywhere !important;
  }

  #consentStatus br{
    display:block !important;
  }

  #openSettings,
  #resetConsent{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin:6px 0 !important;
    white-space:normal !important;
    overflow-wrap:anywhere;
  }

  /* Abo grids must be allowed to become narrower than their desktop card minimum. */
  .page-abo .feature-grid,
  .page-abo .addons-grid,
  .page-abo .wow-kpis-compact{
    grid-template-columns:minmax(0, 1fr) !important;
  }

  .page-abo .feature-card,
  .page-abo .pack-card,
  .page-abo .addons-grid > *,
  .page-abo .wow-kpi,
  .page-abo .abo-bubble-card{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }

  .page-abo .wow-kpi-value,
  .page-abo .abo-proof-link,
  .page-abo .abo-proof-facts,
  .page-abo .abo-info-box{
    min-width:0 !important;
    max-width:100% !important;
    overflow-wrap:anywhere;
  }

  /* Pantry contains several legacy fixed minimum widths. Neutralize them only on phones. */
  .page-pantry .page,
  .page-pantry .container,
  .page-pantry .grid,
  .page-pantry .card,
  .page-pantry .panel,
  .page-pantry .sidebar,
  .page-pantry #panel,
  .page-pantry #catsPanel,
  .page-pantry #chatPanel,
  .page-pantry .controls,
  .page-pantry .leftControls,
  .page-pantry .rightControls,
  .page-pantry .input,
  .page-pantry .chatComposer,
  .page-pantry .chatInput,
  .page-pantry #chatInput,
  .page-pantry #pantryQuickActionsWrapper,
  .page-pantry .pantryQuickActions{
    min-width:0 !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }

  .page-pantry .page,
  .page-pantry .container,
  .page-pantry .grid,
  .page-pantry .card,
  .page-pantry .panel,
  .page-pantry .sidebar,
  .page-pantry #panel,
  .page-pantry #catsPanel,
  .page-pantry #chatPanel,
  .page-pantry .controls{
    width:100% !important;
  }

  .page-pantry .container{
    padding-left:10px !important;
    padding-right:10px !important;
    padding-bottom:24px !important;
  }

  .page-pantry .grid{
    grid-template-columns:minmax(0, 1fr) !important;
  }

  .page-pantry .panel,
  .page-pantry .sidebar,
  .page-pantry #panel,
  .page-pantry #catsPanel{
    grid-column:1 / -1 !important;
    flex:1 1 auto !important;
  }

  .page-pantry #catsPanel{
    min-width:0 !important;
  }

  .page-pantry .panelHeader,
  .page-pantry .card-head,
  .page-pantry .chatTopRight{
    min-width:0 !important;
    max-width:100% !important;
    flex-wrap:wrap !important;
  }

  .page-pantry .panelHeader > *,
  .page-pantry .card-head > *{
    min-width:0 !important;
    max-width:100% !important;
  }

  .page-pantry .controls .leftControls,
  .page-pantry .controls .rightControls{
    flex:1 1 100% !important;
    width:100% !important;
    margin-left:0 !important;
  }

  .page-pantry .controls .input,
  .page-pantry .controls #search{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
  }

  .page-pantry .chatComposer{
    width:100% !important;
    flex-wrap:nowrap !important;
  }

  .page-pantry .chatComposer .chatInput,
  .page-pantry #chatInput{
    width:auto !important;
    min-width:0 !important;
    max-width:100% !important;
    flex:1 1 0 !important;
  }

  .page-pantry #chatMic,
  .page-pantry #chatSend{
    flex:0 0 auto !important;
    min-width:44px !important;
  }

  .page-pantry #chatSend{
    width:auto !important;
  }

  .page-pantry #pantryQuickActionsWrapper{
    width:100% !important;
    overflow:hidden !important;
  }

  .page-pantry .pantryQuickActions{
    width:100% !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    overscroll-behavior-inline:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
    padding:2px 0 6px !important;
  }

  .page-pantry .pantryQuickBtn,
  .page-pantry .pantryQuickActions > button{
    flex:0 0 auto !important;
  }

  .page-pantry .chatMessages,
  .page-pantry #itemsWrap,
  .page-pantry #items{
    min-width:0 !important;
    max-width:100% !important;
  }
}

@media (max-width:360px){
  .pagewrap{
    padding-left:12px !important;
    padding-right:12px !important;
  }

  .bubble-card{
    padding-left:18px !important;
    padding-right:18px !important;
  }

  .page-pantry .container{
    padding-left:8px !important;
    padding-right:8px !important;
  }

  .page-pantry #chatSend{
    min-width:48px !important;
    padding-left:10px !important;
    padding-right:10px !important;
  }
}

@media (max-width:720px){
  .page-abo .abo-wrap{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    grid-template-columns:minmax(0, 1fr) !important;
    box-sizing:border-box !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }

  .page-abo .abo-master::before{
    left:0 !important;
    right:0 !important;
  }

  .page-abo .abo-promo-box,
  .page-abo #masterPlanContent,
  .page-abo .abo-cta-row{
    min-width:0 !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }

  .page-abo #promoCodeInput{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }
}

/* P3D opt-in Web Push settings */
.sfa-push-settings-card{
  margin-top:22px;
  scroll-margin-top:24px;
}
.sfa-push-device-card{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:18px;
  max-width:920px;
  margin:0 auto;
  padding:18px;
  border:1px solid rgba(31,122,90,.16);
  border-radius:22px;
  background:linear-gradient(135deg, rgba(240,253,244,.96), rgba(239,246,255,.96));
}
.sfa-push-device-icon{
  width:58px;
  height:58px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:18px;
  background:#fff;
  box-shadow:0 10px 26px rgba(15,23,42,.10);
  font-size:27px;
}
.sfa-push-device-copy{ min-width:0; }
.sfa-push-status{
  font-weight:900;
  line-height:1.4;
  color:#334155;
}
.sfa-push-status.is-success{ color:#166534; }
.sfa-push-status.is-warning{ color:#92400e; }
.sfa-push-status.is-error{ color:#991b1b; }
.sfa-push-status.is-ready{ color:#1e3a8a; }
.sfa-push-device-info{
  margin-top:5px;
  color:#64748b;
  font-size:13px;
  font-weight:800;
  line-height:1.4;
}
.sfa-push-device-actions{
  display:flex;
  align-items:stretch;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:8px;
  max-width:330px;
}
.sfa-push-action{ white-space:nowrap; }
.sfa-push-preferences{
  max-width:920px;
  margin:18px auto 0;
}
.sfa-push-privacy-note{
  padding:14px 16px;
  border-radius:17px;
  border:1px solid rgba(59,130,246,.16);
  background:rgba(239,246,255,.84);
  color:#475569;
  line-height:1.5;
  font-size:13px;
}
.sfa-push-privacy-note strong{ color:#1e3a8a; }
.sfa-push-master{
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin-top:14px;
  padding:15px 16px;
  border:1px solid rgba(31,122,90,.20);
  border-radius:18px;
  background:rgba(240,253,244,.88);
  cursor:pointer;
}
.sfa-push-master input{
  width:21px;
  height:21px;
  margin:2px 0 0;
  accent-color:#1f7a5a;
  flex:0 0 auto;
}
.sfa-push-master strong{
  display:block;
  color:#14532d;
  font-size:15px;
  line-height:1.3;
}
.sfa-push-master small{
  display:block;
  margin-top:3px;
  color:#64748b;
  font-size:13px;
  font-weight:700;
  line-height:1.45;
}
.sfa-push-preference-grid{
  display:grid;
  gap:12px;
  margin-top:14px;
}
.sfa-push-preference{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:16px;
  padding:15px 16px;
  border:1px solid rgba(15,23,42,.08);
  border-radius:18px;
  background:rgba(255,255,255,.86);
  cursor:pointer;
}
.sfa-push-preference-head{
  display:flex;
  align-items:flex-start;
  gap:12px;
  min-width:0;
}
.sfa-push-preference-head input{
  width:20px;
  height:20px;
  margin:2px 0 0;
  accent-color:#1f7a5a;
  flex:0 0 auto;
}
.sfa-push-preference-head strong{
  display:block;
  color:#16233f;
  font-size:15px;
  line-height:1.3;
}
.sfa-push-preference-head small{
  display:block;
  margin-top:3px;
  color:#64748b;
  font-size:13px;
  font-weight:700;
  line-height:1.45;
}
.sfa-push-inline-select{
  display:flex;
  align-items:center;
  gap:8px;
  color:#64748b;
  font-size:12px;
  font-weight:900;
  white-space:nowrap;
}
.sfa-push-inline-select select,
.sfa-push-quiet-hours select{
  min-height:44px;
  border:1px solid rgba(15,23,42,.12);
  border-radius:13px;
  background:#fff;
  color:#16233f;
  padding:8px 34px 8px 11px;
  font-weight:800;
}
.sfa-push-quiet-hours{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  align-items:end;
  gap:14px;
  margin-top:14px;
  padding:16px;
  border-radius:18px;
  background:rgba(248,250,252,.94);
  border:1px solid rgba(15,23,42,.08);
}
.sfa-push-quiet-hours strong{
  display:block;
  color:#16233f;
  font-size:15px;
}
.sfa-push-quiet-hours small{
  display:block;
  max-width:580px;
  margin-top:4px;
  color:#64748b;
  font-weight:700;
  line-height:1.45;
}
.sfa-push-quiet-hours label{
  display:flex;
  flex-direction:column;
  gap:5px;
  color:#64748b;
  font-size:12px;
  font-weight:900;
}
.sfa-push-save-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-top:16px;
}
.sfa-push-save-row span{
  color:#64748b;
  font-size:12px;
  font-weight:700;
  text-align:right;
}
.sfa-push-settings-card button[aria-busy="true"]{ cursor:progress; }

@media (max-width:760px){
  .sfa-push-device-card{
    grid-template-columns:auto minmax(0,1fr);
    padding:16px;
  }
  .sfa-push-device-actions{
    grid-column:1 / -1;
    max-width:none;
    width:100%;
    flex-direction:column;
  }
  .sfa-push-action{ width:100%; }
  .sfa-push-preference{
    grid-template-columns:1fr;
  }
  .sfa-push-inline-select{
    justify-content:space-between;
    white-space:normal;
  }
  .sfa-push-quiet-hours{
    grid-template-columns:1fr 1fr;
  }
  .sfa-push-quiet-hours > div{ grid-column:1 / -1; }
  .sfa-push-quiet-hours select{ width:100%; }
  .sfa-push-save-row{
    align-items:stretch;
    flex-direction:column;
  }
  .sfa-push-save-row .btn{ width:100%; }
  .sfa-push-save-row span{ text-align:left; }
}

@media (max-width:420px){
  .sfa-push-device-card{ grid-template-columns:1fr; }
  .sfa-push-device-icon{ margin:0 auto; }
  .sfa-push-device-copy{ text-align:center; }
  .sfa-push-quiet-hours{ grid-template-columns:1fr; }
  .sfa-push-quiet-hours > div{ grid-column:auto; }
}