/* Office directory block on the contact pages. Follows the worldexpeditions.com contact-us design;
   the same rules give the Bootstrap 3 skins that layout because nothing here depends on the grid. */
.wexOfficeDirectory .wexOfficeGroupHeading { margin-top: 2rem; }
.wexOfficeDirectory .wexOfficeGroup:first-child .wexOfficeGroupHeading,
.wexOfficeDirectory .wexOfficeHeading + .wexOfficeGroup .wexOfficeGroupHeading { margin-top: 0; }
.wexOfficeDirectory .wexOfficeGroupToggle { text-decoration: none; color: inherit; }
.wexOfficeDirectory .wexOfficeGroupToggle::after { content: "\25BE"; display: inline-block; margin-left: .4em; font-size: .7em; transition: transform .15s; }
.wexOfficeDirectory .wexOfficeGroupCollapsed .wexOfficeGroupToggle::after { transform: rotate(-90deg); }
.wexOfficeDirectory .wexOfficeName { margin-top: 1.5rem; margin-bottom: .5rem; }
.wexOfficeDirectory .wexOfficeDetails { margin-bottom: .75rem; }
.wexOfficeDirectory .wexOfficeFreecall { margin-bottom: .75rem; }
.wexOfficeDirectory .wexOfficeConsultation { margin-bottom: .75rem; }
.wexOfficeDirectory .wexOfficeNotes { margin-bottom: .75rem; }
.wexOfficeDirectory .wexOfficeMapWrapper { margin-bottom: 1rem; }
.wexOfficeDirectory .wexOfficeMap { width: 100%; height: 280px; margin-top: .5rem; background: #e9ecef; }
.wexOfficeDirectory .wexOfficeMap .maplibregl-ctrl-attrib { font-size: 10px; }
.wexOfficeDirectory .showMapLink, .wexOfficeDirectory .hideMapLink { cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .wexOfficeDirectory .wexOfficeGroupToggle::after { transition: none; } }

/* Map pin: flat teardrop, no drop shadow, with the name and street beside it.
   The pin element is zero-sized so MapLibre puts its tip on the coordinate. */
.wexOfficeDirectory .wexOfficeMap,
.wexOfficeDirectoryManagement .wexOfficeMap {
	--wexMapPinColour: #c8102e;
	--wexMapPinCentre: #8c0b20;
	--wexMapPinNameColour: #a01729;
	--wexMapPinAddressColour: #4f5559;
}
.wexMapPin { position: relative; width: 0; height: 0; }
.wexMapPin .wexMapPinIcon { position: absolute; left: -13px; bottom: 0; color: var(--wexMapPinColour, #c8102e); display: block; filter: none; }
.wexMapPin .wexMapPinCentre { fill: var(--wexMapPinCentre, #8c0b20); }
.wexMapPin .wexMapPinLabel { position: absolute; left: 16px; bottom: 4px; white-space: nowrap; pointer-events: none; line-height: 1.25; }
.wexMapPin .wexMapPinName,
.wexMapPin .wexMapPinAddress { display: block; text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff; }
.wexMapPin .wexMapPinName { font-size: 15px; font-weight: 600; color: var(--wexMapPinNameColour, #a01729); }
.wexMapPin .wexMapPinAddress { font-size: 12px; color: var(--wexMapPinAddressColour, #4f5559); }
@media (max-width: 480px) {
	.wexMapPin .wexMapPinName { font-size: 13px; }
	.wexMapPin .wexMapPinAddress { font-size: 11px; }
}

/* Map credit, matching Map Manager's own renderer (public/src/map.css, commit b6c2c9d): always
   visible, small grey text on a faint strip, no box and no "i" button, the way Google draws theirs.
   The basemap is open data whose licences ask for the credit, so it is styled down, never hidden. */
.wexOfficeMap .maplibregl-ctrl-bottom-right .maplibregl-ctrl-attrib,
#wexOfficeAdminMap .maplibregl-ctrl-bottom-right .maplibregl-ctrl-attrib {
	margin: 0;
	padding: 1px 6px 2px;
	border-radius: 0;
	background: rgba(255, 255, 255, 0.55);
	font: 10px/14px Arial, Helvetica, sans-serif;
	color: #4a4a4a;
}
.wexOfficeMap .maplibregl-ctrl-attrib a,
#wexOfficeAdminMap .maplibregl-ctrl-attrib a {
	color: #4a4a4a;
	text-decoration: none;
}
.wexOfficeMap .maplibregl-ctrl-attrib a:hover,
#wexOfficeAdminMap .maplibregl-ctrl-attrib a:hover {
	text-decoration: underline;
}
.wexOfficeMap .maplibregl-ctrl-attrib-button,
#wexOfficeAdminMap .maplibregl-ctrl-attrib-button {
	display: none !important;
}

/* ---- admin: checkbox labels beside the box, drag handles, field groups ----
   Written for both Bootstrap 3 and Bootstrap 5 skins, which is why the markup carries both
   class dialects and why nothing here relies on a framework rule. */
.wexOfficeDirectoryManagement .wexCheckList { margin: 4px 0 12px; }
.wexOfficeDirectoryManagement .wexCheckItem { margin: 0 0 4px; }
.wexOfficeDirectoryManagement .wexCheckItem input[type="checkbox"],
.wexOfficeDirectoryManagement .wexCheckList input[type="checkbox"] { margin: 0 6px 0 0; vertical-align: middle; }
.wexOfficeDirectoryManagement .wexCheckItem label,
.wexOfficeDirectoryManagement .wexCheckList label,
.wexOfficeDirectoryManagement input[type="checkbox"] + label {
	display: inline-block;
	font-weight: normal;
	margin: 0;
	vertical-align: middle;
}
.wexOfficeDirectoryManagement .wexCheckList table td { padding-right: 14px; }
.wexOfficeDirectoryManagement .wexFieldGroupHeading { font-size: 15px; font-weight: 700; margin: 18px 0 4px; }
.wexOfficeDirectoryManagement .mt-sm { margin-top: 10px; }
.wexOfficeDirectoryManagement .wexOfficeHiddenButton { position: absolute; left: -9999px; width: 1px; height: 1px; }

.wexOfficeDirectoryManagement .wexDragCell { width: 1%; text-align: center; }
.wexOfficeDirectoryManagement .wexDragHandle { display: inline-block; cursor: grab; color: #8a8a8a; line-height: 0; padding: 2px; }
.wexOfficeDirectoryManagement .wexDragHandle:hover { color: #333; }
.wexOfficeDirectoryManagement .wexDragHandle svg { fill: currentColor; display: block; }
.wexOfficeDirectoryManagement .wexSortableRow { cursor: default; }
.wexOfficeDirectoryManagement .wexSortableRow.wexDragging { opacity: 0.45; background: #fffbe6; }
.wexOfficeDirectoryManagement .wexOfficeDragHint { margin-top: -4px; }
.wexOfficeDirectoryManagement .wexOrderPending {
	margin: 0 0 10px;
	padding: 6px 10px;
	border-left: 3px solid #c8a415;
	background: #fffbe6;
	color: #6b5600;
	font-size: 13px;
}

/* ---- admin: one field per row, so a heading reads with the box under it ----
   Bootstrap 3 has no mb-4, so the spacing is set here and both skin generations match: a small gap
   between a label and its own field, a wider one before the next label. */
/* The gap belongs to the field, not to the label that follows it, so a field is spaced from
   whatever comes next: another label, a hint, a group heading, a rule or a button. */
.wexOfficeDirectoryManagement label {
	display: block;
	font-weight: 700;
	margin: 0 0 4px;
}
.wexOfficeDirectoryManagement .wexOfficeAdminHeading label,
.wexOfficeDirectoryManagement .wexCheckItem label,
.wexOfficeDirectoryManagement .wexCheckList label,
.wexOfficeDirectoryManagement input[type="checkbox"] + label { margin: 0; }
.wexOfficeDirectoryManagement input.form-control,
.wexOfficeDirectoryManagement select.form-control,
.wexOfficeDirectoryManagement textarea.form-control { display: block; width: 100%; margin: 0 0 18px; }
.wexOfficeDirectoryManagement .mb-sm { margin-bottom: 18px; }
/* A hint explains the field above it, so it sits close under that field and keeps the gap below */
.wexOfficeDirectoryManagement .wexOfficeHint { margin: -14px 0 18px; font-weight: normal; }
.wexOfficeDirectoryManagement .wexCheckList { margin: 0 0 18px; }
.wexOfficeDirectoryManagement .wexFieldGroupHeading { margin: 4px 0 6px; }
.wexOfficeDirectoryManagement h3 { margin: 26px 0 8px; }
.wexOfficeDirectoryManagement hr { margin: 26px 0; }
.wexOfficeDirectoryManagement .wexOfficeTableWrap { margin-bottom: 18px; }
/* The two hints that introduce a list rather than explain a field above it */
.wexOfficeDirectoryManagement .wexOfficeDragHint,
.wexOfficeDirectoryManagement .wexFieldGroupHeading + .wexOfficeHint { margin-top: 0; }
/* An introduction to a group of fields, saying who reads them. Sits under its heading. */
.wexOfficeDirectoryManagement .wexOfficeIntro { margin: 0 0 14px; color: #555; font-size: 13px; max-width: 60em; }

/* ---- "where does this appear?" help ----
   A small i beside a field label. Pressing it opens a cropped picture of a real contact page with
   the spot this field fills ringed in red. Pictures come from Documentation/contact-us-audit/capture-help.js */
.wexFieldHelp {
	display: inline-block;
	width: 15px;
	height: 15px;
	margin-left: 5px;
	border: 1px solid #7a8a99;
	border-radius: 50%;
	color: #44566b;
	background: #fff;
	font: italic 700 11px/13px Georgia, "Times New Roman", serif;
	text-align: center;
	cursor: pointer;
	vertical-align: middle;
	user-select: none;
}
.wexFieldHelp:hover { color: #fff; background: #44566b; border-color: #44566b; }
.wexFieldHelp:focus-visible { outline: 2px solid #0b6b5d; outline-offset: 1px; }

.wexFieldHelpPanel {
	display: none;
	position: absolute;
	z-index: 100000;
	width: 520px;
	max-width: 92vw;
	padding: 12px 14px 14px;
	background: #fff;
	border: 1px solid #b9c3cc;
	border-radius: 3px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
	font: 13px/1.5 Arial, Helvetica, sans-serif;
	color: #222;
}
.wexFieldHelpPanel .wexFieldHelpClose {
	position: absolute;
	top: 4px;
	right: 6px;
	border: 0;
	background: none;
	font-size: 20px;
	line-height: 1;
	color: #777;
	cursor: pointer;
	padding: 2px 6px;
}
.wexFieldHelpPanel .wexFieldHelpClose:hover { color: #222; }
.wexFieldHelpPanel .wexFieldHelpTitle { font-weight: 700; margin: 0 22px 4px 0; }
.wexFieldHelpPanel .wexFieldHelpText { margin: 0 0 10px; color: #444; }
.wexFieldHelpPanel .wexFieldHelpShot img { display: block; width: 100%; height: auto; border: 1px solid #dde3e8; }
.wexFieldHelpPanel .wexFieldHelpMissing { margin: 0; color: #777; font-style: italic; }