/*
 * Checkout – SAP / Counselor field card
 * Styles the "who-is-your-sap" WooCommerce field as an accordion-style card.
 */

/* ── Card container ─────────────────────────────────────────────────────── */

p#who-is-your-sap_field {
  position: relative;
  border: 1px solid #d4cec8 !important;
  border-radius: 0 !important;
  overflow: hidden;
  padding: 0 !important;
  margin-bottom: 24px !important;
  margin-left: 3px !important;
  margin-right: 3px !important;
  /* Single warm-cream background for the whole card */
  background-color: #fefcf8 !important;
}

/* ── Card header row (the label) ────────────────────────────────────────── */

p#who-is-your-sap_field > label {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  /* Same cream background – no separate white zone */
  background: transparent !important;
  border-bottom: none;
  margin: 0 !important;
  cursor: default;
  color: #1a1a1a;
  line-height: 1.2;
}

/* Hide the WooCommerce * required asterisk – implied by the card design */
p#who-is-your-sap_field > label abbr.required {
  display: none;
}

/* CSS-based upward chevron instead of a Unicode character */
p#who-is-your-sap_field > label::after {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  border-top: 2px solid #555;
  border-right: 2px solid #555;
  transform: rotate(-45deg); /* points up ∧ */
  flex-shrink: 0;
  margin-left: 14px;
  margin-top: 3px; /* optical offset so the rotated box looks centred */
}

/* ── Card body ──────────────────────────────────────────────────────────── */

.sap-card-body {
  padding: 6px 18px 18px;
  position: relative;
  /* Transparent – inherits the card's cream background */
  background-color: transparent;
}

/* ── Select2 search input ───────────────────────────────────────────────── */

.sap-card-body .select2-container {
  width: 100% !important;
}

.sap-card-body .select2-selection--single {
  height: 38px !important;
  display: flex !important;
  align-items: center !important;
  border: 1px solid #ddd !important;
  border-radius: 0 !important;
  background-color: #fff !important;
  /* Magnifying-glass icon — vertically centred via flex on the container */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: 10px center !important;
  padding-left: 0 !important;
  box-sizing: border-box !important;
}

/* Rendered / placeholder text — flex child, vertically centred by parent */
.sap-card-body .select2-selection__rendered {
  flex: 1 1 auto !important;
  min-width: 0 !important;          /* allow text-overflow to work */
  height: auto !important;
  line-height: 1.2 !important;
  color: #333 !important;           /* normal dark text when a value is selected */
  /* icon at 10px + ~15px wide + 2px gap = 27px */
  padding-left: 34px !important;
  padding-right: 12px !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Placeholder child span — kill any inherited underline */
.sap-card-body .select2-selection__placeholder {
  text-decoration: none !important;
  color: #aaa !important;
  font-size: 15px !important;
}

/* Subtle focus ring when dropdown is open */
.sap-card-body .select2-selection--single[aria-expanded="true"] {
  border-color: #999 !important;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.06) !important;
}

/* Hide the default dropdown arrow */
.sap-card-body .select2-selection__arrow {
  display: none !important;
}

/* ── Info row ───────────────────────────────────────────────────────────── */

.sap-info-text {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-top: 16px;
  font-size: 13.5px;
  color: #555;
  line-height: 1.55;
}

/* Blue info icon */
.sap-info-icon {
  font-size: 17px;
  color: #1a73e8;
  flex-shrink: 0;
  margin-top: 1px;
}

/* ── Spinner / loader ───────────────────────────────────────────────────── */

.sap-card-body .sap-select-loader {
  position: absolute;
  right: 35px;
  top: 19px;
  z-index: 1;
}

/* ── Validation error state ─────────────────────────────────────────────── */

p#who-is-your-sap_field.sap-error {
  border-color: #e53935 !important;
}

.sap-card-body.sap-error .select2-selection--single {
  border-color: #e53935 !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   Checkout field label-as-placeholder design
   All text fields use the same overlay-label technique: the <label> is
   moved inside .woocommerce-input-wrapper by JS and positioned over the
   input so it looks like a dark placeholder.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Hide above-field labels (billing + account) before JS moves them ── */
/* Once JS moves a label inside .woocommerce-input-wrapper the
   "form-row > label" selector no longer matches and the label reappears
   under the overlay rules below. */

.woocommerce-billing-fields__field-wrapper
  .form-row:not(#who-is-your-sap_field)
  > label,
.woocommerce-account-fields .form-row > label {
  display: none !important;
}

/* ── 2. Input wrapper must be a positioning context ─────────────────────── */

#billing_first_name_field .woocommerce-input-wrapper,
#billing_last_name_field .woocommerce-input-wrapper,
#billing_phone_field .woocommerce-input-wrapper,
#billing_city_field .woocommerce-input-wrapper,
#billing_postcode_field .woocommerce-input-wrapper,
#billing_email_field .woocommerce-input-wrapper,
#account_username_field .woocommerce-input-wrapper,
#account_password_field .woocommerce-input-wrapper {
  position: relative;
  display: block;
}

/* ── 3. Overlay label — dark, vertically centred, pointer-events off ─────── */

#billing_first_name_field .woocommerce-input-wrapper > label,
#billing_last_name_field .woocommerce-input-wrapper > label,
#billing_phone_field .woocommerce-input-wrapper > label,
#billing_city_field .woocommerce-input-wrapper > label,
#billing_postcode_field .woocommerce-input-wrapper > label,
#billing_email_field .woocommerce-input-wrapper > label,
#account_username_field .woocommerce-input-wrapper > label,
#account_password_field .woocommerce-input-wrapper > label {
  position: absolute !important;
  top: 50% !important;
  left: 14px !important;
  transform: translateY(-50%) !important;
  z-index: 2 !important;
  pointer-events: none !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
  margin: 0 !important;
  padding: 0 !important;
  white-space: nowrap !important;
  line-height: 1.3 !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
}

/* ── 4. Hide the required asterisk inside every overlay label ────────────── */

#billing_first_name_field .woocommerce-input-wrapper > label abbr,
#billing_last_name_field .woocommerce-input-wrapper > label abbr,
#billing_phone_field .woocommerce-input-wrapper > label abbr,
#billing_city_field .woocommerce-input-wrapper > label abbr,
#billing_postcode_field .woocommerce-input-wrapper > label abbr,
#billing_email_field .woocommerce-input-wrapper > label abbr,
#account_username_field .woocommerce-input-wrapper > label abbr,
#account_password_field .woocommerce-input-wrapper > label abbr {
  display: none !important;
}

/* ── 5. Input sits above the label so typed text is never hidden ─────────── */

#billing_first_name_field input,
#billing_last_name_field input,
#billing_phone_field input,
#billing_city_field input,
#billing_postcode_field input,
#billing_email_field input,
#account_username_field input,
#account_password_field input {
  position: relative;
  z-index: 3;
  background: transparent !important;
}

/* ── 6. JS adds this class to hide the overlay once field has a value ─────── */

#billing_first_name_field .woocommerce-input-wrapper > label.lrc-label-hidden,
#billing_last_name_field .woocommerce-input-wrapper > label.lrc-label-hidden,
#billing_phone_field .woocommerce-input-wrapper > label.lrc-label-hidden,
#billing_city_field .woocommerce-input-wrapper > label.lrc-label-hidden,
#billing_postcode_field .woocommerce-input-wrapper > label.lrc-label-hidden,
#billing_email_field .woocommerce-input-wrapper > label.lrc-label-hidden,
#account_username_field .woocommerce-input-wrapper > label.lrc-label-hidden,
#account_password_field .woocommerce-input-wrapper > label.lrc-label-hidden {
  display: none !important;
}

/* ── billing_state SelectWoo — match overlay-label placeholder style ─────── */

#billing_state_field .select2-selection__placeholder {
  color: #1a1a1a !important;
  font-weight: 700 !important;
  font-size: 14px !important;
}

/* Error state — match the red border used on text inputs */
#billing_state_field.woocommerce-invalid .select2-container .select2-selection--single {
  border-color: #e53935 !important;
}

.checkout-inline-error-message {
  display: none !important;
}

.woocommerce form .form-row .required {
  visibility: hidden !important;
}