/* Nova Poshta fields. The fields themselves are WooCommerce's own markup (classic form rows, the Checkout block's
   text inputs), styled by WooCommerce and the theme; this file holds only what WooCommerce has no markup for: the
   search list, the spinner, the popular cities, and hiding the address fields the plugin fills. Colours follow the
   theme (inherit, currentColor), so light and dark themes both work. Layout defaults a theme may replace with its
   own classes (wrnp_account_classes) are in :where(), so any theme class wins without !important. */
:where(.wrnp-fields) {
  display: flex;
  flex-direction: column;
  gap: 1em;
}

:where(.wrnp-classic .wrnp-fields) {
  display: block;
}

/* In a theme's grid of form rows the helpers between the rows take the whole line. */
:where(.wrnp-fields) > :where(.wrnp-popular, .wrnp-pair, .wrnp-hint) {
  grid-column: 1 / -1;
}

.wrnp-block {
  margin-top: 1.5rem;
}

/* Checkout block: laid out like the block's address form — the text inputs keep their own top margin, house and flat
   share a line from the same container width as its paired fields (the checkout block is the size container). */
.wrnp-block .wrnp-fields {
  flex-flow: row wrap;
  gap: 0 12px;
}

.wrnp-block .wrnp-fields > * {
  flex: 0 0 100%;
  box-sizing: border-box;
}

@container (min-width: 400px) {
  .wrnp-block .wrnp-fields > .wrnp-half {
    flex: 1 0 calc(50% - 12px);
  }
}

.wrnp-fields .screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.wrnp-hint {
  margin: 0;
}

.wrnp-block .wrnp-hint {
  font-size: 0.875em;
  opacity: 0.75;
}

/* Classic: house and flat are half rows (themes float them); their own formatting context keeps the margin of the
   row above, which a float right after a full row would swallow. */
:where(.wrnp-pair) {
  display: flow-root;
}

/* The search field: the list and the spinner are placed against it. */
.wrnp-search__control {
  position: relative;
  display: block;
}

.wrnp-spinner {
  position: absolute;
  top: 50%;
  right: 0.75em;
  width: 1em;
  height: 1em;
  margin-top: -0.5em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  opacity: 0.6;
  pointer-events: none;
  animation: wrnp-spin 0.8s linear infinite;
}

/* Block: centred on the 50px input, not on the field with its error below. */
.wc-block-components-text-input > .wrnp-spinner {
  top: 1.5625rem;
}

@keyframes wrnp-spin {
  to {
    transform: rotate(360deg);
  }
}

/* The option list: placement always; its look only without classes from wrnp_search_classes (a theme's own). */
.wrnp-search__dropdown {
  position: absolute;
  z-index: 1000;
  top: 100%;
  right: 0;
  left: 0;
}

.wrnp-search__dropdown[hidden] {
  display: none !important;
}

.wrnp-search__list {
  max-height: 18em;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}

.wrnp-search--look {
  margin-top: 0.25em;
  font: inherit;
  color: inherit;
  background: Canvas;
  border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
  border-radius: 4px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.wrnp-search__option {
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

.wrnp-search--look .wrnp-search__option,
.wrnp-search--look .wrnp-search__note {
  padding: 0.6em 0.8em;
}

.wrnp-search__option small {
  opacity: 0.7;
}

.wrnp-search--look .wrnp-search__option.is-active {
  background: color-mix(in srgb, currentColor 8%, transparent);
}

.wrnp-search__note {
  opacity: 0.8;
}

.wrnp-search__note--error {
  opacity: 1;
}

.wrnp-search__note button {
  padding: 0;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  background: none;
  border: 0;
  cursor: pointer;
}

/* One-click cities under the city field. */
.wrnp-popular {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4em;
  margin: 0.5em 0 0;
  font-size: 0.875em;
}

.wrnp-popular__title {
  opacity: 0.75;
}

.wrnp-popular__city {
  margin: 0;
  padding: 0.2em 0.75em;
  font: inherit;
  line-height: 1.5;
  color: inherit;
  background: transparent;
  border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
  border-radius: 999px;
  cursor: pointer;
}

.wrnp-popular__city:hover,
.wrnp-popular__city:focus-visible {
  border-color: currentColor;
}

/* Classic checkout: the address fields a Nova Poshta rate does not ask for (classic.js sets the classes). */
/* !important: WooCommerce's address and country scripts show these rows with an inline display on every country
   change, page load included. */
form.checkout.wrnp-hide-billing #billing_address_1_field,
form.checkout.wrnp-hide-billing #billing_address_2_field,
form.checkout.wrnp-hide-billing #billing_city_field,
form.checkout.wrnp-hide-billing #billing_state_field,
form.checkout.wrnp-hide-billing #billing_postcode_field,
form.checkout.wrnp-hide-shipping #shipping_address_1_field,
form.checkout.wrnp-hide-shipping #shipping_address_2_field,
form.checkout.wrnp-hide-shipping #shipping_city_field,
form.checkout.wrnp-hide-shipping #shipping_state_field,
form.checkout.wrnp-hide-shipping #shipping_postcode_field {
  display: none !important;
}

/* Checkout block: the address fields a Nova Poshta rate does not ask for (block.js sets the classes). The billing
   form shows only with «same address for billing» off. */
.wrnp-hide-shipping .wc-block-checkout__shipping-fields .wc-block-components-address-form__address_1,
.wrnp-hide-shipping .wc-block-checkout__shipping-fields .wc-block-components-address-form__address_2,
.wrnp-hide-shipping .wc-block-checkout__shipping-fields .wc-block-components-address-form__address_2-toggle,
.wrnp-hide-shipping .wc-block-checkout__shipping-fields .wc-block-components-address-form__city,
.wrnp-hide-shipping .wc-block-checkout__shipping-fields .wc-block-components-address-form__state,
.wrnp-hide-shipping .wc-block-checkout__shipping-fields .wc-block-components-address-form__postcode,
.wrnp-hide-billing .wc-block-checkout__billing-fields .wc-block-components-address-form__address_1,
.wrnp-hide-billing .wc-block-checkout__billing-fields .wc-block-components-address-form__address_2,
.wrnp-hide-billing .wc-block-checkout__billing-fields .wc-block-components-address-form__address_2-toggle,
.wrnp-hide-billing .wc-block-checkout__billing-fields .wc-block-components-address-form__city,
.wrnp-hide-billing .wc-block-checkout__billing-fields .wc-block-components-address-form__state,
.wrnp-hide-billing .wc-block-checkout__billing-fields .wc-block-components-address-form__postcode {
  display: none;
}

/* My Account → Nova Poshta: one part per delivery kind. */
:where(.wrnp-account__part) {
  margin: 0 0 1.5em;
  padding: 0;
  border: 0;
}

:where(.wrnp-account__part legend) {
  margin-bottom: 0.5em;
  font-weight: 600;
}

/* «Labels inside fields» (wr-checkout-fields): the label stays for screen readers even without a theme style. */
.wrnp-label-inside > label {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}