/* CASESTUDIO V348 — root-cause layout stability fixes.
   1) Rotation hints are hidden with visibility, never removed from flow (JS).
   2) The optional gift-message editor keeps a stable slot in the packaging section.
   3) The lottery win notice is a fixed toast, not a flow item.
*/

@media (min-width: 768px) {
html body main.main-layout > section.preview-section > .packaging-section > #gift-message-box {
  display: block !important;
  visibility: hidden !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 118px !important;
  min-height: 118px !important;
  max-height: 118px !important;
  flex: 0 0 118px !important;
  margin: 12px 0 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  translate: none !important;
  transform: none !important;
  pointer-events: none !important;
}

html body main.main-layout > section.preview-section > .packaging-section > #gift-message-box.active {
  visibility: visible !important;
  pointer-events: auto !important;
}

html body main.main-layout > section.preview-section > .packaging-section > #gift-message-box > #gift-message {
  box-sizing: border-box !important;
  max-height: 78px !important;
  resize: none !important;
}

}

/* Keep the win status out of normal flow so it cannot push the summary/order UI. */
@media (min-width: 768px) {
html body #dice-win-message.dice-win-message {
  display: block !important;
  position: fixed !important;
  top: 14px !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 99999 !important;
  width: min(760px, calc(100vw - 28px)) !important;
  max-width: calc(100vw - 28px) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: 35vh !important;
  overflow: auto !important;
  margin: 0 !important;
  padding: 12px 16px !important;
  box-sizing: border-box !important;
  border: 1px solid rgba(134, 239, 172, .45) !important;
  border-radius: 14px !important;
  background: rgba(9, 25, 24, .96) !important;
  color: #86efac !important;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .38) !important;
  line-height: 1.5 !important;
  text-align: center !important;
  overflow-wrap: anywhere !important;
  transform: translateX(-50%) !important;
  visibility: hidden !important;
  pointer-events: none !important;
  animation: none !important;
}

html body #dice-win-message.dice-win-message.show {
  visibility: visible !important;
}

}

/* V349: make the dark top header span the full visible page width while
   preserving the existing desktop content positioning and mobile rules. */
@media (min-width: 768px) {
  html body > header.topbar,
  html body header.topbar {
    width: 100vw !important;
    min-width: 100vw !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    flex-shrink: 0 !important;
  }
}


/* V350: prevent the gift-message editor from overflowing or overlapping
   packaging controls. The imported design had fixed 855px/839px widths. */
@media (min-width: 768px) {
  html body main.main-layout > section.preview-section > .packaging-section > #gift-message-box {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 118px !important;
    max-height: none !important;
    padding: 10px 12px !important;
    margin: 12px 0 0 !important;
    overflow: visible !important;
    display: block !important;
    box-sizing: border-box !important;
  }
  html body main.main-layout > section.preview-section > .packaging-section > #gift-message-box > label {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 0 7px !important;
    translate: none !important;
    transform: none !important;
    box-sizing: border-box !important;
    line-height: 1.4 !important;
  }
  html body main.main-layout > section.preview-section > .packaging-section > #gift-message-box > #gift-message {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 78px !important;
    min-height: 78px !important;
    max-height: 120px !important;
    margin: 0 !important;
    translate: none !important;
    transform: none !important;
    resize: vertical !important;
    box-sizing: border-box !important;
  }
}


/* V351: let the gift message participate in normal document flow.
   When selected, it expands below the three packaging options and pushes
   the order button down. When not selected, it is fully removed from flow. */
#gift-message-box {
  display: none !important;
  visibility: visible !important;
  position: static !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  flex: 0 1 auto !important;
  margin: 12px 0 0 !important;
  translate: none !important;
  transform: none !important;
  overflow: visible !important;
  pointer-events: auto !important;
}
#gift-message-box.active {
  display: block !important;
}
#order-button {
  position: static !important;
  translate: none !important;
  transform: none !important;
  margin-top: 18px !important;
  clear: both !important;
}
@media (min-width: 768px) {
  html body main.main-layout > section.preview-section > .packaging-section > #gift-message-box {
    display: none !important;
    visibility: visible !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    flex: 0 1 auto !important;
    padding: 10px 12px !important;
    margin: 12px 0 0 !important;
    overflow: visible !important;
    position: static !important;
    translate: none !important;
    transform: none !important;
  }
  html body main.main-layout > section.preview-section > .packaging-section > #gift-message-box.active {
    display: block !important;
  }
  html body main.main-layout > section.preview-section > #order-button {
    position: static !important;
    translate: none !important;
    transform: none !important;
    margin-top: 18px !important;
  }
}