/**
 * Front Style
 */
/* Icons menu */
#wp-admin-bar-wc_el_inv_options {
  margin:        7px 5px !important;
  border-radius: 5px;
}

#wpadminbar .quicklinks ul li#wp-admin-bar-wc_el_inv_options > a.ab-item {
  display:        flex;
  align-items:    center;
  flex-direction: row;
  margin-top:     0;
  padding:        0px 5px;
  height:         18px;
  line-height:    17px;
  border-radius:  5px;
  font-size:      13px;
  background:     transparent !important;
  color:          #fff !important;
}

#wpadminbar .wc_el_inv-admin-bar-icon {
  flex-shrink:  0 !important;
  margin-right: 8px !important;
}

#wpadminbar .wc_el_inv-admin-bar-pill {
  display:        inline-block !important;
  font-size:      9px !important;
  font-weight:    600;
  line-height:    14px !important;
  letter-spacing: .3px;
  padding:        0 6px;
  border-radius:  3px;
  flex-shrink:    0;
}

#wpadminbar .wc_el_inv-admin-bar-pill.is-sandbox {
  background: #F26B5E;
  color:      #1F2328;
}

#wpadminbar .wc_el_inv-admin-bar-pill.is-live {
  background: #4AACAA;
  color:      #1F2328;
}

#wpadminbar .wc_el_inv-admin-bar-pill.is-disconnected {
  background: #C43E2C;
  color:      #fff;
}

#wpadminbar .wc_el_inv-admin-bar-devbadge {
  display:        inline-block !important;
  font-size:      9px !important;
  font-weight:    600;
  line-height:    12px !important;
  letter-spacing: .3px;
  padding:        0 5px;
  margin-left:    4px;
  border-radius:  3px;
  border:         1px solid rgba(255, 255, 255, .5);
  color:          #fff;
  flex-shrink:    0;
}

.pms-billing-details .chosen-container,
#billing_choice_type_field select#billing_choice_type + .select2-container,
#billing_invoice_type_field select#billing_invoice_type + .select2-container {
  width: 100% !important;
}

/* Input */
input#pms_sdi_type,
input#pms_vat_number,
input#pms_tax_code,
input#billing_sdi_type,
input#billing_vat_number,
input#billing_tax_code {
  text-transform: uppercase !important;
}

/* Brand dark-red instead of raw WP-admin red (#dc3232), so an error/alert
   state at least stays internally consistent with the rest of the plugin's
   own palette instead of borrowing wp-admin's. No CSS custom properties
   here: this stylesheet is mutually exclusive with wc-inv-admin.css (only
   one loads per request, gated by is_admin()), which is the only place
   --pop-color-* is defined - hardcoded to the same literal value instead. */
#billing_tax_code_div .no-valid-cf,
#billing_tax_code_field .no-valid-cf {
  color: #C43E2C !important;
}

/* No sent count */
.no_sent_count {
  display:          inline-block !important;
  box-sizing:       border-box !important;
  margin:           1px 0 -1px 2px !important;
  padding:          0 5px !important;
  min-width:        18px !important;
  height:           18px !important;
  border-radius:    9px !important;
  background-color: #C43E2C !important;
  color:            #fff !important;
  font-size:        11px !important;
  line-height:      1.6 !important;
  text-align:       center !important;
}

/* pop redio fields variation */
[class*="wp_pop-"].form-radio_fields .woocommerce-input-wrapper {
  display:         flex;
  align-items:     center;
  justify-content: flex-start;
}

[class*="wp_pop-"].form-radio_fields.wc_el_inv-invoice-field .woocommerce-input-wrapper {
  flex-wrap: wrap;
}

[class*="wp_pop-"].form-radio_fields.wc_el_inv-invoice-field .woocommerce-input-wrapper .description {
  display:   none !important;
  flex:      1 0 100%;
  width:     100%;
  max-width: 100%;
}

[class*="wp_pop-"].form-radio_fields .woocommerce-input-wrapper label {
  margin-right: 15px
}

/* pmpro_form_fields */
.pmpro_form_fields .pmpro_form_field [class*="wp_pop-"],
.pmpro_form_fields .pmpro_form_field [class*="wp_pop-"] + .select2-container,
.pmpro_form_fields .pmpro_form_field .pmpro_form_input-billing_company {
  width:     100% !important;
  max-width: 100% !important;
}

/* Same wizard-card shell as the admin version (Fase E consolidation) -
   border/radius/shadow literal values instead of --pop-radius-card, same
   reason as above: this stylesheet never loads alongside wc-inv-admin.css. */
.pop-notice {
  position:          relative;
  background:        #fff;
  text-align:        left;
  border:            1px solid #dcdcde;
  border-left-color: rgb(195, 196, 199);
  border-left-width: 4px;
  border-radius:     6px;
  box-shadow:        0 1px 2px rgba(0, 0, 0, .04);
  padding:           8px 14px;
  margin:            0 0 20px;
}

.pop-notice p {
  margin: 0.6em 0 !important;
}

.pop-notice.notice-warning {
  border-left-color: #ffb900;
}

.pop-notice.notice-info {
  border-left-color: #00a0d2;
}

.pop-notice.notice-success {
  border-left-color: #00a32a;
}

.pop-notice.notice-error {
  border-left-color: #dc3232;
}

.pms-account .pop-notice,
.pms-form .pop-notice {
  font-size: 0.95em;
}

@media screen and (min-width: 768px) {
  /* pmpro_form_fields */
  .pmpro_form_fields .pmpro_form_field [class*="wp_pop-"],
  .pmpro_form_fields .pmpro_form_field [class*="wp_pop-"] + .select2-container,
  .pmpro_form_fields .pmpro_form_field .pmpro_form_input-billing_company {
    width:     calc(50% - calc(var(--pmpro--base--spacing--medium) / 2)) !important;
    max-width: calc(50% - calc(var(--pmpro--base--spacing--medium) / 2)) !important;
  }
}


/* POP block */
#pop-checkout {
  position: relative;
  margin:   20px 0;
}

#pop-checkout h4 {
  font-weight: bold;
}

/* The React block actually renders its fields into a `.pop-checkout-fields`
   div, not into #pop-checkout-root itself (a MutationObserver in
   pop-block.js relocates the rendered subtree into WooCommerce Blocks'
   own billing-fields container after mount) - #pop-checkout-root ends up
   empty on the frontend, so every rule that targeted it never matched and
   these fields rendered with the browser's bare default input styling.
   Retargeted to the element that's actually there. */
.pop-checkout-fields.pop_fields_pos_top {
  margin-bottom: 25px;
}

.pop-checkout-fields.pop_fields_pos_bottom {
  margin-top: 25px;
}

.pop-checkout-fields .components-input-control__container {
  border-radius: 4px;
}

/* Match WooCommerce Blocks' own native input recipe (.wc-block-components-text-input
   input[type=text] in the WC Blocks stylesheet) instead of an independently
   invented one, so POP's added fields render like they belong to the same form
   instead of visibly differing from the native fields around them. Border uses
   currentColor (like WC's own) rather than a fixed hex, so it still follows
   whatever text color the theme sets. The select needs !important: its border/
   padding/height come from an Emotion-injected <style> tag (@wordpress/components
   SelectControl) that loads after this stylesheet and otherwise wins at equal
   specificity - the text input doesn't have this problem, only the select does. */
.pop-checkout-fields .components-text-control__input {
  box-sizing:       border-box;
  width:            100%;
  height:           50px;
  padding:          16px 12px;
  border:           1px solid color-mix(in srgb, currentColor 80%, transparent);
  border-radius:    4px;
  background-color: #fff;
  color:            #2b2d2f;
  font-size:        16px;
  line-height:      25px;
  transition:       border-color 0.2s ease-in-out;
}

.pop-checkout-fields .components-select-control__input {
  box-sizing:       border-box !important;
  width:            100% !important;
  height:           50px !important;
  padding:          0 12px !important;
  border:           1px solid color-mix(in srgb, currentColor 80%, transparent) !important;
  border-radius:    4px !important;
  background-color: #fff !important;
  color:            #2b2d2f !important;
  font-size:        16px !important;
}

.pop-checkout-fields .components-text-control__input:focus,
.pop-checkout-fields .components-select-control__input:focus {
  border-width: 1.5px;
  outline:      none;
}

.pop-checkout-fields .components-text-control__input:disabled,
.pop-checkout-fields .components-select-control__input:disabled {
  background-color: #f3f3f3;
  color:            #777;
  cursor:           not-allowed;
}

.pop-checkout-fields .components-base-control {
  margin-bottom: 15px !important;
}

/* The real class @wordpress/components attaches is .components-base-control__label
   (an Emotion-injected style, same override problem as the select above) - it
   ships with an editor-style small uppercase look that read as a mismatched
   label style next to WC's own plain-case field labels. */
.pop-checkout-fields .components-base-control__label,
.pop-checkout-fields .components-input-control__label {
  text-transform: none !important;
  letter-spacing: normal !important;
  font-size:      14px !important;
  font-weight:    600 !important;
  color:          #1e1e1e !important;
  cursor:         text;
  margin-bottom:  6px;
  display:        block;
}