/* BG Couriers - checkout fields */
.bgc-fields { position: relative; margin: 10px 0; }
/* Reveal a courier's delivery fields only once they are fully initialised (select2 built, tabs + availability
   ready), so the checkout shows the courier list first and the current courier's fields fade/slide in smoothly
   instead of flashing raw <select>s while the page is still loading. */
.bgc-fields { opacity: 0; transform: translateY(6px); transition: opacity .28s ease, transform .28s ease; }
.bgc-fields.bgc-ready { opacity: 1; transform: none; }
.bgc-fields, .bgc-fields * { box-sizing: border-box; }

/* Kill theme list bullets / markers that leak into our rows */
.bgc-fields ul, .bgc-fields li, .bgc-fields p, .bgc-fields label, .bgc-fields .bgc-field { list-style: none !important; }
.bgc-fields p::before, .bgc-fields p::marker,
.bgc-fields label::before, .bgc-fields label::marker,
.bgc-fields .bgc-field::before, .bgc-fields .bgc-field::marker { content: none !important; display: none !important; }

/* Delivery-type tabs */
.bgc-tabs { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.bgc-tab { flex: 1 1 auto; min-width: 92px; padding: 9px 12px; border: 1px solid #e2e6ea; border-radius: 10px;
  background: #fff; color: #333; font-weight: 600; cursor: pointer; text-align: center;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  box-shadow: 0 1px 2px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s, background .15s; }
.bgc-tab .bgc-mtype-ico { flex: 0 0 auto; }
.bgc-tab:hover { border-color: #b9c2cc; box-shadow: 0 2px 6px rgba(0,0,0,.10); }
.bgc-tab.active { border-color: #2271b1; color: #2271b1; background: #f3f8fd; box-shadow: 0 3px 10px rgba(34,113,177,.18); }
/* Greyed-out + disabled when the chosen city has no office/APS of that type. */
.bgc-tab.bgc-tab-na { background: #f3f4f5; color: #a7aaad; border-color: #e2e6ea; cursor: not-allowed;
  box-shadow: none; opacity: .7; text-decoration: line-through; pointer-events: none; }

/* "cash on delivery is not available here" - shown under the tabs for a delivery kind the courier
   collects no money at (Express One's EXOBOX lockers). A note, not an error: nothing is wrong yet. */
.bgc-nocod { margin: -4px 0 10px; padding: 8px 11px; border: 1px solid #f0d9a8; border-radius: 8px;
  background: #fdf6e6; color: #6b5314; font-size: 13px; line-height: 1.45; }

/* Panel + compact fields */
.bgc-panel { display: flex; flex-direction: column; gap: 10px; }
.bgc-field { display: flex; flex-direction: column; min-width: 0; }
.bgc-field > label { font-size: 12px; font-weight: 600; color: #555; margin: 0 0 3px; }
.bgc-field input { width: 100%; height: 38px; padding: 6px 10px; border: 1px solid #d8dde3; border-radius: 8px; }
.bgc-grid { display: grid; grid-template-columns: 1fr 110px; gap: 10px; }
.bgc-grid-4 { grid-template-columns: repeat(4, 1fr); }
/* Street row with a small map-pin icon next to No. (instead of a full-width "Choose on map" button). */
.bgc-grid-map { grid-template-columns: 1fr 84px 46px; }
.bgc-addr-map-cell { justify-content: flex-end; }
.bgc-addr-map-icon { width: 100%; height: 38px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid #d8dde3; border-radius: 8px; background: #fff; color: #2271b1; cursor: pointer; }
.bgc-addr-map-icon:hover { border-color: #2271b1; background: #f3f8fd; }

/* select2 (city + office) sizing to match inputs */
.bgc-fields .select2-container { width: 100% !important; }
/* A shop where selectWoo never loaded keeps plain <select>s, and a plain <select> is as wide as its
   longest option - "Офис Дружба, бул. Христофор Колумб 64" is 280px of it. That is the same fault the
   rendered box below had, from the other direction, so it gets the same answer: no minimum offered to
   the table, full width in the field. */
.bgc-fields select:not(.select2-hidden-accessible) { width: 0; min-width: 100%; }
.bgc-fields .select2-selection { min-height: 38px !important; border: 1px solid #d8dde3 !important; border-radius: 8px !important; display: flex; align-items: center; }
/* `width: 0` + `min-width: 100%` is not decoration - it is what keeps this checkout on a phone.
   These fields sit inside a cell of WooCommerce's review-order table, and a table cell is never
   narrower than the widest thing in it that cannot shrink. select2 draws the chosen town or office as
   one nowrap line, so the cell insisted on ~350px (measured on the dev checkout with the office tab
   open) - more than the content area of a 360px phone once the theme keeps a label column beside it.
   The table then grew wider than the screen and the courier menu was cut off at the edge; with the
   address tab open the same arithmetic squeezed the street box down to ~70px. `width: 0` leaves the
   table no minimum to honour, `min-width: 100%` still fills the field the box is in - and the cell's
   minimum drops from 350px to 143px, which fits anywhere. */
.bgc-fields .select2-selection__rendered { line-height: 36px !important; padding-left: 8px !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 0; min-width: 100%; }
.bgc-fields .select2-selection__arrow { height: 36px !important; }
/* The search box inside the dropdown (city / office / street). The dropdown is appended to <body>, so it
   is reached through the dropdownCssClass we set in bgc-checkout.js, not by nesting. Without this it keeps
   select2's own small height and looks squashed under our 38px fields. */
.select2-container--open .bgc-drop .select2-search--dropdown { padding: 8px; }
.select2-container--open .bgc-drop .select2-search--dropdown .select2-search__field {
  height: 38px; min-height: 38px; box-sizing: border-box; padding: 0 10px;
  border: 1px solid #d8dde3; border-radius: 8px; font-size: 15px; line-height: 36px; }
.select2-container--open .bgc-drop .select2-search--dropdown .select2-search__field:focus {
  border-color: #2271b1; outline: none; }
.select2-container--open .bgc-drop .select2-results__option { padding: 9px 10px; }

/* Loader overlay shown while a tab's data + price load */
.bgc-loader { display: none; } /* WooCommerce's own blockUI spinner covers recalculation - avoid a second spinner */
/* Grey out + disable the fields while recalculating. No CSS filter: it creates a containing block that
   mispositions select2's dropdown. Opacity is safe. */
.bgc-fields.bgc-loading .bgc-panel, .bgc-fields.bgc-loading .bgc-tabs { opacity: .5; pointer-events: none; }

/* Unselected courier's price/label dimmed - visible for comparison, but clearly not what you'll pay. */
label.bgc-rate-inactive, label.bgc-rate-inactive .amount, label.bgc-rate-inactive .woocommerce-Price-amount { color: #9aa0a6 !important; }
.bgc-spinner { width: 26px; height: 26px; border: 3px solid #cfd8e3; border-top-color: #2271b1; border-radius: 50%; animation: bgc-spin .7s linear infinite; }
@keyframes bgc-spin { to { transform: rotate(360deg); } }

/* Emergency help modal */
/* All three of these are modals, and all three sat below things they had to cover. WooCommerce's own
   admin stylesheet puts select2 at z-index 999999, so on the order screen the ORDER STATUS and customer
   selects - and the delivery editor's own city/office fields - were painted straight through the office
   map. On the checkout the same 100000 lost to the shop's chat bubble. The maximum a z-index can hold is
   the honest answer for a modal: it is either covering the page or it is not. Nothing here touches those
   other elements; they simply lose while a dialog is open, and come back when it closes. */
.bgc-emerg-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 2147483647; display: flex; align-items: center; justify-content: center; padding: 16px; }
.bgc-emerg-box { position: relative; background: #fff; border-radius: 12px; max-width: 420px; width: 100%; padding: 28px 26px; box-shadow: 0 12px 40px rgba(0,0,0,.25); text-align: center; }
.bgc-emerg-close { position: absolute; top: 8px; right: 12px; border: 0; background: none; font-size: 26px; line-height: 1; color: #888; cursor: pointer; }
.bgc-emerg-msg { font-size: 16px; line-height: 1.5; margin: 4px 0 18px; color: #222; }
.bgc-emerg-tel { display: inline-block; font-size: 22px; font-weight: 700; text-decoration: none; padding: 12px 22px; border-radius: 10px; background: #2271b1; color: #fff !important; }
.bgc-emerg-tel:hover { background: #135e96; }

/* BOX NOW locker picker (map widget) */
.bgc-boxnow-selected { margin-top: 8px; padding: 8px 10px; border: 1px solid #d8dde3; border-radius: 8px; background: #f6f8fa; }
.bgc-boxnow-selected .bgc-boxnow-addr { color: #555; }
.bgc-boxnow-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 2147483647; display: flex; align-items: center; justify-content: center; padding: 12px; }
.bgc-boxnow-modal { position: relative; background: #fff; border-radius: 12px; width: 100%; max-width: 920px; height: 80vh; box-shadow: 0 12px 40px rgba(0,0,0,.3); overflow: hidden; }
.bgc-boxnow-close { position: absolute; top: 6px; right: 10px; z-index: 2; border: 0; background: rgba(255,255,255,.92); border-radius: 50%; width: 32px; height: 32px; font-size: 22px; line-height: 1; cursor: pointer; }
.bgc-boxnow-frame { width: 100%; height: 100%; border: 0; }

/* Courier brand logo outside a rate row (free-shipping notices and the like); inside the rate list
   bgc-rates.css takes over. */
.bgc-ship-logo { width: 16px; height: 16px; object-fit: contain; vertical-align: -3px; margin-right: 5px; display: inline-block; }
/* Notices sit on a theme-colored panel and the theme picks a legible text color for it - force every
   nested span (the theme-styled .woocommerce-Price-amount) to inherit that color instead of its own
   accent, which may match the panel background (e.g. blue-on-blue). */
.bgc-free-notice, .bgc-free-notice * { color: inherit !important; }

/* Office / APS map picker (Leaflet) */
.bgc-office-pick { display: flex; gap: 6px; align-items: stretch; max-width: 100%; }
/* min-width:0 + width:auto let the select shrink so the Map button stays inside the row (overrides the
   global .select2-container width:100% !important, hence the more specific selector).
   The `:not(.select2-hidden-accessible)` is what stops this from breaking the page. select2 hides the
   original <select> with `position:absolute; width:1px !important` - and this rule's `width:auto`, being
   more specific, won that fight and blew the hidden select back up to the width of its longest option.
   It is out of flow, so nothing moved; it simply stuck out past the right edge and gave the whole
   checkout a horizontal scrollbar (measured: a 320px viewport scrolled to 419px). The <select> half of
   this selector is only here for a shop where selectWoo never ran, and there is nothing to override. */
.bgc-office-pick .bgc-office:not(.select2-hidden-accessible) { flex: 1 1 auto; min-width: 0; }
.bgc-office-pick .select2-container { flex: 1 1 auto; min-width: 0; width: auto !important; }
/* Neutral, theme-agnostic button: transparent with a currentColor border + icon, so it looks right on
   both light and dark sites (no theme accent colour, no emoji). */
.bgc-map-btn { flex: 0 0 auto; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px;
  box-sizing: border-box; height: 38px; padding: 0 12px;
  background: transparent; color: inherit; font: inherit; line-height: 1;
  border: 1px solid currentColor; border-radius: 8px; opacity: .6;
  cursor: pointer; box-shadow: none; transition: opacity .15s ease, background-color .15s ease; }
.bgc-map-btn:hover { opacity: 1; background: rgba(128,128,128,.10); }
.bgc-map-btn:focus-visible { opacity: 1; outline: 2px solid currentColor; outline-offset: 1px; }
.bgc-map-btn:disabled { opacity: .3; cursor: default; background: transparent; }
.bgc-map-btn .bgc-map-ico { flex: 0 0 auto; display: block; }
.bgc-map-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 2147483647; display: flex; align-items: center; justify-content: center; padding: 16px; }
.bgc-map-box { background: #fff; border-radius: 10px; width: min(860px, 96vw); max-height: 92vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 12px 40px rgba(0,0,0,.3); }
.bgc-map-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid #e5e7eb; }
.bgc-map-close { border: 0; background: none; font-size: 24px; line-height: 1; cursor: pointer; color: #6b7280; }
.bgc-map-canvas { flex: 1 1 auto; height: 62vh; min-height: 300px; width: 100%; }
.bgc-map-actions { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-top: 1px solid #e5e7eb; }
.bgc-map-hint { color: #6b7280; font-size: .92em; }
.bgc-map-pop { text-align: center; min-width: 150px; }
.bgc-map-pop .bgc-map-choose { margin-top: 6px; }
.leaflet-container { font: inherit; }
.bgc-map-actions .bgc-map-hint { flex: 1 1 auto; }
.bgc-map-actions .bgc-addr-use { flex: 0 0 auto; }
/* office map with a searchable side list (BOX NOW-style) */
.bgc-map-box-wide { width: min(1060px, 96vw); }
.bgc-map-body { display: flex; height: 64vh; min-height: 340px; }
.bgc-map-side { width: 360px; max-width: 46%; display: flex; flex-direction: column; background: #fafbfc; border-right: 1px solid #e5e7eb; }
/* The row the search shares with the locate button. The geometry is forced because themes style bare
   inputs with their own padding and box-sizing, and Shoptimizer's flattened the 38px that keeps the
   magnifier off the placeholder - the icon sat on top of the words. */
.bgc-map-searchrow { display: flex; align-items: center; gap: 8px; margin: 12px; }
.bgc-map-side .bgc-map-searchrow .bgc-map-search { flex: 1 1 auto; min-width: 0; margin: 0 !important;
  box-sizing: border-box !important; padding: 10px 12px 10px 38px !important; height: auto !important; }
/* Locate: an icon with a hint, the same square as the map's own controls, instead of a full-width
   green bar at the bottom of the dialog competing with the office list for attention. */
/* Scoped to the search row on PURPOSE. The address pickers - one at checkout, one in the admin - keep
   a full-width labelled button in their footer, and they share this stylesheet: an unscoped rule turned
   that button into a 38px square with a sentence inside it. */
.bgc-map-searchrow .bgc-map-locate,
.bgc-allmap-searchrow .bgc-map-locate { flex: 0 0 auto; width: 38px; height: 38px; padding: 0; border: 1px solid #d8dde3;
  border-radius: 10px; background: #fff no-repeat center / 18px 18px; cursor: pointer; position: relative;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232271b1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 2v3M12 19v3M2 12h3M19 12h3'/%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3C/svg%3E"); }
.bgc-map-searchrow .bgc-map-locate:hover,
.bgc-allmap-searchrow .bgc-map-locate:hover { border-color: #2271b1; box-shadow: 0 0 0 3px rgba(34,113,177,.15); }
.bgc-map-search { margin: 12px; padding: 10px 12px 10px 38px; border: 1px solid #d8dde3; border-radius: 10px; font: inherit; background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 13px center; transition: border-color .15s, box-shadow .15s; }
.bgc-map-search:focus { outline: none; border-color: #2271b1; box-shadow: 0 0 0 3px rgba(34,113,177,.15); }
.bgc-map-list { flex: 1 1 auto; overflow-y: auto; margin: 0; padding: 0; list-style: none; }
.bgc-map-item { padding: 11px 14px; border-bottom: 1px solid #eceef0; border-left: 3px solid transparent; cursor: pointer; display: flex; flex-direction: column; gap: 3px; transition: background .12s, border-color .12s; }
.bgc-map-item strong { font-weight: 600; line-height: 1.25; }
.bgc-map-item:hover { background: #f0f5fb; }
.bgc-map-item.active { background: #eaf3fc; border-left-color: #2271b1; }
.bgc-map-item span { color: #6b7280; font-size: .86em; line-height: 1.3; }
.bgc-map-body .bgc-map-canvas { flex: 1 1 auto; height: 100%; min-height: 0; }
@media (max-width: 680px) {
  .bgc-map-body { flex-direction: column; height: auto; }
  .bgc-map-side { width: auto; max-width: none; max-height: 28vh; border-right: 0; border-bottom: 1px solid #e5e7eb; }
  .bgc-map-body .bgc-map-canvas { height: 46vh; }
}

/* The courier rate rows themselves (list, hidden radio, logo, price, chosen-row card) and the (i) hint
   live in bgc-rates.css - the cart renders the same list, so those rules have to load on both pages. */

/* select2's clear sits immediately after the text, so on a wide field it floats in the middle of the
   box with nothing around it and reads as part of the town's name - "СОФИЯ (1000)✕". Moved to the
   right-hand end, just inside the arrow, which is where every other control on this checkout keeps it.
   Scoped to our own fields so no other select2 on the page is touched. */
.bgc-fields .select2-container--default .select2-selection--single { position: relative; }
.bgc-fields .select2-container--default .select2-selection--single .select2-selection__clear {
  position: absolute; right: 26px; top: 50%; transform: translateY(-50%); margin: 0;
  float: none; padding: 0 4px; font-size: 18px; line-height: 1; color: #6b7280; }
.bgc-fields .select2-container--default .select2-selection--single .select2-selection__clear:hover { color: #1d2327; }
/* ...and the text stops before it, rather than running underneath. */
.bgc-fields .select2-container--default .select2-selection--single .select2-selection__rendered { padding-right: 48px; }

/* ── Narrow screens, and narrow columns ────────────────────────────────────────────────────────────
   Two different questions, so two different tools.

   HOW MUCH ROOM the fields have is not a property of the phone. This widget is dropped into a cell of
   somebody else's totals table, and how wide that cell ends up depends on the theme: the same 390px
   screen leaves it 171px on one shop and 280px on another, and in the cart or a wide sidebar it has
   plenty. A viewport media query cannot see any of that; a container query is asking the right thing.

   HOW BIG A TARGET has to be IS a property of the input device, and that is the media query at the end.

   Containment is safe here: all three of this plugin's overlays are appended to <body>, so nothing
   position:fixed lives inside .bgc-fields to be caught by it. */
@supports (container-type: inline-size) {
  .bgc-fields { container-type: inline-size; container-name: bgcfields; }
}

@container bgcfields (max-width: 360px) {
  .bgc-tabs { gap: 6px; }
  /* Let a tab be as wide as its own words. The 92px floor is what forced one tab per line in a column
     this narrow, and three full-width bars for three short phrases reads as three separate decisions. */
  .bgc-tab { min-width: 0; padding: 10px 8px; }
  /* The office row stays one line, and the office NAME is what has to be readable on it - so the Map
     button drops its word and becomes the same pin square the address row already uses. The word only
     moves: it stays in the title and the aria-label. */
  .bgc-office-pick .bgc-map-btn { width: 38px; padding: 0; justify-content: center; }
  .bgc-office-pick .bgc-map-btn span { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  /* Street name above the house number instead of beside it. Sharing one line here left the street
     eight characters wide, and a street cut to eight characters is not a street. */
  .bgc-grid { grid-template-columns: minmax(0, 1fr); }
  .bgc-grid-map { grid-template-columns: minmax(0, 1fr) 44px; }
  .bgc-grid > .bgc-street-field { grid-column: 1 / -1; }
  .bgc-grid > .bgc-streetno-field { max-width: 120px; }
  /* Block / entrance / floor / apartment, two and two: four across gives each of them less width than
     the word standing above it. */
  .bgc-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Touch. Sizes here are about the finger, not the column. */
@media (pointer: coarse) {
  /* 16px is the size below which iOS zooms the page the instant a field is focused - and a checkout
     that jumps and has to be pinched back is the twin of the bug this file already fixes once. */
  .bgc-fields input,
  .bgc-fields .select2-selection__rendered,
  .select2-container--open .bgc-drop .select2-search--dropdown .select2-search__field { font-size: 16px; }
  /* 44px is the smallest target a thumb hits reliably. !important because the sizes it is raising are
     themselves !important - they exist to beat the theme, and this exists to beat them. */
  .bgc-fields input { min-height: 44px; }
  .bgc-fields .select2-selection { min-height: 44px !important; }
  .bgc-fields .select2-selection__rendered { line-height: 42px !important; }
  .bgc-fields .select2-selection__arrow { height: 42px !important; }
  .select2-container--open .bgc-drop .select2-search--dropdown .select2-search__field { height: 44px; min-height: 44px; line-height: 42px; }
  .select2-container--open .bgc-drop .select2-results__option { padding: 12px 10px; }
  .bgc-tab, .bgc-map-btn, .bgc-addr-map-icon { min-height: 44px; }
}