is the row; the label is just text inside it.
========================================================================== */
body.eg-contact #main .wpforms-field-checkbox ul,
body.eg-contact #main .wpforms-field-radio ul { margin: 0 !important; padding: 0 !important; }
body.eg-contact #main .wpforms-field-checkbox li,
body.eg-contact #main .wpforms-field-radio li {
list-style: none !important;
display: flex !important;
align-items: center !important;
gap: 10px !important;
margin: 0 8px 8px 0 !important;
padding: 10px 14px !important;
background: rgba(255,255,255,.03) !important;
border: 1px solid var(--eg-line) !important;
transition: border-color .2s, background .2s;
}
body.eg-contact #main .wpforms-field-checkbox li:hover,
body.eg-contact #main .wpforms-field-radio li:hover {
background: rgba(255,255,255,.06) !important;
border-color: var(--eg-line-2) !important;
}
/* The label is now only the text. Strip the box treatment the first pass gave it. */
body.eg-contact #main .wpforms-field-checkbox label.wpforms-field-label-inline,
body.eg-contact #main .wpforms-field-radio label.wpforms-field-label-inline {
display: inline !important;
background: none !important;
border: 0 !important;
padding: 0 !important;
margin: 0 !important;
font-size: 14px !important;
line-height: 1.3 !important;
color: #EDEDED !important;
cursor: pointer;
}
body.eg-contact #main .wpforms-field-checkbox input[type=checkbox],
body.eg-contact #main .wpforms-field-radio input[type=radio] {
appearance: none !important; -webkit-appearance: none !important;
width: 16px !important; height: 16px !important; flex: 0 0 16px !important;
margin: 0 !important; padding: 0 !important;
background: transparent !important;
border: 1px solid var(--eg-line-2) !important;
border-radius: 0 !important;
position: relative; cursor: pointer;
}
body.eg-contact #main .wpforms-field-checkbox input[type=checkbox]:checked,
body.eg-contact #main .wpforms-field-radio input[type=radio]:checked {
background: var(--eg-lime) !important; border-color: var(--eg-lime) !important;
}
body.eg-contact #main .wpforms-field-checkbox input[type=checkbox]:checked::after {
content: "" !important; position: absolute; left: 5px; top: 1px;
width: 4px; height: 9px; border: solid #0A0A0A; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
body.eg-contact #main .wpforms-field-checkbox legend.wpforms-field-label { margin-bottom: 12px !important; }
/* ==========================================================================
Business hours — the leader line
The theme draws a rule between the day and the hours, and my earlier
border-bottom on .working-item added a second line under the row. One line,
not two: keep the row clean and space the two values apart.
========================================================================== */
body.eg-contact #main .working-item {
display: flex !important;
align-items: baseline !important;
justify-content: space-between !important;
gap: 16px;
border-bottom: 1px solid var(--eg-line) !important;
padding: 11px 0 !important;
margin: 0 !important;
}
body.eg-contact #main .working-item:last-child { border-bottom: 0 !important; }
body.eg-contact #main .working-item::before,
body.eg-contact #main .working-item::after,
body.eg-contact #main .working-item_day::after,
body.eg-contact #main .working-item_hours::before {
content: none !important; display: none !important; border: 0 !important;
}
body.eg-contact #main .working-item_day {
color: var(--eg-mute) !important; font-size: 13px !important;
letter-spacing: .1em; text-transform: uppercase; border: 0 !important; flex: 0 0 auto;
}
body.eg-contact #main .working-item_hours {
color: var(--eg-ink) !important; font-size: 14.5px !important;
font-weight: 600; border: 0 !important; flex: 0 0 auto; text-align: right;
}
/* The hours list computes as flex with space-between correctly, but its own
container is only 220px wide inside a full-width panel — so the two values sat
bunched against the left edge with dead space beside them. Let it fill. */
body.eg-contact #main .wgl-working-hours { width: 100% !important; max-width: none !important; }
body.eg-contact #main .elementor-widget-wgl-working-hours,
body.eg-contact #main .elementor-widget-wgl-working-hours > .elementor-widget-container { width: 100% !important; }
/* The hours widget's own Elementor wrapper carries max-width:50%, so widening
.wgl-working-hours and .elementor-widget-container had no effect — the
constraint was one level above both. */
body.eg-contact #main .elementor-widget-wgl-working-hours {
max-width: 100% !important;
width: 100% !important;
}
body.eg-contact #main .elementor-widget-wgl-working-hours .working-item_hours { min-width: 90px; }
/* ---- Business Hours: one card, not two misaligned widgets ----------------
The heading ("Business Hours" + clock icon) and the hours list are two
separate Elementor widgets stacked in the same column. The heading is an
eael-infobox, which the panel rule above gives a background and border; the
list is a wgl-working-hours widget with no background, so they read as
unrelated. Worse, the list's own .elementor-widget-container carries an
Elementor margin of -25px top / 65px left. The left offset pushed the rows
65px right of the panel so they overflowed the same distance past its right
edge; the negative top margin pulled the list up over the heading, and once
the list had a background of its own that background painted across the
bottom half of the clock icon and sliced it in two.
Zero the whole margin — not just left/right — and continue the panel down
over the list so the pair reads as a single card. Scoped to the heading's
own element id so other info boxes on the page keep their full border. */
body.eg-contact #main .elementor-element-85fdb8b { margin-bottom: 0 !important; }
body.eg-contact #main .elementor-element-85fdb8b .eael-infobox { border-bottom: 0 !important; }
body.eg-contact #main .elementor-widget-wgl-working-hours > .elementor-widget-container {
margin: 0 !important;
background: var(--eg-panel);
border: 1px solid var(--eg-line);
border-top: 0;
padding: 2px 26px 16px !important;
}
body.eg-contact #main .wgl-working-hours .working-item:last-child { border-bottom: 0 !important; }