/*
 * Chandelle Park payment UI corrections v111
 * Consolidates the v109 modal/logo/button fixes and explicitly constrains
 * the Secure payment SVG lock icon.
 */

#squarePaymentModal .cp-payment-modal-header {
  display: grid !important;
  grid-template-columns: 104px minmax(0, 1fr) 42px !important;
  align-items: center !important;
  min-height: 96px !important;
  padding: 0.75rem 1.25rem !important;
  overflow: hidden !important;
}

#squarePaymentModal .cp-payment-logo {
  display: block !important;
  justify-self: start !important;
  width: 88px !important;
  max-width: 88px !important;
  height: 68px !important;
  max-height: 68px !important;
  object-fit: contain !important;
  object-position: center !important;
}

#squarePaymentModal .cp-payment-title {
  min-width: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  text-align: center !important;
  line-height: 1.2 !important;
}

/*
 * The lock is the SVG element itself:
 * <svg class="cp-payment-lock-icon" ...>
 * Constrain every dimension directly on that SVG so older global SVG rules
 * cannot expand it.
 */
#squarePaymentModal svg.cp-payment-lock-icon {
  display: inline-block !important;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  max-width: 24px !important;
  max-height: 24px !important;
  flex: 0 0 24px !important;
  overflow: visible !important;
  fill: currentColor !important;
  transform: none !important;
}

#squarePaymentModal svg.cp-payment-lock-icon path {
  fill: currentColor !important;
}

#bookingForm button[type="submit"] .cp-secure-payment-lock {
  width: 1.05em !important;
  height: 1.05em !important;
  min-width: 1.05em !important;
  min-height: 1.05em !important;
  max-width: 1.05em !important;
  max-height: 1.05em !important;
  flex: 0 0 1.05em !important;
  fill: currentColor !important;
}

#bookingForm button[type="submit"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.55rem !important;
}

@media (max-width: 575.98px) {
  #squarePaymentModal .cp-payment-modal-header {
    grid-template-columns: 72px minmax(0, 1fr) 38px !important;
    min-height: 82px !important;
    padding: 0.6rem 0.8rem !important;
  }

  #squarePaymentModal .cp-payment-logo {
    width: 62px !important;
    max-width: 62px !important;
    height: 52px !important;
    max-height: 52px !important;
  }

  #squarePaymentModal svg.cp-payment-lock-icon {
    width: 21px !important;
    height: 21px !important;
    min-width: 21px !important;
    min-height: 21px !important;
    max-width: 21px !important;
    max-height: 21px !important;
    flex-basis: 21px !important;
  }
}