/*
 * S28DR – account-aware Abo page
 * Guest users keep the full sales page. Signed-in users receive a compact
 * activation / subscription-management view with a truthful recipe preview
 * or, for active plans, a direct link to the live Food savings cockpit.
 * Release: s28eg-abo-savings-truth-2026-08-30-r1
 */

.page-abo .abo-account-summary,
.page-abo .abo-account-help{
  display:none;
}

.page-abo .abo-account-summary[hidden],
.page-abo .abo-account-help[hidden]{
  display:none !important;
}

/* Prevent the full guest sales content from flashing while the account state is resolved. */
.page-abo.abo-mode-loading #aboProofStrip,
.page-abo.abo-mode-loading #faqBubble,
.page-abo.abo-mode-loading #promoCodeBox,
.page-abo.abo-mode-loading #savingsWowBox,
.page-abo.abo-mode-loading #masterPlanContent .feature-grid,
.page-abo.abo-mode-loading #masterPlanContent .master-intro,
.page-abo.abo-mode-loading #masterPlanContent .chip-row,
.page-abo.abo-mode-loading #aboCheckoutAssurance{
  display:none !important;
}

.page-abo.abo-mode-activate #aboProofStrip,
.page-abo.abo-mode-active #aboProofStrip,
.page-abo.abo-mode-cancel-pending #aboProofStrip,
.page-abo.abo-mode-expired #aboProofStrip,
.page-abo.abo-mode-activate #faqBubble,
.page-abo.abo-mode-active #faqBubble,
.page-abo.abo-mode-cancel-pending #faqBubble,
.page-abo.abo-mode-expired #faqBubble,
.page-abo.abo-mode-activate #masterPlanContent .feature-grid,
.page-abo.abo-mode-active #masterPlanContent .feature-grid,
.page-abo.abo-mode-cancel-pending #masterPlanContent .feature-grid,
.page-abo.abo-mode-expired #masterPlanContent .feature-grid,
.page-abo.abo-mode-activate #masterPlanContent .master-intro,
.page-abo.abo-mode-active #masterPlanContent .master-intro,
.page-abo.abo-mode-cancel-pending #masterPlanContent .master-intro,
.page-abo.abo-mode-expired #masterPlanContent .master-intro,
.page-abo.abo-mode-activate #masterPlanContent .chip-row,
.page-abo.abo-mode-active #masterPlanContent .chip-row,
.page-abo.abo-mode-cancel-pending #masterPlanContent .chip-row,
.page-abo.abo-mode-expired #masterPlanContent .chip-row,
.page-abo.abo-mode-activate #aboCheckoutAssurance,
.page-abo.abo-mode-active #aboCheckoutAssurance,
.page-abo.abo-mode-cancel-pending #aboCheckoutAssurance,
.page-abo.abo-mode-expired #aboCheckoutAssurance{
  display:none !important;
}

.page-abo.abo-mode-activate #savingsWowBox,
.page-abo.abo-mode-active #savingsWowBox,
.page-abo.abo-mode-cancel-pending #savingsWowBox,
.page-abo.abo-mode-expired #savingsWowBox{
  display:block;
}

.page-abo.abo-mode-active #promoCodeBox,
.page-abo.abo-mode-cancel-pending #promoCodeBox,
.page-abo.abo-mode-expired #promoCodeBox{
  display:none !important;
}

.page-abo.abo-mode-activate .abo-account-summary,
.page-abo.abo-mode-active .abo-account-summary,
.page-abo.abo-mode-cancel-pending .abo-account-summary,
.page-abo.abo-mode-expired .abo-account-summary,
.page-abo.abo-mode-activate .abo-account-help,
.page-abo.abo-mode-active .abo-account-help,
.page-abo.abo-mode-cancel-pending .abo-account-help,
.page-abo.abo-mode-expired .abo-account-help{
  display:block;
}

.page-abo.abo-mode-activate .abo-page-heading,
.page-abo.abo-mode-active .abo-page-heading,
.page-abo.abo-mode-cancel-pending .abo-page-heading,
.page-abo.abo-mode-expired .abo-page-heading{
  margin-bottom:16px;
}

.page-abo.abo-mode-activate #masterPlanBubble,
.page-abo.abo-mode-active #masterPlanBubble,
.page-abo.abo-mode-cancel-pending #masterPlanBubble,
.page-abo.abo-mode-expired #masterPlanBubble{
  max-width:1040px;
  margin-inline:auto;
}

.page-abo.abo-mode-active #creditsBubble,
.page-abo.abo-mode-cancel-pending #creditsBubble,
.page-abo.abo-mode-expired #creditsBubble{
  max-width:1040px;
  margin-inline:auto;
}

.page-abo .abo-account-summary{
  margin-top:18px;
  padding:18px;
  border-radius:24px;
  border:1px solid rgba(15,23,42,.08);
  background:linear-gradient(180deg,rgba(248,250,252,.98),rgba(255,255,255,.98));
  box-shadow:0 10px 26px rgba(15,23,42,.05);
}

.page-abo .abo-account-summary-head{
  display:flex;
  align-items:flex-start;
  gap:12px;
}

.page-abo .abo-account-status-icon{
  width:42px;
  height:42px;
  flex:0 0 42px;
  display:grid;
  place-items:center;
  border-radius:15px;
  background:#eef2ff;
  font-size:21px;
}

.page-abo .abo-account-status-title{
  color:#0f172a;
  font-size:1.05rem;
  line-height:1.25;
  font-weight:950;
}

.page-abo .abo-account-status-text{
  margin-top:4px;
  color:#64748b;
  line-height:1.45;
  font-weight:750;
}

.page-abo .abo-account-facts{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-top:15px;
}

.page-abo .abo-account-fact{
  min-width:0;
  padding:12px 13px;
  border-radius:17px;
  background:rgba(255,255,255,.9);
  border:1px solid rgba(15,23,42,.07);
}

.page-abo .abo-account-fact-label{
  display:block;
  color:#64748b;
  font-size:12px;
  line-height:1.25;
  font-weight:850;
}

.page-abo .abo-account-fact-value{
  display:block;
  margin-top:4px;
  color:#0f172a;
  line-height:1.3;
  font-weight:950;
  overflow-wrap:anywhere;
}

.page-abo .abo-account-summary[data-state="active"]{
  border-color:rgba(22,163,74,.18);
  background:linear-gradient(180deg,rgba(240,253,244,.98),rgba(255,255,255,.98));
}
.page-abo .abo-account-summary[data-state="active"] .abo-account-status-icon{background:#dcfce7;}

.page-abo .abo-account-summary[data-state="cancel-pending"]{
  border-color:rgba(245,158,11,.24);
  background:linear-gradient(180deg,rgba(255,251,235,.98),rgba(255,255,255,.98));
}
.page-abo .abo-account-summary[data-state="cancel-pending"] .abo-account-status-icon{background:#fef3c7;}

.page-abo .abo-account-summary[data-state="expired"]{
  border-color:rgba(220,38,38,.16);
  background:linear-gradient(180deg,rgba(254,242,242,.96),rgba(255,255,255,.98));
}
.page-abo .abo-account-summary[data-state="expired"] .abo-account-status-icon{background:#fee2e2;}

.page-abo .abo-cta-row #btnActivatePlan[data-sfa-plan-state="active"],
.page-abo .abo-cta-row #btnActivatePlan[data-sfa-plan-state="cancel-pending"]{
  width:100%;
  opacity:1 !important;
  cursor:default;
  filter:none !important;
  pointer-events:none;
  box-shadow:none;
}

.page-abo .abo-cta-row #btnActivatePlan[data-sfa-plan-state="active"]{
  color:#166534 !important;
  background:linear-gradient(180deg,#f0fdf4,#dcfce7) !important;
  border:1px solid #bbf7d0 !important;
}

.page-abo .abo-cta-row #btnActivatePlan[data-sfa-plan-state="cancel-pending"]{
  color:#92400e !important;
  background:linear-gradient(180deg,#fffbeb,#fef3c7) !important;
  border:1px solid #fde68a !important;
}

.page-abo.abo-mode-active .abo-cta-row #btnInvoices,
.page-abo.abo-mode-active .abo-cta-row #btnCancelPlan,
.page-abo.abo-mode-cancel-pending .abo-cta-row #btnInvoices,
.page-abo.abo-mode-cancel-pending .abo-cta-row #btnCancelPlan{
  flex:1 1 230px;
}

.page-abo.abo-mode-active #checkoutStatus,
.page-abo.abo-mode-cancel-pending #checkoutStatus,
.page-abo.abo-mode-expired #checkoutStatus,
.page-abo.abo-mode-activate #checkoutStatus{
  font-size:14px;
  line-height:1.5;
}

.page-abo .abo-account-help{
  max-width:1040px;
  margin:18px auto 0;
  text-align:center;
}

.page-abo .abo-account-help a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:46px;
  padding:11px 16px;
  border-radius:16px;
  color:#17684d;
  background:rgba(236,253,245,.8);
  border:1px solid rgba(31,122,92,.16);
  font-weight:900;
  text-decoration:none;
}

.page-abo .abo-account-help a:hover,
.page-abo .abo-account-help a:focus-visible{
  background:#ecfdf5;
  border-color:rgba(31,122,92,.32);
  text-decoration:none;
}

@media (max-width:760px){
  .page-abo .abo-account-facts{grid-template-columns:1fr;}
  .page-abo .abo-account-summary{padding:15px;border-radius:20px;}
  .page-abo .abo-account-help a{width:100%;}
}

/* S28EG – truthful Abo savings preview and live-cockpit handoff */
.page-abo .sfa-abo-savings{
  margin-top:18px;
  padding:20px;
  border-radius:24px;
  border-color:rgba(31,122,92,.16);
  background:linear-gradient(180deg,rgba(247,254,249,.98),rgba(255,255,255,.98));
}

.page-abo .sfa-abo-savings-preview[hidden],
.page-abo .sfa-abo-savings-live[hidden]{
  display:none !important;
}

.page-abo .sfa-abo-savings-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}

.page-abo .sfa-abo-savings-head .wow-title{
  margin:0 0 6px;
  color:#0f172a;
  font-size:clamp(1.12rem,2vw,1.35rem);
}

.page-abo .sfa-abo-savings-head .muted{
  max-width:760px;
  line-height:1.55;
}

.page-abo .sfa-abo-savings-context{
  margin:14px 0 0;
  padding:11px 13px;
  border-radius:16px;
  background:rgba(255,255,255,.78);
  border:1px solid rgba(15,23,42,.07);
  color:#475569;
  font-size:13px;
  line-height:1.5;
  font-weight:750;
}

.page-abo .sfa-abo-savings-recipe{
  margin-top:16px;
  border:1px solid rgba(15,23,42,.08);
  border-radius:22px;
  background:rgba(255,255,255,.92);
  overflow:hidden;
}

.page-abo .sfa-abo-savings-recipe-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  padding:16px 17px;
  border-bottom:1px solid rgba(15,23,42,.07);
}

.page-abo .sfa-abo-savings-recipe-head strong{
  display:block;
  margin-top:3px;
  color:#0f172a;
  font-size:1.08rem;
  line-height:1.3;
}

.page-abo .sfa-abo-savings-eyebrow{
  display:block;
  color:#64748b;
  font-size:11px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.page-abo .sfa-abo-savings-recipe-meta{
  display:flex;
  align-items:flex-end;
  gap:4px;
  flex-direction:column;
  color:#64748b;
  font-size:12px;
  line-height:1.35;
  font-weight:800;
  text-align:right;
}

.page-abo .sfa-abo-savings-calculation{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  padding:12px;
}

.page-abo .sfa-abo-savings-metric{
  min-width:0;
  padding:14px;
  border-radius:17px;
  border:1px solid rgba(15,23,42,.07);
  background:#f8fafc;
}

.page-abo .sfa-abo-savings-metric > span{
  display:block;
  min-height:34px;
  color:#475569;
  font-size:12px;
  line-height:1.35;
  font-weight:850;
}

.page-abo .sfa-abo-savings-metric > strong{
  display:block;
  margin-top:7px;
  color:#0f172a;
  font-size:clamp(1.38rem,2.5vw,1.8rem);
  line-height:1.05;
  letter-spacing:-.035em;
  white-space:nowrap;
}

.page-abo .sfa-abo-savings-metric > small{
  display:block;
  margin-top:8px;
  color:#64748b;
  font-size:11px;
  line-height:1.4;
  font-weight:700;
}

.page-abo .sfa-abo-savings-metric--pantry{
  background:#eff6ff;
  border-color:#bfdbfe;
}

.page-abo .sfa-abo-savings-metric--potential{
  background:linear-gradient(180deg,#f0fdf4,#ecfdf5);
  border-color:#bbf7d0;
}

.page-abo .sfa-abo-savings-metric--potential > span,
.page-abo .sfa-abo-savings-metric--potential > strong{
  color:#166534;
}

.page-abo .sfa-abo-savings-formula{
  display:grid;
  grid-template-columns:auto 1fr 1fr;
  gap:10px;
  align-items:center;
  padding:12px 16px 15px;
  color:#334155;
  font-size:12px;
  line-height:1.4;
}

.page-abo .sfa-abo-savings-formula strong{
  color:#0f172a;
}

.page-abo .sfa-abo-savings-formula span{
  padding:8px 10px;
  border-radius:12px;
  background:#f8fafc;
  border:1px solid rgba(15,23,42,.07);
  font-weight:850;
  text-align:center;
}

.page-abo .sfa-abo-savings-result{
  display:grid;
  grid-template-columns:max-content minmax(0,1fr);
  gap:14px;
  align-items:start;
  margin-top:14px;
  padding:14px;
  border-radius:18px;
  background:rgba(240,253,244,.8);
  border:1px solid rgba(22,163,74,.16);
}

.page-abo .sfa-abo-savings-result .wow-ampel{
  margin:0;
}

.page-abo .sfa-abo-savings-result strong{
  display:block;
  color:#0f172a;
  line-height:1.4;
}

.page-abo .sfa-abo-savings-result p{
  margin:4px 0 0;
  color:#475569;
  font-size:13px;
  line-height:1.5;
  font-weight:700;
}

.page-abo .sfa-abo-savings-guard{
  display:grid;
  grid-template-columns:34px minmax(0,1fr);
  gap:12px;
  margin-top:12px;
  padding:14px;
  border-radius:18px;
  background:#fff7ed;
  border:1px solid #fed7aa;
}

.page-abo .sfa-abo-savings-guard-icon{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:#ffedd5;
  color:#9a3412;
  font-weight:950;
}

.page-abo .sfa-abo-savings-guard strong{
  display:block;
  color:#7c2d12;
  line-height:1.35;
}

.page-abo .sfa-abo-savings-guard p{
  margin:4px 0 0;
  color:#9a3412;
  font-size:12px;
  line-height:1.5;
  font-weight:700;
}

.page-abo .sfa-abo-savings-foot{
  margin-top:12px;
  color:#64748b;
  font-size:11px;
  line-height:1.5;
  font-weight:700;
}

.page-abo .sfa-abo-savings-foot p{
  margin:4px 0 0;
}

.page-abo .sfa-abo-savings-foot b{
  color:#334155;
}

.page-abo .sfa-abo-savings-live{
  display:grid;
  grid-template-columns:50px minmax(0,1fr) auto;
  gap:16px;
  align-items:center;
}

.page-abo .sfa-abo-savings-live-icon{
  width:50px;
  height:50px;
  display:grid;
  place-items:center;
  border-radius:17px;
  background:#dcfce7;
  font-size:25px;
}

.page-abo .sfa-abo-savings-live-copy .wow-title{
  margin:0;
  color:#0f172a;
  font-size:1.08rem;
}

.page-abo .sfa-abo-savings-live-copy p{
  margin:5px 0 0;
  color:#475569;
  line-height:1.5;
  font-weight:750;
}

.page-abo .sfa-abo-savings-live-facts{
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  margin-top:10px;
}

.page-abo .sfa-abo-savings-live-facts span{
  display:inline-flex;
  padding:6px 9px;
  border-radius:999px;
  background:#f0fdf4;
  border:1px solid #bbf7d0;
  color:#166534;
  font-size:11px;
  line-height:1.2;
  font-weight:900;
}

.page-abo .sfa-abo-savings-live-copy small{
  display:block;
  margin-top:9px;
  color:#64748b;
  line-height:1.4;
  font-weight:700;
}

.page-abo .sfa-abo-savings-live-link{
  min-width:170px;
  text-decoration:none;
  text-align:center;
  white-space:nowrap;
}

.page-abo.abo-mode-activate .sfa-abo-savings,
.page-abo.abo-mode-expired .sfa-abo-savings,
.page-abo.abo-mode-active .sfa-abo-savings,
.page-abo.abo-mode-cancel-pending .sfa-abo-savings{
  margin-top:16px;
}

.page-abo.abo-mode-expired .sfa-abo-savings{
  border-color:rgba(245,158,11,.22);
  background:linear-gradient(180deg,rgba(255,251,235,.96),rgba(255,255,255,.98));
}

.page-abo.abo-mode-cancel-pending .sfa-abo-savings-live-icon{
  background:#fef3c7;
}

@media (max-width:960px){
  .page-abo .sfa-abo-savings-calculation{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .page-abo .sfa-abo-savings-formula{
    grid-template-columns:1fr 1fr;
  }
  .page-abo .sfa-abo-savings-formula strong{
    grid-column:1 / -1;
  }
}

@media (max-width:700px){
  .page-abo .sfa-abo-savings{
    padding:15px;
    border-radius:20px;
  }
  .page-abo .sfa-abo-savings-recipe-head{
    align-items:flex-start;
    flex-direction:column;
  }
  .page-abo .sfa-abo-savings-recipe-meta{
    align-items:flex-start;
    text-align:left;
  }
  .page-abo .sfa-abo-savings-calculation,
  .page-abo .sfa-abo-savings-formula{
    grid-template-columns:minmax(0,1fr);
  }
  .page-abo .sfa-abo-savings-formula strong{
    grid-column:auto;
  }
  .page-abo .sfa-abo-savings-metric > span{
    min-height:0;
  }
  .page-abo .sfa-abo-savings-metric > strong{
    white-space:normal;
  }
  .page-abo .sfa-abo-savings-result{
    grid-template-columns:minmax(0,1fr);
  }
  .page-abo .sfa-abo-savings-live{
    grid-template-columns:44px minmax(0,1fr);
  }
  .page-abo .sfa-abo-savings-live-icon{
    width:44px;
    height:44px;
  }
  .page-abo .sfa-abo-savings-live-link{
    grid-column:1 / -1;
    width:100%;
  }
}