/**
 * PublicSquare Payments - checkout styling fix.
 * Adds border/padding to card element container and fixes mobile responsive layout.
 * Revision 5: Revert to 3-value padding (left inherits from right = 9px; 1px border + 9px = 10px = label left:10px).
 *
 * @see https://app.clickup.com/t/86ex285c4
 */

/* 1. Card element iframe container - match Fluid Checkout border style */
#publicsquare-payment-data #publicsquare-card-element {
  border: 1px solid var(--fluidcheckout--border-color, #d8d8d8);
  border-radius: var(--fluidcheckout--field--border-radius, 4px);
  padding: 10px 15px;
  background-color: #fff;
  min-height: 45px;
  width: 100%;
  box-sizing: border-box;
}

/* 2. Card Holder Name input - full width, matching border, forced floating-label padding */
#publicsquare-payment-data #cardHolderName {
  width: 100% !important;
  max-width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--fluidcheckout--border-color, #d8d8d8);
  border-radius: var(--fluidcheckout--field--border-radius, 4px);
  padding: 24px 9px 8px !important;
}

/* 2b. ALWAYS hide placeholder — floating label serves as the visual label */
#publicsquare-payment-data #cardHolderName::placeholder {
  color: transparent !important;
  opacity: 0 !important;
}

/* 3. Card icons row - flexbox layout, override inline float:right */
#publicsquare-payment-data > p:first-of-type {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

#publicsquare-payment-data > p:first-of-type > span[style*="float"] {
  float: none !important;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-left: auto;
}

/* 4. Mobile - reduce card element padding to prevent iframe truncation + stack icons */
@media (max-width: 425px) {
  #publicsquare-payment-data #publicsquare-card-element {
    padding: 8px 4px;
  }

  #publicsquare-payment-data > p:first-of-type {
    flex-direction: column;
    align-items: flex-start;
  }

  #publicsquare-payment-data > p:first-of-type > span[style*="float"] {
    margin-left: 0;
  }
}