/* Offer Detail page-owned presentation. Migrated from the former root-level flow and overlay styles. */

/* NextBonus Offer Detail overflow + CTA contract.
   Desktop keeps the approved 760px two-column card. The right rail is its own scroll
   container: content may grow naturally, but the card itself must not stretch down the
   page. Mobile/tablet remain normal document flow. */

/* Shared desktop shell --------------------------------------------------- */
@media (min-width:1181px){
  .v4-offer-detail-page .v4-offer-detail-grid{
    height:760px !important;
    min-height:760px !important;
    max-height:760px !important;
    align-items:stretch !important;
  }

  .v4-offer-detail-page .v4-offer-poster-shell{
    height:760px !important;
    min-height:760px !important;
    max-height:760px !important;
    overflow:hidden !important;
  }

  /* Keep the Offer Detail card shape. Overflow belongs to the decision rail, not the
     whole page. Flex children are protected from shrinking below their content height. */
  .v4-offer-detail-page .v4-decision-panel{
    box-sizing:border-box;
    height:760px !important;
    min-height:760px !important;
    max-height:760px !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    overscroll-behavior:contain;
    scrollbar-gutter:stable;
  }

  .v4-offer-detail-page .v4-decision-panel::-webkit-scrollbar{width:8px}
  .v4-offer-detail-page .v4-decision-panel::-webkit-scrollbar-thumb{
    background:rgba(120,136,160,.22);
    border-radius:999px;
  }
  .v4-offer-detail-page .v4-decision-panel::-webkit-scrollbar-track{background:transparent}

  /* Desktop CTA dock mirrors the real CTA while it is below the visible part of the
     scroll rail. JS aligns this dock with the rail's visible bottom edge and removes it
     exactly when the real CTA reaches the same position. */
  .nb-offer-cta-dock{
    position:fixed;
    z-index:65;
    opacity:0;
    pointer-events:none;
    transform:translateY(8px);
    transition:opacity .12s ease,transform .12s ease;
    filter:drop-shadow(0 10px 24px rgba(20,35,60,.14));
  }
  .nb-offer-cta-dock.is-visible{
    opacity:1;
    pointer-events:auto;
    transform:none;
  }
  .nb-offer-cta-dock-content{margin:0 !important}
  .nb-offer-cta-dock .v4-detail-actions{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;
    padding:8px;
    border-radius:12px;
    background:rgba(255,255,255,.96);
    backdrop-filter:blur(10px);
    box-shadow:0 0 0 1px rgba(225,232,242,.9);
  }
  .nb-offer-cta-dock .v4-detail-actions.single{grid-template-columns:1fr}
}

/* Grid/flex children are allowed to shrink to the rail width instead of widening it. */
.v4-offer-detail-page .v4-decision-panel,
.v4-offer-detail-page .v4-decision-panel *,
.v4-offer-detail-page .v4-decision-panel *::before,
.v4-offer-detail-page .v4-decision-panel *::after{
  min-width:0;
}

/* The original clipping bug came from flex-shrink inside the fixed-height desktop rail.
   Keep the rail fixed, but never compress its business-content children to make them fit. */
.v4-offer-detail-page .v4-decision-panel > *{flex-shrink:0 !important}

/* Dynamic cards grow vertically with copy. Rounded parent cards may still mask their
   corners; only fixed/clamped content heights are neutralized here. */
.v4-offer-detail-page :where(
  .v4-result-card,
  .v4-metric
){
  height:auto !important;
  max-height:none !important;
}

/* Critical offer facts are never ellipsized or line-clamped. */
.v4-offer-detail-page :where(
  .v4-recommendation,
  .v4-result-note,
  .v5-short-summary,
  .v5-primary-alert,
  .v4-metric .metric-label,
  .v4-metric .metric-value,
  .v4-metric .metric-sub
){
  white-space:normal !important;
  max-height:none !important;
  text-overflow:clip !important;
  -webkit-line-clamp:unset !important;
  overflow-wrap:break-word;
}

/* CTAs may become two lines on a narrow viewport, but their text must remain visible. */
.v4-offer-detail-page .v4-detail-actions .btn{
  height:auto !important;
  white-space:normal !important;
  text-align:center;
}

/* Tablet/mobile: normal page flow; no desktop inner-scroll card or floating CTA. */
@media(max-width:1180px){
  .v4-offer-detail-page .v4-offer-detail-grid{
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
  }
  .v4-offer-detail-page .v4-decision-panel{
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    overflow:visible !important;
  }
  .nb-offer-cta-dock{display:none !important}
}

/* Offer Detail presentation layer -------------------------------------------------
   Offer Detail is an overlay above its source page, not a standalone full-canvas page.
   Desktop keeps the approved two-column composition; the right rail owns its scroll and
   the CTA lives in a permanent bottom dock until its in-flow sentinel reaches it. */

body.nb-offer-overlay-open{overflow:hidden}

.nb-mobile-detail-toolbar{display:none}

.nb-offer-detail-overlay{
  position:fixed;
  inset:0;
  z-index:80;
  display:grid;
  place-items:center;
  padding:40px;
  background:rgba(18,24,34,.30);
  backdrop-filter:blur(12px);
}

.nb-offer-detail-frame{
  position:relative;
  width:min(1200px,calc(100vw - 96px));
  height:min(800px,calc(100vh - 80px));
  max-height:800px;
  border:0;
  border-radius:22px;
  background:transparent;
  box-shadow:0 28px 80px rgba(18,28,45,.20);
  overflow:hidden;
}

.nb-offer-detail-host{
  width:100%;
  height:100%;
}

.nb-offer-detail-host > .v4-offer-detail-page{
  width:100%;
  height:100%;
  max-width:none !important;
  margin:0 !important;
  overflow:hidden;
  background:#fff;
}

.nb-offer-detail-host .v4-offer-detail-grid{
  box-sizing:border-box;
  width:100%;
  height:100% !important;
  min-height:0 !important;
  max-height:none !important;
  margin:0 !important;
  grid-template-columns:minmax(0,55fr) minmax(0,45fr) !important;
  gap:0 !important;
  align-items:stretch !important;
  background:#fff;
}

.nb-offer-detail-host .v4-offer-poster-shell,
.nb-offer-detail-host .v4-decision-panel{
  height:100% !important;
  min-height:0 !important;
  max-height:none !important;
  max-width:none !important;
  margin:0 !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}

.nb-offer-detail-host .v4-decision-panel{
  box-shadow:inset 1px 0 0 rgba(28,43,66,.055) !important;
}

/* Offer Detail closes through backdrop / history. Follow owns the panel action slot. */
.v4-offer-detail-page .nb-offer-detail-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
.v4-offer-detail-page .nb-offer-detail-head .nb-follow-control{
  position:static !important;
  top:auto !important;
  right:auto !important;
  z-index:auto;
  flex:0 0 auto;
}

.nb-offer-detail-host .nb-follow-control{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:5px !important;
  height:34px !important;
  padding:0 10px !important;
  border:1px solid var(--nb-system-blue) !important;
  border-radius:9px !important;
  background:#fff !important;
  color:var(--nb-system-blue) !important;
  box-shadow:none !important;
  cursor:pointer;
  transition:background .14s ease,border-color .14s ease,color .14s ease,transform .12s ease;
}
.nb-offer-detail-host .nb-follow-control:hover{
  background:rgba(0,136,255,.06) !important;
}
.nb-offer-detail-host .nb-follow-control:active{
  transform:scale(.97);
}
.nb-offer-detail-host .nb-follow-control.saved{
  border-color:#d1d5db !important;
  background:#fff !important;
  color:#8e8e93 !important;
}
.nb-offer-detail-host .nb-follow-control.saved:hover{
  background:#f7f7f8 !important;
}
.nb-offer-detail-host .v4-decision-panel{
  position:relative !important;
  display:block !important;
  overflow:hidden !important;
}

.nb-offer-panel-scroll{
  position:absolute;
  inset:0;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:inherit;
  scrollbar-gutter:stable;
}

.nb-offer-panel-scroll::-webkit-scrollbar{width:8px}
.nb-offer-panel-scroll::-webkit-scrollbar-thumb{
  background:rgba(120,136,160,.22);
  border-radius:999px;
}
.nb-offer-panel-scroll::-webkit-scrollbar-track{background:transparent}

.nb-offer-panel-dock{
  position:absolute;
  z-index:6;
  left:18px;
  right:18px;
  bottom:14px;
  min-height:var(--nb-cta-height,44px);
  display:flex;
  align-items:stretch;
  pointer-events:auto;
}

.nb-offer-panel-dock::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:-16px -8px -8px;
  background:linear-gradient(to bottom,rgba(255,255,255,0),rgba(255,255,255,.93) 34%,#fff 58%);
  pointer-events:none;
}

.nb-offer-panel-dock.is-merged{
  pointer-events:none;
}
.nb-offer-panel-dock.is-merged::before{display:none}

.nb-offer-panel-dock > *{
  width:100% !important;
  margin:0 !important;
}

.nb-offer-panel-dock .v4-detail-actions{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
}
.nb-offer-panel-dock .v4-detail-actions.single{grid-template-columns:1fr}

.nb-offer-cta-sentinel{
  width:100%;
  pointer-events:none;
}

/* The old body-level CTA clone is retired. Keep it hidden if a stale cached script exists. */
.nb-offer-cta-dock{display:none !important}

/* Promoted app confirmation modals must sit above the Offer Detail overlay. */
.nb-promoted-app-modal{z-index:120 !important}

@media(max-width:1180px){
  body.nb-offer-overlay-open{overflow:hidden}
  .nb-offer-detail-overlay{
    padding:0;
    align-items:stretch;
    background:#fff;
    backdrop-filter:none;
  }
  .nb-offer-detail-host .nb-mobile-detail-toolbar{
    position:sticky;
    top:0;
    z-index:40;
    box-sizing:border-box;
    min-height:54px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:8px 16px;
    padding-top:max(8px,env(safe-area-inset-top));
    border-bottom:1px solid rgba(60,60,67,.10);
    background:rgba(255,255,255,.96);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
  }
  .nb-offer-detail-host .nb-mobile-detail-back{
    width:38px;
    height:38px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 38px;
    padding:0;
    border:0;
    border-radius:50%;
    background:transparent;
    color:#1d1d1f;
    cursor:pointer;
  }
  .nb-offer-detail-host .nb-mobile-detail-back:active{background:rgba(118,118,128,.10)}
  .nb-offer-detail-host .nb-mobile-detail-back svg{
    width:26px;
    height:26px;
    fill:none;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
  }
  .nb-offer-detail-host .nb-mobile-detail-toolbar-spacer{flex:1 1 auto}
  .nb-offer-detail-host .nb-mobile-detail-toolbar .nb-follow-control{
    position:static !important;
    top:auto !important;
    right:auto !important;
    flex:0 0 auto;
  }
  .nb-offer-detail-host .v4-decision-panel .nb-follow-control{display:none !important}
  .nb-offer-detail-frame.nb-mobile-task-open .nb-mobile-detail-toolbar{display:none !important}
  .nb-offer-detail-frame{
    width:100%;
    height:100%;
    max-height:none;
    border:0;
    border-radius:0;
    box-shadow:none;
    overflow:auto;
  }
  .nb-offer-detail-host{
    height:auto;
    min-height:100%;
  }
  .nb-offer-detail-host > .v4-offer-detail-page{
    height:auto;
    min-height:100%;
  }
  .nb-offer-detail-host .v4-offer-detail-grid{
    height:auto !important;
    min-height:0 !important;
    grid-template-columns:1fr !important;
    gap:0 !important;
  }
  .nb-offer-detail-host .v4-offer-poster-shell,
  .nb-offer-detail-host .v4-decision-panel{
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    overflow:visible !important;
  }
}



/* Credit-card Offer Detail decision hierarchy -------------------------------------
   The page owns presentation only. Offer facts come from NextBonusOfferData,
   valuation comes from Offer Timing, and Assessment output comes from its formal owner. */

.nb-credit-decision-panel{
  padding:26px 24px 22px;
  color:#182236;
}

.nb-credit-offer-head{
  padding:2px 0 18px 0;
  border-bottom:1px solid #edf1f5;
}

.nb-credit-offer-meta{
  display:flex;
  align-items:center;
  gap:7px;
  color:#6f7b8e;


}

.nb-credit-offer-name{
  color:#172033;



}

.nb-credit-offer-provider{
  margin-top:5px;
  color:#8b95a5;



  text-transform:uppercase;
}

.nb-current-offer{
  margin-top:20px;
  padding:18px 18px 17px;
  border:1px solid #dce9fb;
  border-radius:16px;
  background:
    radial-gradient(120% 95% at 100% 100%,rgba(111,173,255,.10),transparent 58%),
    repeating-radial-gradient(ellipse at 112% 112%,rgba(128,181,247,.08) 0 1px,transparent 1px 7px),
    linear-gradient(145deg,#f5f9ff,#fbfdff);
}

.nb-current-offer.is-ended{
  border-color:#e5e7eb;
  background:#f7f7f8;
}

.nb-current-offer-label,
.nb-offer-section-label{
  color:#7a8799;



}

.nb-current-offer-value{
  margin-top:7px;
  color:#0d6fe8;




}

.nb-current-offer.is-ended .nb-current-offer-value{
  color:#596477;

}

.nb-current-offer-requirement{
  margin-top:8px;
  color:#536174;


}

.nb-offer-value-section{
  margin-top:20px;
}

.nb-offer-value-head{
  display:grid;
  grid-template-columns:auto minmax(28px,1fr) auto;
  align-items:center;
  gap:12px;
}

.nb-offer-value-head h2{
  margin:0;
  color:#172033;
}

.nb-offer-value-rule{
  height:1px;
  background:#d9e1ea;
}

.nb-offer-value-head small{
  color:#9aa5b5;
  white-space:nowrap;
}

.nb-offer-value-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:9px;
  margin-top:11px;
}

.nb-offer-value-grid>div{
  min-height:104px;
  padding:13px 12px;
  border:1px solid #eadfc9;
  border-radius:13px;
  background:linear-gradient(155deg,#fffdf9,#fbf7ef);
}

.nb-offer-value-grid span{
  display:block;
  color:#75839a;
}

.nb-offer-value-grid b{
  display:block;
  margin-top:6px;
  color:#7b5416;
}

.nb-offer-value-grid small{
  display:block;
  margin-top:5px;
  color:#7c8798;
}

.nb-offer-apply-primary{
  margin-top:18px;
}

.nb-offer-apply-primary .btn{
  width:100%;
  min-height:48px;
  border-radius:13px;


}

.nb-assessment-section{
  margin-top:22px;
  padding-top:20px;
  border-top:1px solid #edf1f5;
}

.nb-assessment-entry{
  padding:17px;
  border:1px solid #dfe7f1;
  border-radius:16px;
  background:#f8fbff;
}

.nb-assessment-kicker{
  display:block;
  color:#778395;



}

.nb-assessment-entry h2{
  margin:5px 0 0;
  color:#192235;



}

.nb-assessment-entry p{
  margin:7px 0 0;
  color:#687487;


}

.nb-assessment-start{
  width:100%;
  margin-top:14px;
  min-height:44px;
  border-radius:12px;
  border-color:#69a7ff;
  background:#f7fbff;
  color:#0a71ff;
}
.nb-assessment-start:hover{
  border-color:#3f8cff;
  background:#f0f7ff;
}

.nb-assessment-preview-link{
  display:block;
  margin:7px auto 0;
  padding:5px 8px;
  border:0;
  background:transparent;
  color:#66758c;


  cursor:pointer;
}

.nb-assessment-preview-link:hover{
  color:#0d6fe8;
}

.nb-assessment-section.is-unavailable .nb-assessment-entry{
  background:#fafafa;
}

.nb-assessment-result-card{
  margin-top:9px;
  border-color:#dce7f5;
  background:#f7fbff;
}

.nb-assessment-result-card .v4-recommendation{
  margin:10px 0 12px;

}

.nb-assessment-result-actions{
  display:grid;
  grid-template-columns:1fr;
  margin-top:12px;
}

.nb-assessment-result-actions .btn{
  min-height:42px;
  border-radius:11px;

}

/* The desktop dock follows only the main Direct Apply action for credit-card details. */
.nb-offer-panel-dock .nb-offer-apply-primary{
  width:100%;
}

.nb-offer-panel-dock .nb-offer-apply-primary .btn{
  width:100%;
  min-height:46px;
  border-radius:12px;
  box-shadow:0 8px 24px rgba(14,111,232,.18);
}

/* Assessment result preview is page-owned explanatory UI, never business state. */
.nb-assessment-preview-modal{
  width:min(520px,calc(100vw - 36px));
  max-height:min(720px,calc(100vh - 48px));
  padding:0;
  border:0;
  border-radius:20px;
  background:#fff;
  box-shadow:0 24px 80px rgba(20,30,48,.24);
  color:#172033;
}

.nb-assessment-preview-modal::backdrop{
  background:rgba(18,24,34,.38);
  backdrop-filter:blur(5px);
}

.nb-assessment-preview-close{
  position:absolute;
  top:12px;
  right:12px;
  width:32px;
  height:32px;
  border:0;
  border-radius:9px;
  background:#f2f4f7;
  color:#677386;


  cursor:pointer;
}

.nb-assessment-preview-body{
  padding:28px 26px 25px;
}

.nb-assessment-preview-kicker{
  color:#0d6fe8;


}

.nb-assessment-preview-body h2{
  margin:6px 44px 0 0;


}

.nb-assessment-preview-intro{
  margin:8px 0 17px;
  color:#6f7b8d;


}

.nb-assessment-preview-result{
  padding:17px;
  border:1px solid #dce8f7;
  border-radius:16px;
  background:#f7fbff;
}

.nb-assessment-preview-meta{
  color:#7d8999;


}

.nb-assessment-preview-result>strong{
  display:block;
  margin-top:8px;

}

.nb-assessment-preview-result>p{
  margin:5px 0 14px;
  color:#657185;


}

.nb-assessment-preview-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}

.nb-assessment-preview-grid>div{
  padding:11px;
  border:1px solid #e6edf6;
  border-radius:11px;
  background:#fff;
}

.nb-assessment-preview-grid span{
  display:block;
  color:#8792a3;

}

.nb-assessment-preview-grid b{
  display:block;
  margin-top:4px;
  color:#213047;

}

.nb-assessment-preview-foot{
  margin-top:14px;
  color:#697588;


}

@media(max-width:780px){
  .nb-credit-decision-panel{
    padding:22px 16px 28px;
  }
  .nb-credit-offer-head{
    padding-right:110px;
  }
  .nb-current-offer-value{

  }
  .nb-offer-value-grid{
    grid-template-columns:1fr;
  }
  .nb-offer-value-grid>div{
    min-height:0;
  }
}

@media(max-width:520px){
  .nb-assessment-result-actions,
  .nb-assessment-preview-grid{
    grid-template-columns:1fr;
  }
}


/* AMEX Gold V1 final decision panel ------------------------------------------------
   Scoped to the approved Gold layout. Other Offer Detail variants remain unchanged. */
.nb-credit-v1-page .nb-credit-v1-final{
  display:flex !important;
  flex-direction:column;
  padding:24px 24px 22px;
  background:#fff;
  overflow:hidden !important;
}

.nb-credit-v1-head{
  min-height:48px;
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:18px;
  padding:0 0 15px 0;
  position:relative;
  border-bottom:1px solid #edf1f5;
}

.nb-credit-v1-head .nb-credit-offer-name{
  color:#15213a;
}

.nb-credit-v1-head .v4-detail-save{
  flex:0 0 auto;
  height:34px;
  padding:0 10px;
  box-shadow:none;
}

.nb-current-offer-v1{
  margin-top:16px;
  padding:17px 18px 0;
  border-color:#e5e7eb;
  border-radius:15px;
  background:#fff;
  overflow:hidden;
}
.nb-current-offer-v1 .nb-current-offer-label{
  color:#16213b;
}
.nb-current-offer-v1 .nb-current-offer-value{
  margin-top:7px;
  color:#17213a;
}
.nb-current-offer-v1 .nb-current-offer-requirement{
  margin-top:8px;
  padding-bottom:16px;
  color:#56647e;
  border-bottom:1px solid #e5edf7;
}
.nb-current-offer-mobile-summary{display:none}
.nb-current-offer-metrics{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  margin:0 -18px;
}
.nb-current-offer-metrics>div{
  position:relative;
  padding:13px 14px 15px;
  text-align:center;
}
.nb-current-offer-metrics>div+div:before{
  content:"";
  position:absolute;
  left:0;
  top:13px;
  bottom:15px;
  width:1px;
  background:#edf1f6;
}
.nb-current-offer-metrics span{
  display:block;
  color:#8590a3;
}
.nb-current-offer-metrics b{
  display:block;
  margin-top:5px;
  color:#25324a;
}

.nb-annual-value-card{
  margin-top:16px;
  padding:16px 16px 15px;
  border:1px solid #e5e7eb;
  border-radius:15px;
  background:#fff;
}
.nb-annual-value-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.nb-annual-value-head h2{
  margin:0;
  color:#17213a;
}
.nb-annual-value-estimate{
  margin-top:12px;
}
.nb-annual-value-estimate strong{
  color:#08966f;
  white-space:nowrap;
}
.nb-annual-value-breakdown{
  margin-top:12px;
}
.nb-annual-value-breakdown>div{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  min-height:33px;
  border-bottom:1px solid #f0f3f7;
  color:#5f6d87;
}
.nb-annual-value-breakdown b{
  color:#24314d;
}
.nb-annual-value-breakdown>div:nth-child(2) b{color:#0d8f69}
.nb-annual-value-breakdown>div:nth-child(3) b{color:#c94444}
.nb-annual-value-total{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  min-height:34px;
  margin-top:9px;
  padding:0;
  border-radius:0;
  background:transparent;
}
.nb-annual-value-total span{
  color:#17213a;
}
.nb-annual-value-total strong{
  color:#08966f;
  white-space:nowrap;
}
.nb-annual-value-customize{
  display:inline-flex;
  align-items:center;
  gap:2px;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  color:var(--nb-system-blue);
  cursor:pointer;
}

.nb-credit-v1-actions{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  margin-top:14px;
  margin-bottom:0;
  padding-top:0;
  border-top:0;
  background:#fff;
}
.nb-credit-v1-actions .btn{
  width:100%;
  min-height:48px;
  border-radius:12px;
}
.nb-credit-v1-actions .nb-assessment-compact{
  min-height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 14px;
  border:1px solid var(--nb-system-blue);
  background:#fff;
  color:var(--nb-system-blue);
  text-align:center;
  box-shadow:none;
}
.nb-credit-v1-actions .nb-assessment-compact:hover{
  border-color:#0d6fe8;
  background:rgba(13,111,232,.05);
}
.nb-credit-v1-actions .nb-credit-direct-apply{
  background:#1177f5;
  color:#fff;
  border-color:#1177f5;
}
.nb-credit-v1-actions .nb-credit-direct-apply:hover{background:#0f6fe5}

@media(max-width:1180px){
  .nb-credit-v1-page .nb-credit-v1-final{
    overflow:visible !important;
    padding:22px 18px 28px;
  }
  .nb-credit-v1-actions{
    margin-top:14px;
    margin-bottom:0;
  }
}
@media(max-width:560px){
  .nb-credit-v1-page .nb-credit-v1-final{
    padding:18px 16px 26px;
  }
  .nb-credit-v1-head{
    min-height:42px;
    padding:0 0 12px 0;
  }
  .nb-current-offer-v1{
    margin-top:12px;
    padding:14px 14px 0;
    border-radius:14px;
  }
  .nb-current-offer-desktop-summary{display:none}
  .nb-current-offer-mobile-summary{
    display:flex;
    flex-direction:column;
    gap:6px;
    padding:0 0 13px;
    border-bottom:1px solid #e5edf7;
  }
  .nb-current-offer-mobile-summary strong{
    display:block;
    color:#17213a;
  }
  .nb-current-offer-metrics{
    margin:0 -14px;
  }
  .nb-current-offer-metrics>div{
    min-height:72px;
    padding:10px 8px 11px;
    display:flex;
    flex-direction:column;
    justify-content:center;
  }
  .nb-current-offer-metrics b{
    margin-top:2px;
  }

  /* Mobile decision cards use one text size; hierarchy comes from weight and tone. */
  .nb-annual-value-card{
    margin-top:12px;
    padding:14px;
    border-radius:14px;
    background:#fff;
  }
  .nb-annual-value-breakdown{
    margin-top:8px;
  }
  .nb-annual-value-breakdown>div{
    min-height:34px;
  }
  .nb-annual-value-total{
    margin-top:12px;
    padding:0;
    border-radius:0;
  }
  .nb-annual-value-total span{
    color:#8590a3;
  }
  .nb-annual-value-estimate{
    margin-top:10px;
  }
}


/* Annual value calculator ---------------------------------------------------------
   A right-rail drill-in owned by Offer Detail. Benefit facts are sourced from the
   canonical credit-card Product Detail facts through features/annual-value/calculator.js. */
.nb-annual-value-personalized{
  display:flex;
  align-items:center;
  gap:6px;
  margin:9px 2px 0;
  padding:8px 10px;
  border-radius:9px;
  background:#eef9f5;
  color:#118568;

}
.nb-annual-value-personalized span{
  width:16px;
  height:16px;
  display:inline-grid;
  place-items:center;
  border-radius:999px;
  background:#14a47d;
  color:#fff;
  font-size:10px;
}

.nb-credit-v1-page .nb-annual-calculator-panel{
  display:block !important;
  padding:20px 22px 22px;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  scrollbar-gutter:stable;
}
.nb-annual-calculator-panel::-webkit-scrollbar{width:7px}
.nb-annual-calculator-panel::-webkit-scrollbar-thumb{
  background:rgba(120,136,160,.18);
  border-radius:999px;
}
.nb-annual-calc-head{
  position:relative;
  min-height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 44px 12px;
  border-bottom:1px solid #edf1f5;
}
.nb-annual-calc-head h2{
  margin:0;
  color:#17213a;

}
.nb-annual-calc-head button{
  position:absolute;
  left:0;
  top:0;
  height:30px;
  padding:0;
  border:0;
  background:transparent;
  color:#68758a;
  cursor:pointer;
}
.nb-annual-calc-head button span{
  margin-right:2px;
  font-size:17px;
  vertical-align:-1px;
}
.nb-annual-calc-head button:hover{color:#0d6fe8}

.nb-annual-calc-result{
  margin-top:14px;
  padding:14px 15px;
  border-radius:13px;
  background:linear-gradient(145deg,#eef9f7,#f5fbff);
}
.nb-annual-calc-result span,
.nb-annual-calc-result small{
  display:block;
}
.nb-annual-calc-result span{
  color:#25324a;

}
.nb-annual-calc-result strong{
  display:block;
  margin-top:4px;
  color:#08966f;

}
.nb-annual-calc-result small{
  margin-top:5px;
  color:#7b8799;
}

.nb-annual-calc-section{
  margin-top:15px;
}
.nb-annual-calc-section-title{
  display:flex;
  align-items:center;
  gap:7px;
  margin-bottom:6px;
}
.nb-annual-calc-section-title>span{
  width:18px;
  height:18px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:#172d56;
  color:#fff;

}
.nb-annual-calc-section-title h3{
  margin:0;
  color:#1f2b43;

}

.nb-annual-calc-row,
.nb-annual-calc-spend-row{
  min-height:47px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border-bottom:1px solid #f0f3f7;
}
.nb-annual-calc-copy,
.nb-annual-calc-spend-row>span:first-child{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.nb-annual-calc-copy b,
.nb-annual-calc-spend-row b{
  color:#25324a;

}
.nb-annual-calc-copy small,
.nb-annual-calc-spend-row small{
  color:#8a95a7;

}

.nb-annual-calc-segment{
  flex:0 0 auto;
  display:grid;
  grid-template-columns:46px 46px;
  gap:4px;
  padding:3px;
  border-radius:10px;
  background:#f1f4f8;
}
.nb-annual-calc-segment button{
  height:26px;
  padding:0;
  border:0;
  border-radius:8px;
  background:transparent;
  color:#78859a;

  cursor:pointer;
}
.nb-annual-calc-segment button.active{
  background:#1478f2;
  color:#fff;
  box-shadow:0 1px 4px rgba(13,111,232,.16);
}

.nb-annual-calc-spend-row{
  cursor:default;
}
.nb-annual-calc-input-wrap{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:3px;
  color:#263650;

}
.nb-annual-calc-input-wrap input{
  width:64px;
  height:30px;
  padding:0 5px;
  border:1px solid #e1e7ef;
  border-radius:8px;
  background:#f8fafc;
  color:#18243a;
  text-align:right;
  outline:none;
}
.nb-annual-calc-input-wrap input:focus{
  border-color:#8dbcf7;
  box-shadow:0 0 0 2px rgba(17,119,245,.08);
}
.nb-annual-calc-input-wrap small{
  color:#7f8b9e;
}
.nb-annual-calc-baseline,
.nb-annual-calc-unquantified{
  margin:7px 0 0;
  color:#8a95a6;

}

.nb-annual-calc-summary>div:not(.nb-annual-calc-section-title){
  min-height:29px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  color:#647188;
}
.nb-annual-calc-summary b{
  color:#26344d;
}
.nb-annual-calc-summary .positive{color:#07966d}
.nb-annual-calc-summary .negative{color:#cc4d4d}
.nb-annual-calc-summary .total{
  margin-top:4px;
  padding:9px 10px;
  border-radius:9px;
  background:#eef6ff;
  color:#192842 !important;
}
.nb-annual-calc-summary .total strong{
  color:#08966f;

}
.nb-annual-calc-done{
  width:100%;
  min-height:42px;
  margin-top:12px;
  border-radius:11px;
  background:#1177f5;
  border-color:#1177f5;

}

@media(max-width:1180px){
  .nb-credit-v1-page .nb-annual-calculator-panel{
    padding:20px 18px 26px;
    overflow:visible !important;
  }
}



/* Mobile Offer Detail drill-ins ---------------------------------------------------
   Assessment and annual-value calculation become focused full-screen second-level
   pages on mobile. Desktop keeps the approved left-story / right-task composition. */
@media(max-width:1180px){
  .nb-offer-detail-frame.nb-mobile-task-open{
    overflow:hidden;
  }
  .nb-offer-detail-frame.nb-mobile-task-open .nb-offer-detail-host,
  .nb-offer-detail-frame.nb-mobile-task-open .v4-offer-detail-page,
  .nb-offer-detail-frame.nb-mobile-task-open .v4-offer-detail-grid{
    height:100dvh !important;
    min-height:100dvh !important;
    max-height:100dvh !important;
    overflow:hidden !important;
  }
  .nb-offer-detail-frame.nb-mobile-task-open .v4-offer-poster-shell{
    display:none !important;
  }
  .nb-offer-detail-frame.nb-mobile-task-open .v4-decision-panel{
    height:100dvh !important;
    min-height:100dvh !important;
    max-height:100dvh !important;
    overflow:hidden !important;
  }
  .nb-offer-detail-frame.nb-mobile-task-open .nb-assessment-rail{
    display:flex !important;
    flex-direction:column;
  }
  .nb-offer-detail-frame.nb-mobile-task-open .nb-assessment-rail-scroll{
    flex:1 1 auto !important;
    min-height:0 !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    padding-right:0;
  }
  .nb-offer-detail-frame.nb-mobile-task-open .nb-assessment-rail-footer{
    position:static !important;
    flex:0 0 auto;
  }
  .nb-offer-detail-frame.nb-mobile-task-open .nb-annual-calculator-panel{
    overflow-x:hidden !important;
    overflow-y:auto !important;
    overscroll-behavior:contain;
  }
}

/* Assessment summary after a completed evaluation. */
.nb-assessment-inline-result{
  margin-top:10px;
  padding:14px 15px;
  border:1px solid #dfe8f4;
  border-radius:13px;
  background:#f8fbff;
}
.nb-assessment-inline-result>div>span{
  display:block;
  color:#7f8ba0;

}
.nb-assessment-inline-result>div>strong{
  display:block;
  margin-top:4px;
  color:#1d2a43;

}
.nb-assessment-inline-result>div>small{
  display:block;
  margin-top:5px;
  color:#68768b;

}
.nb-assessment-inline-result>button{
  margin-top:10px;
  padding:0;
  border:0;
  background:transparent;
  color:#0d6fe8;

  cursor:pointer;
}
.nb-assessment-inline-result.is-compact{
  margin-top:0;
  padding:13px 14px;
}
.nb-credit-v1-actions .nb-assessment-inline-result{
  margin:0;
}


/* Shared credit-card completed-state copy: keep the two result lines lightweight and inline. */
.nb-credit-assessment-line{
  display:flex;
  align-items:center;
  gap:4px;
  margin:0 2px;
  color:#7b879d;

  white-space:nowrap;
}
.nb-credit-assessment-check{
  color:#0d9b73;
}
.nb-credit-assessment-line button{
  padding:0;
  border:0;
  background:transparent;
  color:#0d6fe8;

  cursor:pointer;
}


/* Credit-card story template ------------------------------------------------------
   Background art is intentionally optional. Copy and art are separate data so locale
   changes never require regenerating the image. The carousel lives outside the stage. */
.nb-credit-story-shell{
  background:#fff;
}
.nb-credit-story{
  height:100%;
  min-height:0;
  display:grid;
  grid-template-rows:minmax(0,1fr) 104px;
  background:#fff;
}
.nb-credit-story-stage{
  position:relative;
  min-height:0;
  overflow:hidden;
  background:#f4f6f9;
}
.nb-credit-story-background,
.nb-credit-story-background-placeholder{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.nb-credit-story-background{
  display:block;
  object-fit:cover;
}
.nb-credit-story-background-placeholder{
  background:linear-gradient(145deg,#f7f8fa 0%,#eef1f5 100%);
}
.nb-credit-story-copy{
  position:absolute;
  z-index:2;
  top:11%;
  left:7.5%;
  width:min(48%,420px);
  color:#15213a;
}
.nb-credit-story-copy.is-empty{
  width:48%;
  height:32%;
}
.nb-credit-story-eyebrow{
  font-size:11px;
  line-height:1.2;
  font-weight:760;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#6d7a90;
}
.nb-credit-story-copy h2{
  margin:0;
  max-width:100%;
  font-size:38px;
  line-height:1.08;
  letter-spacing:-.035em;
  font-weight:780;
  text-align:left;
  color:#15213a;
}
.nb-credit-story-copy p{
  margin:12px 0 0;
  max-width:100%;
  color:#5f6d82;
}

/* Poster copy is marketing art, not app UI typography. Each slide owns its visual scale. */
.nb-credit-story-copy[data-slide-id="intro"] h2{
  font-size:36px;
  line-height:1.1;
  font-weight:700;
  letter-spacing:-.025em;
}
.nb-credit-story-copy[data-slide-id="intro"] p{
  margin-top:10px;
  font-size:58px;
  line-height:1;
  font-weight:800;
  letter-spacing:-.045em;
  color:#15213a;
}
.nb-credit-story-copy[data-slide-id="highlights"] h2{
  font-size:42px;
  line-height:1.08;
  font-weight:760;
  letter-spacing:-.035em;
}
.nb-credit-story-copy[data-slide-id="highlights"] p{
  margin-top:12px;
  font-size:34px;
  line-height:1.12;
  font-weight:720;
  letter-spacing:-.025em;
  color:#15213a;
}
.nb-credit-story-copy[data-slide-id="points"]{
  width:min(58%,460px);
}
.nb-credit-story-copy[data-slide-id="points"] h2{
  font-size:34px;
  line-height:1.08;
  font-weight:740;
  letter-spacing:-.03em;
}
.nb-credit-story-copy[data-slide-id="points"] p{
  margin-top:12px;
  font-size:27px;
  line-height:1.45;
  font-weight:650;
  letter-spacing:-.02em;
  white-space:pre-line;
  color:#15213a;
}
.nb-credit-story-copy[data-slide-id="fit"] h2,
.nb-credit-story-copy[data-slide-id="fit"] p{
  font-size:40px;
  line-height:1.14;
  font-weight:740;
  letter-spacing:-.03em;
  color:#15213a;
}
.nb-credit-story-copy[data-slide-id="fit"] p{
  margin-top:8px;
}
.nb-credit-story-dots{
  position:absolute;
  z-index:3;
  left:50%;
  bottom:18px;
  display:flex;
  gap:7px;
  transform:translateX(-50%);
}
.nb-credit-story-dots span{
  width:6px;
  height:6px;
  border-radius:999px;
  background:rgba(87,101,122,.26);
}
.nb-credit-story-dots span.active{
  width:18px;
  background:#5d6b80;
}
.nb-credit-story-carousel{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0;
  align-items:stretch;
  border-top:1px solid #e7ebf1;
  background:#fff;
}
.nb-credit-story-nav-item{
  position:relative;
  border:0;
  border-right:1px solid #edf0f4;
  background:#fff;
  color:#7a8598;
  cursor:pointer;
  padding:8px 8px 7px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
}
.nb-credit-story-nav-thumb{
  display:block;
  width:46px;
  height:52px;
  overflow:hidden;
  border-radius:7px;
  border:1px solid #e4e9ef;
  background:#eef1f5;
}
.nb-credit-story-nav-thumb img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.nb-credit-story-nav-label{
  display:block;
}
.nb-credit-story-nav-item:last-child{border-right:0}
.nb-credit-story-nav-item::after{
  content:"";
  position:absolute;
  left:18%;
  right:18%;
  bottom:0;
  height:2px;
  border-radius:999px 999px 0 0;
  background:transparent;
}
.nb-credit-story-nav-item:hover{
  background:#fafbfc;
  color:#344158;
}
.nb-credit-story-nav-item.active{
  color:#17213a;
}
.nb-credit-story-nav-item.active::after{
  background:#17213a;
}

@media(max-width:1180px){
  .nb-credit-story{
    min-height:680px;
    grid-template-rows:minmax(560px,1fr) 100px;
  }
}
@media(max-width:780px){
  .nb-credit-story{
    min-height:500px;
    grid-template-rows:minmax(500px,1fr);
  }
  .nb-credit-story-stage{
    touch-action:pan-y;
    cursor:grab;
  }
  .nb-credit-story-stage:active{cursor:grabbing}
  .nb-credit-story-carousel{display:none}
  .nb-credit-story-copy{
    top:9%;
    left:7%;
    width:62%;
  }
  .nb-credit-story-copy h2{font-size:30px}
  .nb-credit-story-copy[data-slide-id="intro"] h2{font-size:28px}
  .nb-credit-story-copy[data-slide-id="intro"] p{font-size:44px}
  .nb-credit-story-copy[data-slide-id="highlights"] h2{font-size:31px}
  .nb-credit-story-copy[data-slide-id="highlights"] p{font-size:27px}
  .nb-credit-story-copy[data-slide-id="points"]{width:72%}
  .nb-credit-story-copy[data-slide-id="points"] h2{font-size:27px}
  .nb-credit-story-copy[data-slide-id="points"] p{font-size:21px}
  .nb-credit-story-copy[data-slide-id="fit"] h2,
  .nb-credit-story-copy[data-slide-id="fit"] p{font-size:30px}
  .nb-credit-story-carousel{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nb-credit-story-nav-item{
    min-height:59px;
    border-bottom:1px solid #edf0f4;
    padding:5px 6px;
    gap:4px;
  }
  .nb-credit-story-nav-thumb{
    width:36px;
    height:40px;
    border-radius:6px;
  }
}