/* =============================================================================
   Notify when in stock - matches options-in-popup / product-buy-panel modal
   ============================================================================= */

#smpa-modal-body,
#mbOipModalMount #smpa-modal-body{
  --moss-deep: #122418;
  --ink: var(--moss-deep);
  --rule: var(--moss-deep);
  --bone: #f2efe4;
  --paper: #fbf8f0;
  --muted: #6f6a62;
  --hairline: rgba(18, 36, 24, 0.18);
  --serif: 'Nantes-Upright', 'Cormorant Garamond', 'Times New Roman', serif;
  --sans: 'DM Sans', 'Helvetica Neue', Arial, sans-serif;
  --sans-bold: 'DM Sans Bold', 'DM Sans', 'Helvetica Neue', Arial, sans-serif;
  --fs-cap: 0.62rem;
  --fs-field: 0.875rem;
  --tracked: 0.18em;
  --moss-btn: #23503b;
  --terracotta: #c2613a;
  --smpa-modal-width: 490px;
  --smpa-pad-inline: 1.2rem;
  box-sizing: border-box;
}

.modal.oip-modal .modal-dialog:has(#smpa-modal-body){
  width: 100% !important;
  max-width: min(var(--smpa-modal-width, 490px), calc(100vw - 2.5rem)) !important;
  margin: 1.25rem auto !important;
  padding: 1.25rem !important;
}

#smpa-modal-body *,
#smpa-modal-body *::before,
#smpa-modal-body *::after{
  box-sizing: border-box;
}

/* - Modal shell - */
#smpa-modal-body.smpa-popup-container,
#smpa-modal-body.zoom-anim-dialog{
  width: 100% !important;
  max-width: min(var(--smpa-modal-width), calc(100vw - 2.5rem)) !important;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--bone) !important;
  color: var(--ink) !important;
  font-family: var(--sans) !important;
  border: 1px solid var(--ink) !important;
  border-radius: 0 !important;
  box-shadow: 12px 14px 0 rgba(30, 30, 30, 0.12) !important;
  position: relative !important;
  overflow: visible !important;
  min-height: 0 !important;
}

/* - Form wrapper - */
#smpa-modal-body #check-data{
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

#smpa-modal-body #smpa-modal-data-result-error:empty{
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
}

/* - Header - */
#smpa-modal-body .pbuy-modal__head,
#smpa-modal-body .smpa-popup-header{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.75rem !important;
  padding: 1rem var(--smpa-pad-inline) 0.85rem !important;
  border-bottom: 1px solid var(--hairline) !important;
  background: var(--paper) !important;
  margin: 0 !important;
}

#smpa-modal-body .pbuy-modal__title,
#smpa-modal-body #smpa-modal-title{
  flex: 1 !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--serif) !important;
  font-variation-settings: 'wght' 400;
  font-weight: normal;
  font-size: 1.2rem !important;
  line-height: 1.15 !important;
  color: var(--ink) !important;
}

#smpa-modal-body .pbuy-modal__close,
#smpa-modal-body .smpa-close{
  position: static !important;
  flex-shrink: 0 !important;
  width: 2.25rem !important;
  height: 2.25rem !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid var(--ink) !important;
  border-radius: 0 !important;
  background: var(--bone) !important;
  color: var(--ink) !important;
  font-size: 1.35rem !important;
  line-height: 1 !important;
  opacity: 1 !important;
  cursor: pointer !important;
  transition: background 0.2s ease, color 0.2s ease !important;
}

#smpa-modal-body .pbuy-modal__close:hover,
#smpa-modal-body .pbuy-modal__close:focus,
#smpa-modal-body .smpa-close:hover,
#smpa-modal-body .smpa-close:focus{
  background: var(--ink) !important;
  color: var(--bone) !important;
}

/* - Body - */
#smpa-modal-body .pbuy-modal__body,
#smpa-modal-body .smpa-popup-body{
  margin: 0 !important;
  padding: 0.9rem var(--smpa-pad-inline) 1rem !important;
  font-family: var(--sans) !important;
  font-size: 0.875rem !important;
  line-height: 1.4 !important;
  background: var(--bone) !important;
}

#smpa-modal-body #smpa-modal-data{
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important;
}

#smpa-modal-body .smpa-info{
  margin: 0 !important;
  font-size: 0.875rem !important;
  line-height: 1.45 !important;
  color: var(--muted) !important;
}

#smpa-modal-body .smpa-info br{
  display: none !important;
}

#smpa-modal-body .smpa-info--top{
  margin-bottom: 0.1rem !important;
}

#smpa-modal-body .smpa-info--bottom{
  margin-top: 0.1rem !important;
}

#smpa-modal-body .smpa-fields{
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important;
  margin: 0 !important;
}

#smpa-modal-body .smpa-field{
  display: flex !important;
  flex-direction: column !important;
  gap: 0.35rem !important;
  margin: 0 !important;
}

#smpa-modal-body #smpa-modal-data > div + div{
  margin-top: 0 !important;
}

#smpa-modal-body .smpa-field__label{
  font-family: var(--sans-bold) !important;
  font-weight: normal !important;
  font-size: var(--fs-cap, 0.62rem) !important;
  letter-spacing: var(--tracked) !important;
  text-transform: uppercase !important;
  color: var(--ink) !important;
  margin: 0 !important;
  line-height: 1.3 !important;
}

#smpa-modal-body .smpa-field__control,
#smpa-modal-body #smpa-modal-data input[type='text']{
  width: 100% !important;
  margin: 0 !important;
  padding: 0.55rem 0.65rem !important;
  font-family: var(--sans) !important;
  font-size: var(--fs-field) !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
  color: var(--ink) !important;
  background: var(--paper) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  transition: border-color 0.2s ease !important;
}

#smpa-modal-body .smpa-field__control:focus,
#smpa-modal-body #smpa-modal-data input[type='text']:focus{
  border-color: var(--ink) !important;
}

/* - Footer - */
#smpa-modal-body .smpa-popup-footer,
#smpa-modal-body .pbuy-modal__foot{
  display: flex !important;
  flex-direction: column !important;
  gap: 0.35rem !important;
  padding: 0.85rem var(--smpa-pad-inline) 1rem !important;
  border-top: 1px solid var(--hairline) !important;
  background: var(--paper) !important;
  margin: 0 !important;
  width: 100% !important;
  text-align: center !important;
}

#smpa-modal-body .smpa-btn,
#smpa-modal-body .pbuy__btn{
  width: 100% !important;
  min-height: 40px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0.4rem 0.55rem !important;
  font-family: var(--sans-bold) !important;
  font-weight: normal !important;
  font-size: clamp(0.68rem, 2.8vw, 0.75rem) !important;
  letter-spacing: var(--tracked) !important;
  text-transform: uppercase !important;
  text-align: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  line-height: 1.2 !important;
  cursor: pointer !important;
  transition: background 0.2s ease, color 0.2s ease !important;
}

#smpa-modal-body .smpa-btn--primary,
#smpa-modal-body .pbuy__btn--basket{
  min-height: 44px !important;
  background: var(--ink) !important;
  color: var(--bone) !important;
}

#smpa-modal-body .smpa-btn--primary:hover,
#smpa-modal-body .pbuy__btn--basket:hover{
  background: var(--terracotta) !important;
  color: var(--bone) !important;
}

#smpa-modal-body .smpa-btn--secondary{
  background: var(--bone) !important;
  color: var(--ink) !important;
  border: 1px solid var(--ink) !important;
}

#smpa-modal-body .smpa-btn--secondary:hover{
  background: var(--ink) !important;
  color: var(--bone) !important;
}

/* - Alerts & success state - */
#smpa-modal-body .smpa-alert,
#smpa-modal-body .alert{
  margin: 0 0 1rem !important;
  padding: 0.65rem 0.75rem !important;
  font-size: 0.875rem !important;
  line-height: 1.4 !important;
  border-radius: 0 !important;
  border: 1px solid var(--hairline) !important;
  background: var(--paper) !important;
  color: var(--ink) !important;
}

#smpa-modal-body .smpa-alert--error,
#smpa-modal-body .alert-danger{
  border-color: #bb1a32 !important;
  color: #bb1a32 !important;
  background: #fff5f6 !important;
}

#smpa-modal-body .smpa-alert__close,
#smpa-modal-body .alert button.close{
  float: right !important;
  background: none !important;
  border: 0 !important;
  font-size: 1.25rem !important;
  line-height: 1 !important;
  color: inherit !important;
  opacity: 0.7 !important;
  cursor: pointer !important;
  padding: 0 0 0 0.5rem !important;
}

#smpa-modal-body #check-data .alert-success,
#smpa-modal-body #check-data p{
  font-family: var(--sans) !important;
  font-size: 0.875rem !important;
  line-height: 1.45 !important;
  color: var(--ink) !important;
}

/* - Loading mask - */
#smpa-modal-body .smpa-modal-loadmask{
  position: absolute !important;
  z-index: 10 !important;
  inset: 0 !important;
  background: var(--bone) !important;
  opacity: 0.72 !important;
}

#smpa-modal-body .smpa-modal-loadmask-loading{
  position: absolute !important;
  z-index: 11 !important;
  inset: 0 !important;
  background: url('catalog/view/theme/default/stylesheet/ocdevwizard/smart_product_available/loading.svg') no-repeat center center !important;
}