/* Sectional mailbox calculator: only what Bootstrap utilities cannot draw. */
/* Series: equal cards in two columns, text from the left edge */
.mc-series { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.mc-chip { display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: center; gap: 2px; width: 100%; min-height: 56px; padding: .5rem .75rem; text-align: left !important; line-height: 1.25; }
.mc-chip > span { display: block; width: 100%; text-align: left; }
.mc-chip-note { font-size: .75rem; font-weight: 400; opacity: .8; }
/* Colours: round swatches as on the product page */
.mc-colour { width: 44px; height: 44px; padding: 5px; border: 2px solid transparent; border-radius: 50%; background: none; }
.mc-colour span { display: block; width: 100%; height: 100%; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .2); }
.mc-colour:hover { border-color: var(--bs-border-color); }
.mc-colour.active { border-color: var(--bs-body-color); }
.mc-colour:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: 2px; }
/* A label on the left, its control on the right, on one line */
.mc-field { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.mc-field > :first-child { min-width: 0; }
.mc-toggle { min-height: 44px; flex: 1 1 0; }
.mc-wall-input { flex: 0 0 6.5rem; width: 6.5rem; }
.mc-stepper { flex: 0 0 9.5rem; width: 9.5rem; flex-wrap: nowrap; }
.mc-stepper .btn { min-width: 44px; min-height: 44px; }
.mc-stepper input { text-align: center; font-weight: 600; min-width: 3.5rem; }
.mc-stepper input::-webkit-outer-spin-button, .mc-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mc-stepper input { -moz-appearance: textfield; }
.mc-variant { display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; gap: 2px; text-align: left !important; min-height: 44px; }
.mc-variant > span { margin: 0 !important; }
.mc-variant, .mc-variant *, .mc-chip, .mc-chip * { white-space: normal !important; overflow-wrap: break-word; }
.mc-variant.active { box-shadow: inset 0 0 0 1px var(--bs-primary); }
.mc-badge { white-space: normal !important; max-width: 100%; text-align: left; line-height: 1.3; overflow-wrap: anywhere; }
#mc-wall input, .mc-numbers input, #mc-plate { min-height: 44px; }
/* The split of a variant: a line per entrance, names in one column, blocks in the other */
.mc-split { display: grid; grid-template-columns: auto 1fr; column-gap: .75rem; row-gap: 2px; align-items: baseline; width: 100%; }
.mc-split-line { display: contents; }
.mc-split-name { font-size: .8125rem; font-weight: 400; opacity: .75; }
.mc-split-blocks { font-size: 1.125rem; font-weight: 700; font-variant-numeric: tabular-nums; }
/* Flat numbers of an entrance: label, field, and a warning under the field */
.mc-numbers { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: .25rem .75rem; align-items: center; }
.mc-numbers + .mc-numbers { margin-top: .5rem; }
.mc-numbers-note { grid-column: 2; }
@media (max-width: 420px) { .mc-numbers { grid-template-columns: 1fr; } .mc-numbers-note { grid-column: 1; } }

/* Blocks hang from one line: aligned by the top edge */
.mc-wall { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .5rem; }
.mc-rows { display: flex; flex-direction: column; gap: .35rem; }
.mc-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .5rem; }
.mc-block { display: flex; flex-direction: column; align-items: center; gap: .25rem; padding: .25rem; min-width: 44px; background: none; border: 2px solid transparent; border-radius: .5rem; color: inherit; }
.mc-block:hover { border-color: var(--bs-border-color); }
.mc-block[aria-expanded="true"] { border-color: var(--bs-primary); background: var(--bs-tertiary-bg); }
.mc-block:focus-visible, .mc-add:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: 2px; }
.mc-body { display: flex; flex-direction: column; gap: 2px; padding: 3px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); }
.mc-body.mc-hz { flex-direction: row; }
.mc-slot { width: 44px; height: 14px; border-radius: 2px; border: 1px solid; font-size: 9px; line-height: 12px; text-align: center; font-weight: 700; overflow: hidden; white-space: nowrap; }
.mc-hz .mc-slot { width: 20px; height: 36px; line-height: 34px; }
.mc-body.mc-light .mc-slot { border-color: rgba(0, 0, 0, .3); background: rgba(255, 255, 255, .25); color: #222; }
.mc-body.mc-dark .mc-slot { border-color: rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .08); color: #fff; }
.mc-body.mc-light .mc-slot.mc-spare { background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .85) 0 4px, rgba(255, 255, 255, .35) 4px 8px); }
.mc-body.mc-dark .mc-slot.mc-spare { background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .45) 0 4px, rgba(255, 255, 255, .12) 4px 8px); }
.mc-caption { font-size: .75rem; color: var(--bs-secondary-color); white-space: nowrap; }
.mc-add { width: 44px; height: 44px; border: 1px dashed var(--bs-border-color); border-radius: .5rem; background: none; color: var(--bs-secondary-color); font-size: 1.25rem; line-height: 1; }
.mc-size { position: relative; width: 48px; height: 48px; padding: 0; font-size: 1.125rem !important; font-weight: 600; line-height: 1; }
.mc-remove { min-height: 48px; }
/* A small green lamp: this size is on site */
.mc-lamp { display: inline-block; flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: #2e9d5b; }
.mc-lamp-corner { position: absolute; top: 4px; right: 4px; }
.mc-entrance + .mc-entrance { border-top: 1px solid var(--bs-border-color); }
/* The total: a line per position, names left, sums right */
.mc-totals > div { display: flex; justify-content: space-between; gap: 1rem; padding: 2px 0; font-size: .875rem; }
.mc-totals dt { font-weight: 400; }
.mc-totals dd { margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }