/*
  Laser planner panel overrides.
  Keep price-panel layout/debug changes here so future edits do not require
  reading the large laser.html file.
*/

@media (max-width:920px){
  .plannerHead{
    --plannerFormatWidth:150px;
  }
}

.plannerHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  min-height:auto;
}

.plannerHead .plannerTitle{
  flex:1 1 auto;
  max-width:none;
}

.plannerFormat{
  position:static;
  top:auto;
  right:auto;
  flex:0 0 var(--plannerFormatWidth);
  width:var(--plannerFormatWidth) !important;
  transform:none;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  outline:none !important;
}

.plannerFormatSelect{
  background-color:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
  font-size:10px;
  outline:none !important;
  backdrop-filter:saturate(150%) blur(12px);
  -webkit-backdrop-filter:saturate(150%) blur(12px);
}

.plannerFormatSelect:hover,
.plannerFormatSelect:focus,
.plannerFormatSelect:focus-visible,
.plannerFormatSelect:active{
  background-color:rgba(255,255,255,.18);
  border-color:rgba(255,255,255,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18) !important;
  outline:none !important;
}

.plannerFormatSelect option{
  background:#9f8068;
  color:#fff;
  font-weight:700;
}

.plannerFormatSelect option:checked{
  background:#b8967d;
  color:#fff;
}

.plannerCourseHint:not([hidden]){
  margin-top:auto;
  padding-top:12px;
  max-width:100%;
  color:rgba(255,255,255,.78);
}

.plannerCourseHint:not([hidden]) + .orderSummary{
  margin-top:12px;
}

.plannerPane:not(.plannerPane--zones) .orderList{
  flex:1 1 0;
  min-height:0;
  padding-bottom:0;
  overflow-y:auto !important;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}

.plannerPane.is-order-details-open .orderItemDetails{
  --order-details-safe-bottom:18px;
  position:absolute;
  z-index:4;
  top:var(--planner-details-top, calc(100% + 6px));
  left:0;
  right:0;
  max-height:var(--planner-details-max-height, clamp(150px, 28vh, 300px)) !important;
  margin-top:0;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  scroll-padding-bottom:var(--order-details-safe-bottom);
}

.plannerPane.is-order-details-open .orderItemDetails.is-scrollable{
  --order-details-safe-bottom:42px;
  overflow-y:auto;
  overscroll-behavior:contain;
}

.plannerPane.is-order-details-open .orderItem{
  border-bottom-color:transparent;
}

.plannerPane.is-order-details-tight .plannerSetAddWrap,
.plannerPane.is-order-details-tight .plannerCourseHint{
  display:none;
  max-height:0;
  margin-top:0;
  margin-bottom:0;
  padding-top:0;
  padding-bottom:0;
  opacity:0;
  visibility:hidden;
  overflow:hidden;
  pointer-events:none;
}

.plannerPane.is-order-details-open .orderSummary{
  margin-top:auto;
}

.plannerPane:not(.is-order-details-open) .plannerSetAddWrap,
.plannerPane.is-order-details-open .plannerSetAddWrap,
.plannerPane:not(.is-order-details-open) .orderSummary,
.plannerPane.is-order-details-open .orderSummary,
.plannerPane:not(.is-order-details-open) .orderTaxNote,
.plannerPane.is-order-details-open .orderTaxNote,
.plannerPane:not(.is-order-details-open) .plannerCtaRow,
.plannerPane.is-order-details-open .plannerCtaRow{
  flex:0 0 auto;
}

@media (max-width:767px){
  .plannerTitle{
    font-size:clamp(28px, 9.4vw, 40px);
  }

  .plannerHead{
    gap:12px;
  }

  .plannerFormat{
    --plannerFormatWidth:132px;
    flex-basis:var(--plannerFormatWidth);
  }

  .plannerFormatSelect{
    height:32px;
    min-height:32px;
    font-size:11px;
    padding-left:12px;
    padding-right:22px;
    background-position:calc(100% - 15px) 13px, calc(100% - 9px) 13px;
  }

  .orderItemNameLine{
    display:grid;
    grid-template-columns:minmax(0, 1fr) 28px minmax(0, 1fr);
    gap:0;
    align-items:center;
    padding-right:0;
    position:static;
  }

  .orderItemNameLine .orderItemName{
    grid-column:1;
  }

  .orderItemSaveHintBtn{
    position:absolute;
    left:50%;
    top:14px;
    right:auto;
    transform:translateX(-50%);
  }

  .orderItemSaveHintBtn:hover,
  .orderItemSaveHintBtn.is-open{
    transform:translateX(-50%);
  }

  .plannerSetAddWrap{
    flex:0 0 auto;
    justify-content:center;
    padding-top:8px;
    padding-bottom:8px;
    transform:translateY(-1px);
  }

  .laserPlannerBackdropShell .plannerPane:not(.plannerPane--zones),
  html.planner-embed .plannerPane:not(.plannerPane--zones){
    --planner-order-panel-vertical-gap:16px;
    height:var(--planner-order-panel-height, calc(100svh - var(--planner-order-panel-vertical-gap))) !important;
    min-height:var(--planner-order-panel-height, calc(100svh - var(--planner-order-panel-vertical-gap)));
    max-height:var(--planner-order-panel-height, calc(100svh - var(--planner-order-panel-vertical-gap))) !important;
    overflow:hidden !important;
  }

  .plannerPane:not(.plannerPane--zones) .orderList{
    flex:1 1 0;
    min-height:0;
    max-height:none;
    overflow-x:hidden;
    overflow-y:auto !important;
  }

  .orderList.is-scrollable{
    overflow-y:auto;
  }

  .plannerPane.is-order-details-open .orderList{
    flex:1 1 0;
    max-height:none;
    overflow-y:auto !important;
  }

  .orderSummary,
  .orderTaxNote,
  .plannerCtaRow{
    flex:0 0 auto;
  }

  .plannerCtaRow{
    margin-top:10px;
  }
}

html.planner-debug-zones .plannerPane:not(.plannerPane--zones){
  position:relative;
  box-shadow:
    0 0 0 3px rgba(255,255,255,.78) inset,
    0 0 0 2px #ff2d55,
    0 8px 20px rgba(8,10,18,.18) !important;
}

html.planner-debug-zones .plannerPane:not(.plannerPane--zones)::before{
  content:"DEBUG PRICE PANEL";
  position:absolute;
  left:auto;
  right:14px;
  top:14px;
  z-index:80;
  padding:5px 8px;
  border-radius:7px;
  background:rgba(8,10,18,.86);
  color:#fff;
  font:800 10px/1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  letter-spacing:.04em;
  pointer-events:none;
}

html.planner-debug-zones .plannerPane:not(.plannerPane--zones) :is(.orderItem, .orderItemToggle, .plannerSetAddBtn, .orderSummary, .plannerCtaBtn){
  outline:2px solid var(--price-debug-color, #ff2d55) !important;
  outline-offset:3px !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.86) inset,
    0 0 0 1px var(--price-debug-color, #ff2d55),
    0 8px 18px rgba(8,10,18,.16) !important;
}

html.planner-debug-zones .plannerPane:not(.plannerPane--zones) :is(.orderItem, .plannerSetAddBtn, .orderSummary, .plannerCtaBtn)::after{
  position:absolute;
  z-index:81;
  left:0;
  bottom:100%;
  transform:translateY(-5px);
  padding:3px 6px;
  border-radius:6px;
  background:var(--price-debug-color, #ff2d55);
  color:#fff;
  font:800 9px/1.1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  letter-spacing:0;
  white-space:nowrap;
  pointer-events:none;
  text-shadow:none;
}

html.planner-debug-zones .plannerPane:not(.plannerPane--zones) .orderItem{
  --price-debug-color:#0a84ff;
  position:relative;
}

html.planner-debug-zones .plannerPane:not(.plannerPane--zones) .orderItem::after{
  content:"set row";
}

html.planner-debug-zones .plannerPane:not(.plannerPane--zones) .orderItemToggle{
  --price-debug-color:#bf5af2;
}

html.planner-debug-zones .plannerPane:not(.plannerPane--zones) .plannerSetAddBtn{
  --price-debug-color:#ff9f0a;
  position:relative;
}

html.planner-debug-zones .plannerPane:not(.plannerPane--zones) .plannerSetAddBtn::after{
  content:"add set";
}

html.planner-debug-zones .plannerPane:not(.plannerPane--zones) .orderSummary{
  --price-debug-color:#30d158;
  position:relative;
}

html.planner-debug-zones .plannerPane:not(.plannerPane--zones) .orderSummary::after{
  content:"total";
}

html.planner-debug-zones .plannerPane:not(.plannerPane--zones) .plannerCtaBtn{
  --price-debug-color:#64d2ff;
  position:relative;
}

html.planner-debug-zones .plannerPane:not(.plannerPane--zones) .plannerCtaBtn--buy{
  --price-debug-color:#ffd60a;
}

html.planner-debug-zones .plannerPane:not(.plannerPane--zones) .plannerCtaBtn--buy::after{
  content:"buy";
}

html.planner-debug-zones .plannerPane:not(.plannerPane--zones) .plannerCtaBtn:not(.plannerCtaBtn--buy)::after{
  content:"book";
}