/* 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; }
.bgc-fields .select2-selection { min-height: 38px !important; border: 1px solid #d8dde3 !important; border-radius: 8px !important; display: flex; align-items: center; }
.bgc-fields .select2-selection__rendered { line-height: 36px !important; padding-left: 8px !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.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). */
.bgc-office-pick .bgc-office, .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; }
