/* ==========================================================================
   Order Summary sidebar - ported from the collegeessay.org order page
   (new-land/css/calculator-redesign.min.css) and recoloured to brand teal.

     #2563EB (total price, Next Step button)  ->  #05ADA3
     #1D4ED8 (button hover)                   ->  #048E86
     rgba(37,99,235,...) shadows              ->  rgba(5,173,163,...)

   Slate neutrals and the #10B981 success green are unchanged, as on the
   reference. The markup keeps MEW's own hooks: this site drives the totals by
   id (#priceBoxFinal, #priceBoxCheck, #priceBoxRemaining) where collegeessay
   uses classes, so nothing here renames anything.
   ========================================================================== */

.summaryBar.ordSummary {
  --osum-teal: #05ADA3;
  --osum-teal-d: #048E86;
}

/* ---------- which sidebar state shows ----------
   The step-1 "pay-as-you-go" box is retired (order-now.js no longer takes that
   branch), so the Estimated Price card is the only state. new-summary.css has
   .step1Options' own `display:none` commented out and something upstream hides
   .calculator before the first calculate-price call, which left the page
   showing the retired box on load - both are settled here. */
.summaryBar.ordSummary .step1Options { display: none !important; }
.summaryBar.ordSummary .calculator.summaryCalculator { display: block; }

/* ---------- card ---------- */
.calculator.summaryCalculator {
  background: #fff;
  border-radius: 20px;
  padding: 32px 28px;
  border: 1px solid #e5e7eb;
  max-width: 400px;
  box-shadow: 0 4px 16px 0 #0000001A;
}

/* MEW keeps the heading above .calculator rather than inside it, so it is
   styled on its own hooks instead of .summaryHead / .subtitle-text */
.summaryBar.ordSummary .choosePrice {
  margin: 0;
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  text-transform: none;
  color: #1e293b;
  letter-spacing: -.3px;
}
.summaryBar.ordSummary .ordSummary-sub {
  font-size: 14px;
  color: #64748b;
  text-align: center;
  margin: 4px 0 28px;
  font-weight: 400;
}

/* ---------- line items ---------- */
.pricingBreakDownNew .singlePriceDetail {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #f1f5f9;
}
.pricingBreakDownNew .singlePriceDetail:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
.pricingBreakDownNew .singlePriceDetail .head {
  font-size: 15px !important;
  font-weight: 500 !important;
  color: #475569 !important;
  line-height: 1.4 !important;
  margin: 0 !important;
}
.pricingBreakDownNew .singlePriceDetail .bonusPrice {
  font-size: 17px !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  margin: 0 !important;
}

.pricingBreakDownNew.noBorder .subTotal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding: 0;
}
.pricingBreakDownNew.noBorder .subTotal .head {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #64748b !important;
  line-height: 1.4 !important;
  margin: 0 !important;
}
.pricingBreakDownNew.noBorder .subTotal .head2 {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #475569 !important;
}
.pricingBreakDownNew.noBorder .subTotal .headDesc {
  font-size: 12px !important;
  color: #10b981 !important;
  font-weight: 600 !important;
  margin-top: 4px !important;
  text-transform: uppercase;
  letter-spacing: .3px;
}
.pricingBreakDownNew.noBorder .subTotal .bonusPrice {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  text-align: right;
}
.pricingBreakDownNew.noBorder .subTotal .bonusPrice.decorated {
  font-size: 14px !important;
  text-decoration: line-through;
  text-decoration-color: #94A3B8;
  color: #94a3b8 !important;
  font-weight: 400 !important;
  margin-bottom: 4px;
}
.pricingBreakDownNew.noBorder .subTotal .bonusPrice.bigger {
  color: #10b981 !important;
  font-weight: 700 !important;
}

/* order-now.js reveals this row with jQuery .show(), which writes an inline
   `display:block` - jQuery restores the element's default display and cannot
   know a stylesheet wanted it to be a flex row, so the label and the figure
   stacked. !important is what beats that inline value. */
.summaryBar.ordSummary.is-priced .subTotal.original { display: flex !important; }
.summaryBar.ordSummary .subTotal.original > p { margin: 0; }
.summaryBar.ordSummary .subTotal.original > p:last-child { justify-content: flex-end !important; }

.subTotal.original {
  padding: 20px 0 !important;
  border-top: 1px solid #e5e7eb !important;
  border-bottom: none !important;
  margin-top: 20px !important;
  margin-bottom: 0 !important;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.subTotal.original .head {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #475569 !important;
  margin: 0 !important;
}
.subTotal.original span.real {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #1e293b !important;
}

/* ---------- prepay ----------
   Same jQuery trap as the Subtotal row: order-now.js reveals this with .show(),
   which writes an inline `display:block` and so overrides order-new.css's
   `.prepayCheck{display:flex}` - the custom checkbox then sat on its own line
   above the label. .prepayChecked has it too, via slideDown(). Only !important
   outranks an inline value. */
.summaryBar.ordSummary.is-priced .prepayCheck {
  display: flex !important;
  align-items: center;
}
.summaryBar.ordSummary .prepayChecked[style*="block"] { display: flex !important; }

.summaryBar.ordSummary .prepayCheck {
  padding: 16px 0 !important;
  border-bottom: 1px solid #e5e7eb;
}
/* The "Service Guaranteed" tooltip is pinned by order-new.css with offsets
   measured against the old sidebar (position:absolute; top:-62px; left:67px).
   In the rebuilt card that drops it over the Subtotal row and out to the right.
   Anchor it to the prepay row instead and let it span the card width so it can
   never spill outside. The stray ::after is a leftover arrow with no borders
   left on it, so it is neutralised rather than left to render as a 0px box. */
.summaryBar.ordSummary .prepayCheck { position: relative; }
.summaryBar.ordSummary .prepayCheck span.toolText {
  top: auto;
  bottom: calc(100% - 8px);
  left: 0;
  right: 0;
  width: auto;
  max-width: none;
  padding: 10px 12px;
  font-size: 11.5px;
  line-height: 1.5;
  text-align: left;
  color: #475569;
  border: 1px solid var(--osum-line, #E9EDF1);
  border-radius: 8px;
  z-index: 30;
}
.summaryBar.ordSummary .prepayCheck span.toolText strong { color: #1e293b; }
.summaryBar.ordSummary .prepayCheck span#talkbubble::after { display: none; }

.summaryBar.ordSummary .prepayCheck .prepayTxt { margin: 0 0 0 8px; }
.summaryBar.ordSummary .prepayCheck .prepayTool { display: inline-flex; margin-left: 6px; }
.summaryBar.ordSummary .prepayCheck .prepayTool svg { display: block; }
.summaryBar.ordSummary .prepayCheck .prepayTxt {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #475569 !important;
}
.summaryBar.ordSummary .prepayChecked {
  display: flex;
  justify-content: space-between;
  padding-top: 12px;
  font-size: 14px;
  color: #64748b;
}
.summaryBar.ordSummary .prepayChecked .right { text-align: right; font-weight: 600; color: #1e293b; }
.summaryBar.ordSummary .prepayChecked p { margin: 0 0 6px; }

/* ---------- before a price exists ----------
   calculate-price only runs once the visitor has given an email and phone, so
   until then there is nothing to itemise and the card shows just the locked
   Estimated Price, as on the reference. order-now.js adds .is-priced when a
   price comes back, which switches all of this back on. */
.summaryBar.ordSummary:not(.is-priced) .pricingBreakDownNew,
.summaryBar.ordSummary:not(.is-priced) .subTotal.original,
.summaryBar.ordSummary:not(.is-priced) .prepayCheck,
.summaryBar.ordSummary:not(.is-priced) .prepayChecked,
.summaryBar.ordSummary:not(.is-priced) .user_discount { display: none !important; }

/* ---------- total ---------- */
/* order-new.css lays .totalCal out as a space-between flex row, which puts the
   label and the figure side by side; the card stacks them centred instead. */
.summaryBar.ordSummary .totalCal { display: block; }
.summaryBar.ordSummary .totalCal p {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.summaryBar.ordSummary .totalCal {
  background: 0 0 !important;
  border-radius: 0 !important;
  padding: 32px 0 !important;
  margin-bottom: 0;
  text-align: center;
  border-bottom: 1px solid #e5e7eb;
}
.summaryBar.ordSummary .totalCal .head,
.summaryBar.ordSummary .totalCal .totalHead {
  font-size: 15px !important;
  font-weight: 500 !important;
  color: #64748b !important;
  margin: 0 0 12px 0 !important;
  text-align: center;
  display: block;
}
/* When a wallet plan is active, order-now.js rewrites the label to
   "Total Due Now <span class='total_due_span'>(i)</span>". order-new.css has
   `#total_head span{display:flex}`, which made that span a block-level flex box
   on its own line, dropping the icon under the label and hard against the left
   edge. Lay the label out as a centred row so the icon sits beside the text.
   The override needs an id of its own to outrank that selector. */
.summaryBar.ordSummary .totalCal #total_head {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.summaryBar.ordSummary .totalCal #total_head span.total_due_span {
  display: inline-flex;
  align-items: center;
  width: auto;
  flex: none;
  cursor: help;
  opacity: .55;
}
.summaryBar.ordSummary .totalCal #total_head span.total_due_span svg {
  width: 16px;
  height: 16px;
  display: block;
}

.summaryBar.ordSummary .totalCal .totalPrice,
.summaryBar.ordSummary .totalCal span.real {
  font-size: 56px !important;
  font-weight: 700 !important;
  color: var(--osum-teal) !important;
  letter-spacing: -1.5px;
  display: block !important;
  text-align: center;
  line-height: 1 !important;
  margin: 0 !important;
}

/* The price is hidden behind a blur until the visitor has given an email and
   phone; order-now.js drops the class once calculate-price returns. */
.summaryBar.ordSummary .blurr {
  filter: blur(9px);
  user-select: none;
  pointer-events: none;
}

/* ---------- locked-price panel ---------- */
.price-unlock-section {
  background: #f8fafc;
  border-radius: 12px;
  padding: 20px 24px;
  margin: 24px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 1px solid #e5e7eb;
}
.price-unlock-section .lock-icon {
  width: 48px;
  height: 48px;
  background: #e5e7eb;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.price-unlock-section .lock-icon svg { width: 24px; height: 24px; stroke: #64748B; color: #64748b; }
.price-unlock-section .unlock-text {
  font-size: 14px;
  color: #64748b;
  text-align: center;
  margin: 0;
  font-weight: 500;
  line-height: 1.5;
}

/* ---------- Next Step ----------
   new-summary.css hides .orderBtnsNew until a price lands, but the reference
   offers the step while the price is still locked, so it starts visible here.
   order-now.js still hides it on the later steps and re-shows it on step 1. */
.summaryBar.ordSummary .orderBtnsNew { display: block; }

.summaryBar.ordSummary .orderBtnsNew a.nextBtnNew {
  width: 100%;
  background: var(--osum-teal) !important;
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  padding: 18px 24px !important;
  border-radius: 12px !important;
  border: none !important;
  cursor: pointer;
  transition: all .2s;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-decoration: none !important;
  box-shadow: 0 2px 8px rgba(5, 173, 163, .2);
}
.summaryBar.ordSummary .orderBtnsNew a.nextBtnNew:hover {
  background: var(--osum-teal-d) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(5, 173, 163, .35) !important;
}
.summaryBar.ordSummary .orderBtnsNew .alreadyUserText {
  font-size: 13px;
  color: #64748b;
  text-align: center;
  margin: 12px 0 0;
}
.summaryBar.ordSummary .orderBtnsNew .alreadyUserText a { color: var(--osum-teal); font-weight: 600; }

/* ---------- trust row ---------- */
.summaryBar.ordSummary .ordSummary-trust {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
  margin: 24px 0 0;
  font-size: 13px;
  color: #475569;
  font-weight: 500;
}
.summaryBar.ordSummary .ordSummary-trust span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.summaryBar.ordSummary .ordSummary-trust svg {
  width: 18px;
  height: 18px;
  color: #10b981;
  flex-shrink: 0;
}

/* ---------- wallet top-up block ---------- */
.packageBuying {
  background: #f8fafc;
  border-radius: 12px;
  padding: 20px;
  margin: 20px 0;
  border: 1px solid #e5e7eb;
}
.packageBuying .singlePriceDetail {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #e5e7eb;
}
.packageBuying .singlePriceDetail:last-child { border-bottom: none; font-weight: 600; }
.packageBuying .singlePriceDetail .head { font-size: 14px; font-weight: 500; color: #475569; }
.packageBuying .singlePriceDetail strong { font-weight: 700; color: #1e293b; }
.packageBuying .singlePriceDetail .bonusPrice { font-size: 16px; font-weight: 600; color: #1e293b; }

/* ---------- sticky column ---------- */
@media (min-width: 992px) {
  .summaryBar.ordSummary { position: sticky; top: 18px; }
}

@media (max-width: 768px) {
  .calculator.summaryCalculator { max-width: 100%; padding: 24px 20px; }
  .summaryBar.ordSummary .totalCal .totalPrice,
  .summaryBar.ordSummary .totalCal span.real { font-size: 46px !important; }
  .summaryBar.ordSummary .choosePrice { font-size: 20px; }
  .summaryBar.ordSummary .totalCal { padding: 22px 0 !important; }
  .summaryBar.ordSummary .orderBtnsNew a.nextBtnNew { font-size: 14px !important; font-weight: 500 !important; }
  .summaryBar.ordSummary .ordSummary-trust { gap: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .summaryBar.ordSummary .orderBtnsNew a.nextBtnNew { transition: none; }
  .summaryBar.ordSummary .orderBtnsNew a.nextBtnNew:hover { transform: none; }
}