/* ═══════════════════════════════════════════════════════════
   WooMyData Pro — Checkout Fields

   Design philosophy: fully neutral and adaptive.
   Nothing here imposes brand colours, custom fonts, or
   opinionated chrome. Every element inherits from the
   active WooCommerce theme so the plugin blends into any store.
   ═══════════════════════════════════════════════════════════ */

/* ── DOCUMENT TYPE SELECTOR
   Minimal wrapper — no background, no border, no padding.
   The theme's own field spacing provides all the separation needed.
   ─────────────────────────────────────────────────────────── */
#woomydata-document-selector {
  margin: 0 0 20px;
}
#woomydata-document-selector h3 {
  font-size: .875em;
  font-weight: 600;
  margin: 0 0 10px;
  color: inherit;
}

/* ── DOCUMENT TYPE BUTTONS
   Inherit everything from the theme — font, size, colour.
   Active state uses WooCommerce's own primary button variables
   so the button automatically matches the store's brand colour.
   ─────────────────────────────────────────────────────────── */
.document-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.document-type-button {
  flex: 1;
  min-width: 120px;
  padding: 10px 16px;
  border: 1px solid #ccc;
  background: transparent;
  cursor: pointer;
  border-radius: 4px;
  transition: border-color .15s, background .15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font: inherit;
  font-weight: 500;
  color: inherit;
}
.document-type-button:hover {
  border-color: #888;
  background: rgba(0,0,0,.03);
}
/* Active: use WC primary button colour if the theme exposes it,
   otherwise fall back to a safe dark neutral */
.document-type-button.active {
  background-color: var(--wc-primary-button-background-color,
                    var(--wp--preset--color--primary, #333));
  color:            var(--wc-primary-button-color, #fff);
  border-color:     var(--wc-primary-button-background-color,
                    var(--wp--preset--color--primary, #333));
}
.document-type-button .dashicons {
  font-size: 16px;
  width: 16px;
  height: 16px;
}

/* ── INVOICE FIELDS VISIBILITY ── */
.invoice-field { display: none; }
.show-invoice-fields .invoice-field { display: block !important; }

/* ── COUNTRY + VAT FIELD ROW
   WooCommerce uses form-row-first (float:left, width:47%)
   and form-row-last (float:right, width:47%) for side-by-side
   fields — the same layout as First Name / Last Name.
   We replicate that here explicitly so the pair always aligns,
   even when themes override WC's default field widths.
   ─────────────────────────────────────────────────────────── */
#billing_country_field.woomydata-country-field {
  float: left  !important;
  clear: left  !important;
  width: 47%   !important;
  margin-right: 3.5% !important;
}
#billing_afm_field.woomydata-vat-field {
  float: right !important;
  clear: none  !important;
  width: 47%   !important;
  margin-right: 0 !important;
}
/* Clearfix after the pair so subsequent fields stack below */
#billing_afm_field.woomydata-vat-field::after {
  content: '';
  display: table;
  clear: both;
}

/* Narrow screens: stack vertically, same as WC default */
@media (max-width: 600px) {
  #billing_country_field.woomydata-country-field,
  #billing_afm_field.woomydata-vat-field {
    float: none  !important;
    clear: both  !important;
    width: 100%  !important;
    margin-right: 0 !important;
  }
}

/* ── VAT STATUS MESSAGE ── */
.woomydata-vat-status {
  font-size: .8em;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: .4rem;
  line-height: 1.4;
}
.woomydata-vat-status.is-checking::before {
  content: '';
  width: 10px; height: 10px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  display: inline-block;
  animation: wmSpin .7s linear infinite;
  opacity: .6;
}
@keyframes wmSpin { to { transform: rotate(360deg); } }

/* ── VAT STATUS FIELD COLOURS ── */
.vat-status-field input.normal-vat {
  border-left: 3px solid #059669 !important;
  color: #065f46 !important;
  background: rgba(5,150,105,.04) !important;
}
.vat-status-field input.non-normal-vat {
  border-left: 3px solid #dc2626 !important;
  color: #991b1b !important;
  background: rgba(220,38,38,.04) !important;
}

/* ── HIDE OPTIONAL LABEL ── */
.woocommerce-billing-fields p.invoice-field label .optional,
.woomydata-hide-optional .optional {
  display: none !important;
}