/* ============================================
   SUMMARY (Your Design's) REDESIGN
   --------------------------------------------
   Two layout modes driven by a class on .result-con:
     • .summary-has-extras → two-column grid: design card LEFT,
       ordered-products + Add-Ons + Notes RIGHT (pulled toward
       center). This applies when the active product has add-ons
       or customer notes enabled in product-config.
     • .summary-no-extras → centered single card. Same visual
       polish for the design card, just a one-column flow with
       the ordered-products line below it.
   ============================================ */

/* ============================================
   PAGE BACKGROUND (universal)
   ============================================ */
body {
  background: linear-gradient(135deg, #f5f7fc 0%, #eef2f9 100%) !important;
}

/* ============================================
   TOP NAVBAR — not fixed, scrolls with page
   ============================================ */
nav.navbar {
  position: static !important;
  top: auto !important;
}
.all-content {
  padding-top: 0 !important;
}

/* ============================================
   PAGE WRAPPER
   ============================================ */
.result {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  min-height: 0 !important;
}

/* ============================================
   HEADER ROW: "Back to Design" + "Your Design's"
   Static (not sticky), inline next to each other
   ============================================ */
.result > .row.mb-4 {
  /* Breathing room between the page header (navbar) and the "Back to
     Design" + "Your Design's" header row. Was 0 — the title was sitting
     flush against the navbar with no visual separation. */
  margin: 18px 0 6px !important;
  padding: 0 !important;
  position: static !important;
  top: auto !important;
  z-index: auto !important;
}
.result > .row.mb-4 .col-md-12 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin: 0 !important;
}
.result > .row.mb-4 .position-relative {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 0 !important;
  margin: 0 !important;
}
.result > .row.mb-4 .back-to-design {
  margin: 0 !important;
  padding: 6px 12px !important;
}
.result > .row.mb-4 .heading {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.02em !important;
}

/* ============================================
   DESIGN CARD — visual polish (universal)
   ============================================ */
.created-design {
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
}
.created-design .card {
  border: 1px solid rgba(99, 80, 230, 0.08) !important;
  border-radius: 20px !important;
  box-shadow:
    0 12px 40px rgba(20, 25, 60, 0.08),
    0 2px 8px rgba(20, 25, 60, 0.04) !important;
  background: #ffffff !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  max-height: 100% !important;
  padding: 14px !important;
  gap: 10px !important;
}

/* Image preview area with checkerboard */
.created-design .card .result-content {
  width: 100% !important;
  flex: 1 1 auto !important;
  height: auto !important;
  max-height: none !important;
  min-height: 200px !important;
  border-radius: 14px !important;
  background:
    linear-gradient(45deg, #f0f1f6 25%, transparent 25%),
    linear-gradient(-45deg, #f0f1f6 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #f0f1f6 75%),
    linear-gradient(-45deg, transparent 75%, #f0f1f6 75%) !important;
  background-size: 22px 22px !important;
  background-position: 0 0, 0 11px, 11px -11px, -11px 0px !important;
  background-color: #fafbff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  border: 1px solid #ececf5 !important;
  padding: 18px !important;
  overflow: hidden !important;
}

/* "Sheet 1" badge in image corner */
.created-design .card .result-content > .sheet-label,
.created-design .card .result-content > span:first-child,
.created-design .card .result-content > div:first-child:not(.final-svg):not(.svg-preview) {
  background: rgba(20, 22, 38, 0.85) !important;
  backdrop-filter: blur(8px) !important;
  color: #fff !important;
  padding: 5px 11px !important;
  border-radius: 10px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  position: absolute !important;
  top: 12px !important;
  left: 12px !important;
  z-index: 5 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* SVG preview, contained inside image area */
.created-design .card .final-svg,
.created-design .card .svg-preview {
  position: absolute !important;
  inset: 18px !important;
  width: auto !important;
  height: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  filter: drop-shadow(0 16px 28px rgba(0, 0, 0, 0.15)) !important;
}
.created-design .card .final-svg svg,
.created-design .card .svg-preview svg {
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
}

/* Card body: dimensions, quantity, action buttons */
.created-design .card .card-body {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 auto !important;
}
.created-design .card .product-size {
  font-size: 14px !important;
  color: #4a5070 !important;
  padding: 10px 14px !important;
  background: linear-gradient(135deg, #f7f8ff, #eef0fb) !important;
  border-radius: 10px !important;
  border: 1px solid rgba(99, 80, 230, 0.1) !important;
  width: 100% !important;
  height: auto !important;
  display: flex !important;
  gap: 22px !important;
  align-items: center !important;
}
.created-design .card .product-size strong,
.created-design .card .product-size b {
  color: #1a1f3a !important;
  font-weight: 700 !important;
}
.created-design .card .form-group {
  width: 100% !important;
  height: auto !important;
  padding: 6px 14px !important;
  background: #fafbff !important;
  border-radius: 10px !important;
  border: 1px solid #ececf5 !important;
  justify-content: space-between !important;
  margin: 0 !important;
}
.created-design .card .action-btn {
  width: 100% !important;
  min-height: 42px !important;
  display: flex !important;
  gap: 10px !important;
  margin: 2px 0 0 0 !important;
}
.created-design .card .action-btn button {
  flex: 1 !important;
  padding: 10px 16px !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  transition: all 0.2s ease !important;
}
.created-design .card .action-btn button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12) !important;
}
.created-design .card .action-btn button[class*="primary"],
.created-design .card .action-btn button[class*="edit"] {
  background: linear-gradient(135deg, #4f46e5, #6366f1) !important;
  border: none !important;
  color: white !important;
  box-shadow: 0 6px 18px rgba(79, 70, 229, 0.35) !important;
}

/* ============================================
   SHEET TABS (top strip) — universal polish
   --------------------------------------------
   The base ux-improvements.css rule put `position:sticky; top:0;` and a
   white `rgba(255,255,255,0.92)` background on the strip — which made
   the tabs look like they were pinned inside an extra "header" block,
   and the lift-on-hover transform got clipped against it. Drop the
   sticky pin + white panel here so the strip just floats inline above
   the design card with the rest of the page background showing through.
   ============================================ */
.sheet-tabs-strip {
  gap: 12px !important;
  position: static !important;
  top: auto !important;
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  padding: 0 !important;
  margin: 0 0 4px !important;
  overflow: visible !important;
  z-index: auto !important;
}
.sheet-tabs-strip > * {
  border-radius: 14px !important;
  padding: 8px 18px !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 2px 8px rgba(20, 25, 60, 0.06) !important;
}
.sheet-tabs-strip > *:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(99, 80, 230, 0.18) !important;
}

/* ============================================
   ORDER STAMP — print-only
   --------------------------------------------
   doGenerate() embeds the operator's order-ID stamp into the SVG so
   the printed sheet carries it. The customer summary preview reuses
   the same SVG (so the stored designSvg keeps the stamp for the
   download), but the customer should NEVER see internal order IDs.
   Hide every stamped <text> element wherever the SVG is rendered in
   the customer-facing UI. The stamp is still in the saved SVG, so
   exports / operator views are untouched.
   ============================================ */
.created-design [data-order-stamp],
.design-preview [data-order-stamp],
.svg-preview [data-order-stamp],
.final-svg [data-order-stamp] {
  display: none !important;
  visibility: hidden !important;
}

/* ============================================
   TWO-COLUMN GRID — has-extras mode only
   --------------------------------------------
   The previous rule forced `height: calc(100vh - 180px)` on the grid
   AND `height: 100%` on each column. With short extras (e.g. just an
   add-on like "No Choke") the right column then stretched to fill
   that locked height, leaving a tall empty grey band between the
   last extras card and the fixed Confirm button at the viewport
   bottom — the "massive grey bar" customers complained about.
   Switch to natural content height + a bottom padding (≈ 80 px)
   that reserves room for the fixed Confirm bar. The base
   `.result .result-con { overflow: auto; height: calc(100vh - 230px) }`
   in ux-improvements.css is overridden here so this layout flows
   without an inner scrollbar.
   ============================================ */
.result-con.summary-has-extras {
  display: grid !important;
  grid-template-columns: 1.35fr 1fr !important;
  grid-template-rows: auto auto !important;
  grid-template-areas:
    "tabs tabs"
    "design extras" !important;
  gap: 22px 16px !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 0 24px 80px !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
  align-items: start !important;
}
.result-con.summary-has-extras > .sheet-tabs-strip {
  grid-area: tabs !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
}
.result-con.summary-has-extras > .generated-sheet-design {
  grid-area: design !important;
  margin: 0 !important;
  align-self: start !important;
  height: auto !important;
}
.result-con.summary-has-extras > .row:last-child {
  grid-area: extras !important;
  margin: 0 0 0 -40px !important; /* pulls right column toward center */
  padding: 0 !important;
  align-self: start !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
}

/* RIGHT COLUMN: Ordered products + Add-Ons + Notes */
.result-con.summary-has-extras > .row:last-child > .col-md-12 {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 400px !important;
  height: auto !important;
}

.result-con.summary-has-extras .ordered-product {
  align-self: flex-start !important;
  margin: 0 !important;
  padding: 10px 18px !important;
  background: linear-gradient(135deg, #f7f8ff, #eef0fb) !important;
  border-radius: 12px !important;
  border: 1px solid rgba(99, 80, 230, 0.1) !important;
  width: auto !important;
  font-weight: 600 !important;
  font-size: 14px !important;
}

.result-con.summary-has-extras .addons-notes-row {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  width: 100% !important;
  max-width: 400px !important;
  flex: 0 0 auto !important;
}

.result-con.summary-has-extras .add-ons-section,
.result-con.summary-has-extras .customer-notes-section {
  width: 100% !important;
  max-width: 400px !important;
  background: #fff !important;
  border-radius: 18px !important;
  box-shadow: 0 6px 20px rgba(20, 25, 60, 0.06) !important;
  border: 1px solid rgba(99, 80, 230, 0.08) !important;
  padding: 14px 18px !important;
}
.result-con.summary-has-extras .add-ons-section h3,
.result-con.summary-has-extras .add-ons-section h4,
.result-con.summary-has-extras .customer-notes-section h3,
.result-con.summary-has-extras .customer-notes-section h4 {
  margin-bottom: 8px !important;
}

.result-con.summary-has-extras .customer-notes-section {
  flex: 0 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
}
.result-con.summary-has-extras .customer-notes-section textarea {
  flex: 0 0 auto !important;
  min-height: 80px !important;
  border-radius: 10px !important;
  border-color: #e5e7f0 !important;
  padding: 12px 14px !important;
  line-height: 1.5 !important;
  resize: vertical !important;
}

/* ============================================
   NO-EXTRAS — single centered card
   --------------------------------------------
   No add-ons, no notes. Just the design card centered with a
   compact "Ordered products: N" pill below it. Bootstrap's row +
   col-md-12 wrappers are flattened so they don't contribute extra
   height (which was producing a phantom empty band + a body
   scrollbar). The ordered-product becomes an inline pill that
   shrinks to its text width.
   ============================================ */
.result-con.summary-no-extras {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 16px !important;
  max-width: 720px !important;
  margin: 0 auto !important;
  /* Bottom padding reserves room for the fixed .confirm-design bar
     (≈ 50 px tall); without it the content was being clipped by the
     overflow:auto + height calc(100vh - 230px) on the base rule in
     ux-improvements.css and an unwanted scrollbar appeared. Override
     both properties so the centered single-card layout flows naturally. */
  padding: 12px 24px 80px !important;
  height: auto !important;
  overflow: visible !important;
}
.result-con.summary-no-extras > .sheet-tabs-strip {
  align-self: stretch !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
}
.result-con.summary-no-extras > .generated-sheet-design {
  width: 100% !important;
  max-width: 600px !important;
  margin: 0 auto !important;
}
.result-con.summary-no-extras > .row:last-child {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  text-align: center !important;
}
.result-con.summary-no-extras > .row:last-child > .col-md-12 {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
}
/* Inline pill so it sizes to its content (no phantom empty band). */
.result-con.summary-no-extras .ordered-product {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 auto !important;
  padding: 8px 18px !important;
  background: linear-gradient(135deg, #f7f8ff, #eef0fb) !important;
  border-radius: 12px !important;
  border: 1px solid rgba(99, 80, 230, 0.1) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  width: auto !important;
}
.result-con.summary-no-extras .ordered-product .heading {
  margin: 0 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #4a5070 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.result-con.summary-no-extras .ordered-product .quantity-no {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #7c5cfd !important;
  padding: 0 !important;
}

/* ============================================
   CONFIRM BAR (bottom) — universal
   ============================================ */
.confirm-design,
.confirm-design-btn,
[class*="confirm-design"] {
  box-shadow: 0 -10px 32px rgba(34, 197, 94, 0.22) !important;
  transition: all 0.2s ease !important;
}
.confirm-design:hover,
[class*="confirm-design"]:hover {
  filter: brightness(1.05) !important;
}

/* Terms gate — locked while required Terms boxes are unchecked. The
   click handler in script.js still runs the hard gate; this rule just
   gives the button a clearly-disabled look so the customer knows what
   to do before clicking. */
.confirm-sheet-design.is-terms-locked,
[class*="confirm-design"].is-terms-locked {
  opacity: 0.55 !important;
  filter: grayscale(0.4) !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}
.confirm-sheet-design.is-terms-locked:hover,
[class*="confirm-design"].is-terms-locked:hover {
  filter: grayscale(0.4) !important;
}

/* Summary-terms block — sits between the add-ons / notes row and the
   Confirm button. Wraps each rendered checkbox row at a comfortable
   width so the labels don't run edge-to-edge on wide screens. */
.summary-terms {
  width: 100%;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
  padding: 12px 16px;
  border: 1.5px solid #e5e7eb;
  border-radius: 12px;
  background: #fafbff;
}
.summary-terms .checkbox-row { font-size: 13px; }
.summary-terms a { color: #4f46e5; text-decoration: underline; }

/* ============================================
   RESPONSIVE — stack on smaller screens
   --------------------------------------------
   Below 992px (tablets + phones) the two-column grid collapses to
   stacked rows: tabs → design → extras. The desktop block puts
   height:100% / calc(100vh - 180px) on a bunch of elements; those
   would compute to 0 against an auto-height parent on mobile, so
   we reset them explicitly here. Without this the add-ons / notes
   blocks rendered with zero height and looked invisible.
   ============================================ */
@media (max-width: 992px) {
  .result-con.summary-has-extras {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "tabs"
      "design"
      "extras" !important;
    height: auto !important;
    padding: 0 16px !important;
  }
  .result-con.summary-has-extras > .generated-sheet-design,
  .result-con.summary-has-extras > .row:last-child {
    height: auto !important;
    align-self: auto !important;
    margin-left: 0 !important;
  }
  .result-con.summary-has-extras > .row:last-child {
    display: block !important;
  }
  .result-con.summary-has-extras > .row:last-child > .col-md-12 {
    height: auto !important;
    max-width: 100% !important;
    width: 100% !important;
    align-items: stretch !important;
    gap: 12px !important;
  }
  .result-con.summary-has-extras .add-ons-section,
  .result-con.summary-has-extras .customer-notes-section,
  .result-con.summary-has-extras .addons-notes-row {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    flex: 0 0 auto !important;
  }
  .result-con.summary-has-extras .customer-notes-section textarea {
    flex: 0 0 auto !important;
    min-height: 90px !important;
  }
  .result-con.summary-has-extras .ordered-product {
    align-self: stretch !important;
    width: 100% !important;
    text-align: center !important;
  }

  /* Card visuals adjust to thinner viewports */
  .created-design .card {
    height: auto !important;
    max-height: none !important;
  }
  .created-design .card .result-content {
    min-height: 280px !important;
  }
}

/* Phone-sized: tighten card padding + ordered-products spacing so
   the design preview gets more room and extras don't look cramped. */
@media (max-width: 600px) {
  .result-con.summary-has-extras,
  .result-con.summary-no-extras {
    padding: 0 12px !important;
  }
  .created-design .card { padding: 10px !important; }
  .created-design .card .result-content { padding: 12px !important; }
}