/*
 * LIV International — Cart Summary Modern v3
 * Visual continuity pass: /store now matches /products/allproducts design language
 * Date: 2026-04-21
 *
 * Scope rules (ALL selectors must be scoped):
 *   Membership card  → #dnn_ctr1031_ContentPane / #dnn1031root / #dnn1031AddSignUp
 *   Cart grid        → #angrid1037
 *   Cart buttons     → #dnn_ctr1037_ContentPane
 *
 * Mandatory:
 *   NO font-size declarations
 *   NO .angrid-simple-btn innerHTML modification (kills Angular live-price binding)
 *   PV column = nth-child(6) | frmID column = nth-child(7) — hide frmID
 *   Prefix: livcart-
 */

/* ─────────────────────────────────────────────────────────────
   DESIGN TOKENS
   Mirrors /products/allproducts listore palette exactly.
   #00ab54 kept only for PV pill badge — it's a data indicator,
   not a brand element. All brand surfaces use sage.
───────────────────────────────────────────────────────────── */
:root {
  --livcart-sage:         #5c7d62;
  --livcart-sage-dark:    #3d6b47;
  --livcart-sage-pale:    #eef2ef;
  --livcart-forest:       #1e2b22;
  --livcart-cream:        #f8f5ef;
  --livcart-gold:         #d4aa6a;
  --livcart-gold-bg:      rgba(184, 149, 90, 0.15);
  --livcart-gold-border:  rgba(184, 149, 90, 0.4);
  --livcart-green:        #00ab54;
  --livcart-green-dark:   #008a44;
  --livcart-green-pale:   #e8f7ef;
  --livcart-border:       rgba(30, 43, 34, 0.10);
  --livcart-shadow-card:  0 2px 8px rgba(30, 43, 34, 0.08);
  --livcart-shadow-btn:   0 8px 28px rgba(92, 125, 98, 0.28);
  --livcart-radius-card:  20px;
  --livcart-radius-pill:  999px;
  --livcart-radius-sm:    8px;
  --livcart-transition:   all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ─────────────────────────────────────────────────────────────
   1. SECTION BACKGROUND
   Cream zone on the cart module pane — matches .listore-page-bg
───────────────────────────────────────────────────────────── */

#dnn_ctr1037_ContentPane {
  background: var(--livcart-cream) !important;
  padding: 24px 0 !important;
}

/* ─────────────────────────────────────────────────────────────
   2. MEMBERSHIP CARD — #dnn_ctr1031_ContentPane
───────────────────────────────────────────────────────────── */

#dnn_ctr1031_ContentPane .complex-pricing-table {
  margin-top: 20px !important;
}

/* Outer plan wrapper — padding-top: 0 makes header flush with card top edge */
#dnn_ctr1031_ContentPane .plan,
#dnn_ctr1031_ContentPane .pricing-table-3 {
  border-radius: var(--livcart-radius-card) !important;
  overflow: hidden !important;
  box-shadow: var(--livcart-shadow-card) !important;
  border: none !important;
  background: #ffffff !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
}

#dnn_ctr1031_ContentPane .pricing-header-3 {
  margin-top: 0 !important;
}

/* FIX: liv-shopping.css sets .pricing-table-hot to red/warm bg — kills the brown bleed */
#dnn_ctr1031_ContentPane .pricing-table-hot {
  background: #ffffff !important;
}

/* Featured plan — gold halo to signal premium tier */
#dnn_ctr1031_ContentPane .pricing-table-featured {
  box-shadow: 0 4px 20px rgba(184, 149, 90, 0.22), var(--livcart-shadow-card) !important;
  border: 1.5px solid var(--livcart-gold-border) !important;
}

/* Header — sage green gradient replaces red/default */
#dnn_ctr1031_ContentPane .pricing-header-3 {
  background: linear-gradient(135deg, var(--livcart-sage-dark) 0%, var(--livcart-sage) 100%) !important;
  padding: 20px 24px 36px !important;
  position: relative;
  border-bottom: none !important;
}

/*
 * THE FIX: liv-shopping.css sets h3 { background: rgb(239,239,239) }
 * The h3 sits on top of the gradient div, blocking it entirely.
 * Must be killed explicitly before the gradient shows through.
 * Also kill the h3 border-bottom that draws a line through the MEMBER EXCLUSIVE chip.
 */
#dnn_ctr1031_ContentPane .pricing-header-3 h3,
#dnn_ctr1031_ContentPane .pricing-header-3 h3 *,
#dnn_ctr1031_ContentPane .pricing-header-3 span {
  background: transparent !important;
  color: #ffffff !important;
  border: none !important;
}

/* Kill any hr or divider inside the header */
#dnn_ctr1031_ContentPane .pricing-header-3 hr {
  display: none !important;
}

/* Gold "MEMBER EXCLUSIVE" chip — positioned bottom-right of header */
#dnn_ctr1031_ContentPane .pricing-table-featured .pricing-header-3::after {
  content: "MEMBER EXCLUSIVE";
  display: inline-block;
  background: var(--livcart-gold-bg);
  color: var(--livcart-gold);
  border: 1px solid var(--livcart-gold-border);
  border-radius: var(--livcart-radius-pill);
  padding: 2px 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  position: absolute;
  bottom: 10px;
  right: 16px;
}

/* Card body and footer */
#dnn_ctr1031_ContentPane .pricing-body-3 {
  background: #ffffff !important;
  padding: 16px 24px !important;
}

#dnn_ctr1031_ContentPane .pricing-footer-3 {
  background: #ffffff !important;
  padding: 20px 24px 32px !important;
  border-top: 1px solid var(--livcart-border) !important;
}

/* "Add Membership" CTA — full pill, sage fill, glowing shadow */
#dnn1031AddSignUp {
  border-radius: var(--livcart-radius-pill) !important;
  background: var(--livcart-sage) !important;
  border: none !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  padding: 10px 28px !important;
  margin-bottom: 8px !important;
  box-shadow: var(--livcart-shadow-btn) !important;
  transition: var(--livcart-transition) !important;
  cursor: pointer;
  display: inline-block;
}

#dnn1031AddSignUp:hover,
#dnn1031AddFreeSku:hover {
  background: var(--livcart-sage-dark) !important;
  box-shadow: 0 10px 32px rgba(92, 125, 98, 0.38) !important;
  transform: translateY(-1px);
}

#dnn1031AddSignUp:focus,
#dnn1031AddFreeSku:focus {
  outline: 3px solid var(--livcart-sage) !important;
  outline-offset: 2px !important;
}

/* AddFreeSku — second membership button, same pill treatment */
#dnn1031AddFreeSku {
  border-radius: var(--livcart-radius-pill) !important;
  background: var(--livcart-sage) !important;
  border: none !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  padding: 10px 28px !important;
  margin-bottom: 8px !important;
  box-shadow: var(--livcart-shadow-btn) !important;
  transition: var(--livcart-transition) !important;
  cursor: pointer;
  display: inline-block;
}

/* ─────────────────────────────────────────────────────────────
   3. ACTION GRID — #angrid1037
   Columns: Product(1) Qty(2) Reg.Price(3) MSP Price(4)
            MSP Savings(5) PV(6) frmID(7, hidden) Actions(8)
───────────────────────────────────────────────────────────── */

#angrid1037 table {
  border-collapse: collapse !important;
  width: 100% !important;
}

/* Header — brand sage (shifted from lime #00ab54) */
#angrid1037 thead th {
  background: var(--livcart-sage) !important;
  color: #ffffff !important;
  padding: 12px 14px !important;
  border: none !important;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

#angrid1037 thead th:first-child { border-radius: var(--livcart-radius-sm) 0 0 0 !important; }
#angrid1037 thead th:last-child  { border-radius: 0 var(--livcart-radius-sm) 0 0 !important; }

/* Body rows — alternating cream/white */
#angrid1037 tbody tr {
  background: #ffffff;
  transition: background 0.15s ease;
}

#angrid1037 tbody tr:nth-child(even) {
  background: var(--livcart-cream);
}

#angrid1037 tbody tr:hover {
  background: var(--livcart-sage-pale);
}

/* Cells */
#angrid1037 td {
  padding: 12px 14px !important;
  vertical-align: middle !important;
  color: var(--livcart-forest);
  border-bottom: 1px solid var(--livcart-border) !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
}

/* PV column (6th) — green pill badge (data indicator, not brand) */
#angrid1037 tbody td:nth-child(6) {
  text-align: center !important;
  min-width: 64px;
}

#angrid1037 tbody td:nth-child(6) .grid-field-value {
  display: inline-block;
  background: var(--livcart-green-pale) !important;
  color: var(--livcart-green-dark) !important;
  border-radius: var(--livcart-radius-pill);
  padding: 2px 10px;
  font-weight: 700;
  border: 1px solid rgba(0, 138, 68, 0.2);
  white-space: nowrap;
}

/* frmID column (7th) — hidden on all screen sizes */
#angrid1037 th:nth-child(7),
#angrid1037 td:nth-child(7) {
  display: none !important;
}

/* Footer — cream with sage top border */
#angrid1037 .grid-footer td,
#angrid1037 .grid-footer-item {
  background: var(--livcart-cream) !important;
  border-top: 2px solid var(--livcart-sage) !important;
  border-bottom: none !important;
  padding: 12px 14px !important;
  font-weight: 700;
}

#angrid1037 .grid-footer .columnFooterSum {
  color: var(--livcart-sage-dark) !important;
  font-weight: 700;
}

/* ─────────────────────────────────────────────────────────────
   4. CART ACTION BUTTONS — #dnn_ctr1037_ContentPane
───────────────────────────────────────────────────────────── */

/* +/- / delete row buttons — CSS wrapper only, never innerHTML */
#angrid1037 .angrid-simple-btn {
  border-radius: var(--livcart-radius-sm) !important;
  transition: var(--livcart-transition) !important;
  cursor: pointer;
}

#angrid1037 .angrid-simple-btn:hover {
  border-color: var(--livcart-sage) !important;
  background: var(--livcart-sage-pale) !important;
}

/* Ghost pill buttons — Empty Cart / Keep Shopping */
#dnn_ctr1037_ContentPane .wsc-button {
  border-radius: var(--livcart-radius-pill) !important;
  border: 2px solid var(--livcart-sage) !important;
  color: var(--livcart-sage) !important;
  background: transparent !important;
  font-weight: 600 !important;
  padding: 8px 24px !important;
  transition: var(--livcart-transition) !important;
}

#dnn_ctr1037_ContentPane .wsc-button:hover {
  background: var(--livcart-sage-pale) !important;
  border-color: var(--livcart-sage-dark) !important;
  color: var(--livcart-sage-dark) !important;
}

/* Ghost pill hover color — exclude .liv-purple (payment CTA) from sage-text rule */
#dnn_ctr1037_ContentPane .wsc-button:not(.liv-purple):hover { color: var(--livcart-sage-dark) !important; }
.wsc-button.wsc-button-border:not(.liv-purple):hover { color: var(--livcart-sage) !important; }

/* Payment CTA (.liv-purple) — full pill, sage gradient */
#dnn_ctr1037_ContentPane .liv-purple {
  background: linear-gradient(135deg, var(--livcart-sage) 0%, var(--livcart-sage-dark) 100%) !important;
  border: none !important;
  border-radius: var(--livcart-radius-pill) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  padding: 10px 28px !important;
  cursor: pointer;
  transition: var(--livcart-transition) !important;
  box-shadow: var(--livcart-shadow-btn) !important;
}

#dnn_ctr1037_ContentPane .liv-purple:hover {
  background: linear-gradient(135deg, var(--livcart-sage-dark) 0%, #2a5236 100%) !important;
  box-shadow: 0 10px 32px rgba(92, 125, 98, 0.38) !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}

#dnn_ctr1037_ContentPane .liv-purple:active {
  transform: translateY(0) scale(0.97);
}

/* Focus rings — all interactive cart elements */
#dnn_ctr1037_ContentPane .wsc-button:focus,
#dnn_ctr1037_ContentPane .liv-purple:focus,
#angrid1037 .angrid-simple-btn:focus,
#dnn1031AddSignUp:focus {
  outline: 3px solid var(--livcart-sage) !important;
  outline-offset: 2px !important;
}

/* ─────────────────────────────────────────────────────────────
   5. MOBILE (max-width: 767px)
───────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
  #angrid1037 tbody td:nth-child(6) { min-width: 50px; }

  #dnn_ctr1037_ContentPane .wsc-button,
  #dnn_ctr1037_ContentPane .liv-purple {
    width: 100% !important;
    text-align: center !important;
    margin-bottom: 8px;
  }

  /* Gold badge repositions below header text on narrow screens */
  #dnn_ctr1031_ContentPane .pricing-table-featured .pricing-header-3::after {
    position: static;
    display: block;
    margin: 8px 0 0 0;
    text-align: left;
  }
}

/* ─────────────────────────────────────────────────────────────
   6. REDUCED MOTION
───────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  #angrid1037 tbody tr,
  #dnn1031AddSignUp,
  #dnn_ctr1037_ContentPane .liv-purple,
  #dnn_ctr1037_ContentPane .wsc-button,
  #angrid1037 .angrid-simple-btn {
    transition: none !important;
    transform: none !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   7. PRINT
───────────────────────────────────────────────────────────── */

@media print {
  #angrid1037 tbody tr             { box-shadow: none !important; border: 1px solid #ccc !important; break-inside: avoid; }
  #angrid1037 .angrid-simple-btn,
  #dnn_ctr1031_ContentPane,
  #dnn_ctr1037_ContentPane .wsc-button { display: none !important; }
}