/**
 * General calculator styles
 *
 * Corners come from --bwcalc-radius, set per site by the Corner Radius field in
 * Calculator Settings and written onto each block by get_style_vars(). Anything
 * that is part of the calculator chrome reads it rather than naming a radius of
 * its own, so the panels, the inputs and the buttons round together.
 */

/**
 * Header styles
 */
/**
  alert  css  
 **/
.bw-input-error {
    border: 2px solid red !important;
    transition: border 0.2s ease;
}

.bw-calculator {
    margin-block: 20px;
}

.bw-calculator-alert {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    margin: 12px 1.25rem;
    border-radius: 8px;
    border-left: 4px solid;
    font-size: 14px;
    line-height: 1.5;
    position: relative;
    animation: bw-calculator-alert-slideIn 0.3s ease-out;
}

@keyframes bw-calculator-alert-slideIn {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.bw-calculator-alert-icon {
    margin-right: 12px;
    font-size: 18px;
    font-weight: bold;
}

.bw-calculator-alert-content {
    flex: 1;
}

.bw-calculator-alert-title {
    font-weight: 600;
    margin-bottom: 4px;
}

.bw-calculator-alert-message {
    opacity: 0.9;
}

/* Error Alert */
.bw-calculator-alert-error {
    background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
    border-left-color: #dc3545;
    color: #721c24;
}

.bw-calculator-alert-error .bw-calculator-alert-icon {
    color: #dc3545;
}

.bw-calculator-alert-fade-out {
    animation: bw-calculator-alert-fadeOut 0.5s ease-in forwards;
}

@keyframes bw-calculator-alert-fadeOut {
    from {
        opacity: 1;
        transform: translateX(0);
    }

    to {
        opacity: 0;
        transform: translateX(100%);
    }
}

.bw-calculator-alert-demo-section {
    max-width: 800px;
    margin: 0 auto;
}

.bw-calculator-alert-create-section {
    background: white;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin-top: 30px;
    text-align: center;
}

.bw-calculator-alert-create-btn {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    color: white;
    padding: 12px 24px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.2s ease;
}

.bw-calculator-alert-create-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
}

/**end alert
 */
.bw-calculator__container {
    border: 1px solid rgba(52, 58, 64, 0.25);
    box-shadow: 0 3px 10px 0 rgba(52, 58, 64, 0.10);
    border-radius: var(--bwcalc-radius, 5px);
    /*
     * The bands inside carry their own backgrounds, and which one closes the
     * stack depends on what the calculator renders and what the script has
     * hidden. Clipping here keeps the rounding honest whichever band ends up
     * last, rather than relying on each of them to round the right corners.
     */
    overflow: hidden;
}

.bw-calculator__header {
    background-color: var(--bwcalc-main-clr, #4E525D);
    border-radius: var(--bwcalc-radius, 5px) var(--bwcalc-radius, 5px) 0 0;
    padding: 0.625rem 1.25rem;
}

.bw-calculator__header h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--bwcalc-secondary-clr, #FFF);
    margin: 0;
}

.bw-calculator .bw-calculator__container .bw-calculator__header a,
.bw-calculator .bw-calculator__container .bw-calculator__header a:visited,
.bw-calculator .bw-calculator__container .bw-calculator__notice a,
.bw-calculator .bw-calculator__container .bw-calculator__notice a:visited {
    color: var(--bwcalc-secondary-clr, #FFF);
    text-decoration: underline;
}

.bw-calculator .bw-calculator__container .bw-calculator__header a:hover,
.bw-calculator .bw-calculator__container .bw-calculator__header a:focus,
.bw-calculator .bw-calculator__container .bw-calculator__notice a:hover,
.bw-calculator .bw-calculator__container .bw-calculator__notice a:focus {
    color: var(--bwcalc-secondary-clr, #FFF);
    opacity: 0.8;
}

/**
 * Input styles
 */
.bw-calculator__input-container {
    background: var(--bwcalc-secondary-clr, #FFF);
    display: flex;
    flex-direction: column;
    gap: 0.62rem;
    padding: 1.25rem;
}

.bw-calculator__input-cols-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.625rem;
}

/*
 * A three-column row that has lost a cell closes over it. A two-way market has
 * no draw: the no-vig calculator hides that cell and the Asian handicap
 * calculator writes two bands instead of three, and either way the pair splits
 * the row rather than trailing an empty column.
 */
.bw-calculator__input-cols-3:has(> [hidden]),
.bw-calculator__input-cols-3:has(> :nth-child(2):last-child) {
    grid-template-columns: repeat(2, 1fr);
}

.bw-calculator__input-cols-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.625rem;
}

.bw-calculator__input-container>div>div {
    position: relative;
}

.bw-calculator__input-container label {
    display: inline-block;
    position: absolute;
    top: 0.625rem;
    left: 0.9375rem;
    font-size: 0.6875rem;
    line-height: 1rem;
    font-weight: 800;
    text-transform: uppercase;
    z-index: 1;
    color: var(--bwcalc-text-clr);
}

.bw-calculator__input-container input,
.bw-calculator__input-container select {
    width: 100%;
    border-radius: var(--bwcalc-radius, 5px);
    color: var(--bwcalc-text-clr);
    padding: 1.75rem 0.9375rem 0.75rem 0.9375rem;
    font-weight: 700;
    background-color: #F0F1F5;
    border: 1px solid transparent;
}

.bw-calculator__input-container input:focus,
.bw-calculator__input-container select:focus {
    border: 1px solid #4E525D;
    background: #FFF;
}

.bw-calculator__input-container select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    position: relative;
}

.bw-calculator__input-container select option {
    font-weight: 700;
    border-bottom: 1px solid rgba(78, 82, 93, 0.20);
    padding: 0.625rem 0.9375rem;
}

.bw-calculator__input-container select option:last-child {
    border-radius: 0 0 var(--bwcalc-radius, 5px) var(--bwcalc-radius, 5px);
}

.bw-calculator__input-container>div>div:has(> select)::after {
    content: "";
    display: inline-block;
    width: 24px;
    height: 24px;
    position: absolute;
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.97593 9.95407L11.6958 15.674C12.1305 16.1087 12.8741 16.1087 13.3088 15.674L19.0287 9.95407C20.0698 8.91305 18.4567 7.2886 17.4157 8.34106L11.6958 14.061L13.3088 14.061L7.58894 8.34106C6.54792 7.30004 4.92347 8.91305 5.97593 9.95407Z' fill='%23666666'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    top: 62.5%;
    transform: translateY(-50%);
    right: 1rem;
    pointer-events: none;
    transition: all 0.2s ease-in-out;
}

.bw-calculator__input-container>div>div:has(> select:focus)::after {
    transform: rotate(180deg);
    top: 42.5%;
}

.bw-calculator__field-currency {
    position: relative;
}

.bw-calculator__field-currency input {
    padding-left: calc(1rem + var(--bwcalc-currency-length, 1) * 0.62rem);
}

.bw-calculator__field-currency::after {
    content: var(--bwcalc-currency-symbol, "$");
    position: absolute;
    left: 1rem;
    top: 29px;
    color: var(--bwcalc-text-clr);
    pointer-events: none;
    font-weight: 700;
}

/**
 * Action styles
 */
.bw-calculator__action {
    display: flex;
    justify-content: center;
    padding: 0 1.25rem;
}

.bw-calculator__action button {
    border-radius: var(--bwcalc-radius, 5px);
    background: var(--bwcalc-submit-button-bg-clr, #05842A);
    text-transform: uppercase;
    color: var(--bwcalc-secondary-clr, #FFF);
    font-size: 1.125rem;
    font-weight: 800;
    width: 100%;
    max-width: 25rem;
    margin-bottom: 1.25rem;
    padding: 0.8rem 2.4375rem;
    border: 0;
}

.bw-calculator__action button:hover {
    background: var(--bwcalc-submit-button-bg-hover-clr, #096725);
}

.bw-calculator__action button:focus {
    background: var(--bwcalc-submit-button-bg-click-clr, #064719);
}

.bw-calculator__action button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/**
 * Row controls
 *
 * What a calculator with a growing list of rows needs: a row of controls over
 * the inputs - add a line, clear them - set apart from the submit button by
 * being drawn in the input band's own ground and outlined in the text colour,
 * and a remove button on the rows that can go. Written for the arbitrage,
 * parlay and dutching calculators, which each carried a copy; a calculator
 * that adds rows puts these classes on its markup rather than restyling them.
 */
.bw-calculator__controls {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.625rem;
}

/*
 * Each control takes an equal share of the row, up to the width one button is
 * given on its own, so a lone button centres and three sit abreast and wrap
 * when the row is too narrow to hold them.
 */
.bw-calculator__controls > * {
    max-width: 25rem;
    width: 100%;
}

/*
 * The submit button may sit among the controls. Its wrapper is built to stand
 * as a band of its own under the inputs, so in the row it gives up the padding
 * around it and the room under its button and keeps every other rule.
 */
.bw-calculator__controls > .bw-calculator__action {
    padding: 0;
}

.bw-calculator__controls > .bw-calculator__action button {
    margin-bottom: 0;
}

.bw-calculator__secondary-button {
    padding: 0.9375rem 1.5rem;
    border-radius: var(--bwcalc-radius, 5px);
    border: 2px solid var(--bwcalc-text-clr, #343A40);
    color: var(--bwcalc-text-clr, #343A40);
    background: var(--bwcalc-secondary-clr, #FFF);
    font-weight: 800;
    font-size: 1.125rem;
    line-height: 1.6875rem;
    min-height: 3.5rem;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* Under the pointer it takes the inputs' own ground, the colour the fields it
   acts on are filled with. */
.bw-calculator__secondary-button:not(:disabled):hover,
.bw-calculator__secondary-button:not(:disabled):focus {
    background: #F0F1F5;
}

.bw-calculator__secondary-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* The cell that holds a remove button makes room for it on the right, and only
   while the button is shown. */
.bw-calculator__input-container div:has(> .bw-calculator__remove-button:not([hidden])) {
    padding-right: 2.125rem;
}

.bw-calculator__remove-button {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    padding: 0;
    width: 1.5rem;
    height: 1.5rem;
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M13.4873 0.0078125C14.385 0.0889966 15.1275 0.766968 15.2783 1.6709L15.667 4H19.1738L19.1719 4.01562C19.6422 4.09717 20 4.50637 20 5C20 5.55 19.556 5.99534 19.0068 5.99902L17.9932 18.166C17.9068 19.2026 17.0402 20 16 20H4C3.02481 20 2.20239 19.2992 2.03223 18.3574L2.00684 18.166L0.992188 5.99902C0.443503 5.99482 0 5.54968 0 5C0 4.50671 0.357305 4.09756 0.827148 4.01562L0.826172 4H4.33301L4.72168 1.6709C4.87249 0.766968 5.61497 0.0889968 6.5127 0.0078125L6.69434 0H13.3057L13.4873 0.0078125ZM4 18H16L17 6H3L4 18ZM7 8C7.55228 8 8 8.44771 8 9V15C8 15.5523 7.55228 16 7 16C6.44772 16 6 15.5523 6 15V9C6 8.44771 6.44772 8 7 8ZM13 8C13.5523 8 14 8.44771 14 9V15C14 15.5523 13.5523 16 13 16C12.4477 16 12 15.5523 12 15V9C12 8.44771 12.4477 8 13 8ZM6.36133 4H13.6387L13.3057 2H6.69434L6.36133 4Z' fill='%234E525D'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    border: none;
}

.bw-calculator__remove-button:hover,
.bw-calculator__remove-button:focus {
    background-color: transparent;
}

/**
 * Result styles
 */
.bw-calculator__result {
    display: none;
    background: var(--bwcalc-main-clr, #4E525D);
    color: var(--bwcalc-secondary-clr, #FFF);
    padding: 1.25rem;
    border-radius: 0 0 var(--bwcalc-radius, 5px) var(--bwcalc-radius, 5px);
}

/*
 * Every caption in a result panel: the label above a figure. Block rather than
 * inline-block because a caption always has a result box under it and so always
 * owns its line anyway - and as an inline-level box it was sized by the line
 * box's strut, which comes from the panel's own line height rather than the
 * caption's, and left a few pixels of dead space under every label.
 */
.bw-calculator__result span {
    display: block;
    text-transform: uppercase;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1rem;
    margin-bottom: 0.315rem;
    color: var(--bwcalc-secondary-clr, #FFF);
}

.bw-calculator__result--box {
    display: flex;
    justify-content: center;
    border-radius: var(--bwcalc-radius, 5px);
    border: 2px solid var(--bwcalc-secondary-clr, #FFF);
    background: rgba(255, 255, 255, 0.10);
    padding: 0.625rem;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 2.125rem;
}

.bw-calculator__result--box::before {
    content: var(--bwcalc-currency-symbol, "$");
}

.bw-calculator__result--box.percentage::after {
    content: "%";
}

.bw-calculator__result--box.percentage::before {
    content: "";
}

.bw-calculator__result--box.clean::before {
    content: "";
}

.bw-calculator .bw-calculator__result .bw-calculator__result--box.gain {
    border-color: #28a745;
    background: rgba(40, 167, 69, 0.25);
}

.bw-calculator .bw-calculator__result .bw-calculator__result--box.loss {
    border-color: #dc3545;
    background: rgba(220, 53, 69, 0.25);
}

/**
 * Stacked rows
 *
 * Whatever follows a row of figures in the panel - another row, a block's own
 * grid of outcomes - takes the room the headline leaves under itself, so the
 * rows read the same however a block builds them. A lone figure that leads the
 * panel is marked as a one-column row so it counts as one; nothing else is
 * spaced, so a block that stacks something other than rows is left alone.
 */
.bw-calculator__result > [class*="bw-calculator__input-cols-"] + div {
    margin-top: 0.9375rem;
}

/**
 * Headline figure
 *
 * The one figure the punter came for, where a calculator has one. It leads the
 * result panel, so it is given the room the paired boxes below it share between
 * them.
 */
.bw-calculator__headline {
    margin-bottom: 0.9375rem;
}

/* .bw-calculator__headline .bw-calculator__result--box {
    font-size: 2rem;
    line-height: 2.75rem;
} */

/**
 * Reading meter
 *
 * A position on a scale rather than a filled bar, for a result that is a reading
 * between two extremes and not a quantity: the marker sits under the track at
 * the reading's place along it, and the scale names the bands it runs through.
 *
 * The track is left plain here because what its colours mean belongs to the
 * calculator doing the reading, and which end is the good one differs between
 * them. A block paints its own background onto the track.
 */
.bw-calculator__meter {
    margin-top: 1.25rem;
}

/**
 * Component caption
 *
 * The label above a meter or a set of steps. Inside the result panel
 * .bw-calculator__result span would set this, but both components are also
 * placed in the summary band - which is where a calculator puts them to keep
 * them off the panel's ground, since a theme is free to give that ground a
 * colour of its own. That rule does not reach them there, so they carry the
 * setting themselves and read the same in either band.
 *
 * The colour is inherited rather than named, so the caption takes whichever
 * band it sits in: the panel's ink in the result, the body colour in the
 * summary. The block is named alongside so this outweighs the panel's own rule
 * where the two do meet, here and in whatever a theme restates it as.
 */
.bw-calculator .bw-calculator__meter > span,
.bw-calculator .bw-calculator__steps > span {
    display: block;
    margin-bottom: 0.315rem;
    color: inherit;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1rem;
    letter-spacing: normal;
    text-transform: uppercase;
}

/*
 * Room is left below the track for the marker, which sits under it.
 *
 * The track is a size container so the marker can measure its position along
 * it in cqw units and hold itself inside the ends; see the marker below.
 */
.bw-calculator__meter-track {
    position: relative;
    container-type: inline-size;
    height: 0.5rem;
    margin-bottom: 1.75rem;
    border-radius: var(--bwcalc-radius, 5px);
    background: linear-gradient(90deg,
			#dc3545 0%,
			#dc3545 65%,
			#ffc107 65%,
			#ffc107 70%,
			#20c997 70%,
			#20c997 75%,
			#28a745 75%,
			#28a745 100%);
}

/*
 * The block writes its reading into --bwcalc-marker-x as a percentage along
 * the track - a bare number, 0 to 100 - and the label centres on that point.
 *
 * Centred on either end, half the label hangs off the track, and the container
 * clips what it overflows: a marker reading -100.00% at the foot of the track
 * lost its minus sign and read as a gain. So the label is held inside the
 * track. It slides along with its reading while there is room to centre on it
 * and stops flush with the end when there is not, and the pointer under it
 * keeps to the reading itself, so the label still says where on the track it
 * belongs.
 *
 * The shift is worked in the track's container query units, which is what
 * lets a stylesheet set a position along the parent (cqw) against the label's
 * own width (the percentages in a transform). Where those units are not
 * understood the marker falls back to centring on the reading as before.
 */
.bw-calculator__meter-marker {
    position: absolute;
    top: 100%;
    left: calc(var(--bwcalc-marker-x, 0) * 1%);
    transform: translateX(-50%);
    margin-top: 0.375rem;
    padding: 0.125rem 0.375rem;
    border-radius: var(--bwcalc-radius, 5px);
    font-size: 0.6875rem;
    font-weight: 800;
    line-height: 1rem;
    white-space: nowrap;
    transition: left 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.bw-calculator__meter-marker:empty {
    display: none;
}

/* The pointer that ties the label back to its place on the track, in the
   label's own colour so it follows whatever a theme makes of the text. */
.bw-calculator__meter-marker::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 0.25rem solid transparent;
    border-bottom-color: currentColor;
}

@supports (width: 1cqw) {
    /*
     * The distance the label is moved from the track's left end: its reading
     * less half its own width, so it is centred on the reading, held between
     * nought and the room the track has left of its width. A percentage here
     * is of the marker's own box whether it is read in the transform below or
     * in the pointer's left, since the marker is the pointer's containing
     * block, so the one figure serves both.
     */
    .bw-calculator__meter-marker {
        --bwcalc-marker-shift: clamp(0cqw, calc(var(--bwcalc-marker-x, 0) * 1cqw - 50%), calc(100cqw - 100%));
        left: 0;
        transform: translateX(var(--bwcalc-marker-shift));
    }

    /* The pointer stays on the reading: its place along the track, less
       however far the label was moved to get there. */
    .bw-calculator__meter-marker::before {
        left: calc(var(--bwcalc-marker-x, 0) * 1cqw - var(--bwcalc-marker-shift));
    }
}

.bw-calculator__meter-scale {
    display: flex;
    justify-content: space-between;
    gap: 0.625rem;
}

.bw-calculator__meter-scale small {
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1.45em;
    text-transform: uppercase;
    opacity: 0.8;
}

/*
 * The outer labels mark the ends of the track, so they align to them; the ones
 * between keep their own centres.
 */
/* Direct children only, so the ranges inside a band are not pulled to the
   edges along with the labels that mark the ends of the track. */
.bw-calculator__meter-scale > small:first-child {
    text-align: left;
}

.bw-calculator__meter-scale > small:last-child {
    text-align: right;
}

/*
 * A band on the scale named over its range. The name is the panel's own caption
 * span, so a theme that recolours the captions recolours these with them; the
 * range under it is a figure and keeps its own case. Both lines centre on the
 * band, which is what a legend of them wants rather than the edge alignment the
 * track's own end labels take.
 */
/*
 * A scale made of bands is a grid of equal columns, one per band, so the
 * component is never told how many there are: two bands halve the row, four
 * quarter it.
 *
 * minmax(0, 1fr) rather than a bare 1fr, since a bare fr will not let a column
 * shrink below its content and the longest band name would then take room from
 * the shorter ones - the columns would come out unequal exactly when the row is
 * tightest. A scale of plain labels keeps the flex row above, where they mark
 * the ends of the track rather than dividing it.
 */
.bw-calculator__meter-scale:has(.bw-calculator__meter-band) {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
}

/* min-width lets a long name wrap inside its column rather than widening it. */
.bw-calculator__meter-band {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.bw-calculator__meter-band:nth-child(1) {
	--bwcalc-band-clr: #dc3545;
}

.bw-calculator__meter-band:nth-child(2) {
	--bwcalc-band-clr: #ffc107;
}

.bw-calculator__meter-band:nth-child(3) {
	--bwcalc-band-clr: #20c997;
}

.bw-calculator__meter-band:nth-child(4) {
	--bwcalc-band-clr: #28a745;
}

/*
 * The swatch that ties a band's name back to its stretch of the track.
 *
 * The dot is the component's; what colour a band means belongs to the
 * calculator reading the scale, so it is taken from a variable the block sets
 * per band and falls back to the text colour. A calculator whose meter has no
 * colours to tie back to turns the dot off with content: none.
 */
.bw-calculator__meter-band span::before {
    content: "";
    flex-shrink: 0;
    margin-top: -1px;
    width: 0.5rem;
    height: 0.5rem;
    margin-right: 0.25rem;
    border-radius: 50%;
    background: var(--bwcalc-band-clr, currentColor);
}

/* Named through the scale for the same reason the steps below are named through
   their block: .bw-calculator__result span outweighs a lone class, here and
   again in whatever a theme restates it as. */

.bw-calculator__meter-scale .bw-calculator__meter-band span {
    display: flex;
    align-items: center;
    margin-bottom: 0;
    color: inherit;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: normal;
    text-transform: uppercase;
}

.bw-calculator__meter-scale .bw-calculator__meter-band small {
    display: block;
    text-transform: none;
    font-weight: 600;
    line-height: 1.4;
}

/**
 * Steps
 *
 */
.bw-calculator__steps {
    margin-top: 1.25rem;
}

.bw-calculator__steps-list {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bw-calculator__step {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
}

.bw-calculator__steps .bw-calculator__step-number {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 18px;
    height: 18px;
    margin-bottom: 0;
    border: 1px solid currentColor;
    border-radius: 50%;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: normal;
    margin-top: 1px;
}

/* A step is a sentence, so it gives the capitals and the caption size back. */
.bw-calculator__steps .bw-calculator__step-text {
    flex: 1 1 auto;
    min-width: 0;
    margin-bottom: 0;
    color: inherit;
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.25rem;
    letter-spacing: normal;
    text-transform: none;
}

/*
 * The steps are written by the script and cleared with the figures, so a step
 * with nothing in it drops out, and with none of them written the block does
 * too rather than standing as a caption over empty rows. Keyed on the text
 * rather than on the data attribute a calculator happens to fill it by.
 */
.bw-calculator__step:has(.bw-calculator__step-text:empty) {
    display: none;
}

.bw-calculator__steps:not(:has(.bw-calculator__step-text:not(:empty))) {
    display: none;
}

/*
 * A closing line under the steps - a tip, a caveat.
 *
 * It is deliberately left to pick up the setting .bw-calculator__result span
 * lends every span inside the panel, so it reads in the same voice as the
 * caption above the steps rather than as one of them. All it takes back is that
 * caption's margin, which belongs under a label and not under a paragraph, and
 * the inline-block, so its own top margin holds.
 *
 * A calculator writes this only when it applies, so an empty one leaves the
 * flow rather than holding a line's worth of height and that margin.
 *
 * The block is named alongside the class for the same reason the steps above
 * are: a lone class loses to .bw-calculator__result span, which counts a class
 * and an element, and a theme restating that rule for its own palette lands
 * later still. Two classes outweigh both.
 */
.bw-calculator__steps .bw-calculator__steps-note {
    display: block;
    margin-top: 0.5rem;
    margin-bottom: 0;
    color: inherit;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1rem;
    letter-spacing: normal;
    text-transform: uppercase;
}

.bw-calculator__steps .bw-calculator__steps-note:empty {
    display: none;
}

/**
 * Editorial text and messages
 *
 * Written for the bonus calculator and kept here because the names are shared
 * ones: any calculator marking up a description, a notice or a disclaimer picks
 * these up rather than restyling them. A calculator that needs different
 * treatment overrides from its own stylesheet.
 */
.bw-calculator__description {
    margin-top: 8px;
    color: var(--bwcalc-secondary-clr, #fff);
    font-size: 14px;
    line-height: 1.5;
}

.bw-calculator__description > *:first-child {
    margin-top: 0;
}

.bw-calculator__description > *:last-child {
    margin-bottom: 0;
}

.bw-calculator .bw-calculator__header a,
.bw-calculator .bw-calculator__notice a {
    color: inherit;
    text-decoration: underline;
}

.bw-calculator .bw-calculator__header a:hover,
.bw-calculator .bw-calculator__header a:focus,
.bw-calculator .bw-calculator__notice a:hover,
.bw-calculator .bw-calculator__notice a:focus {
    color: inherit;
    opacity: 0.8;
}

/* Standing regulatory notice, for the markets that carry one. */
.bw-calculator__notice {
    margin: 0;
    padding: 9px 12px;
    border-radius: var(--bwcalc-radius, 5px);
    background: var(--bwcalc-main-clr, #4E525D);
    color: var(--bwcalc-secondary-clr, #fff);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
}

/*
 * Filled in only when an entry was corrected. Colours are the ones from
 * .bw-calculator-alert-error above, so a correction reads as the same kind of
 * message the alert helper raises.
 */
.bw-calculator__warning {
    margin: 0;
    padding: 9px 12px;
    border-left: 4px solid #dc3545;
    border-radius: var(--bwcalc-radius, 5px);
    background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
    color: #721c24;
    font-size: 14px;
    line-height: 1.5;
}

.bw-calculator__warning:empty {
    display: none;
}

/* The preset select spans the full width above the paired inputs. */
.bw-calculator__presets > div {
    position: relative;
}

/* Context under a result box, e.g. "35x deposit + bonus". */
.bw-calculator__note {
    display: block;
    margin-top: 4px;
    opacity: 0.8;
    font-size: 12px;
    line-height: 1.4;
}

.bw-calculator__verdict {
    font-size: 12px;
    line-height: 1.4;
    opacity: 0.8;
}

.bw-calculator__verdict:empty {
    display: none;
}

.bw-calculator__disclaimer {
    position: relative;
    margin-top: 10px;
    padding-left: 26px;
    color: var(--bwcalc-secondary-clr, #fff);
    font-size: 14px;
    line-height: 1.5;
}

.bw-calculator__disclaimer::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    width: 18px;
    height: 18px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M9 16.5C13.1421 16.5 16.5 13.1421 16.5 9C16.5 4.85786 13.1421 1.5 9 1.5C4.85786 1.5 1.5 4.85786 1.5 9C1.5 13.1421 4.85786 16.5 9 16.5Z' stroke='white' stroke-miterlimit='10'/%3E %3Cpath d='M9.00787 6.07358C8.73228 6.07358 8.49606 5.98161 8.29921 5.80602C8.10236 5.62207 8 5.37124 8 5.03679C8 4.73579 8.10236 4.49331 8.30709 4.29264C8.51181 4.10033 8.74016 4 9.00787 4C9.27559 4 9.49606 4.09197 9.69291 4.26756C9.88976 4.44314 9.99213 4.70234 9.99213 5.03679C9.99213 5.37124 9.89764 5.61371 9.70079 5.79766C9.50394 5.98161 9.27559 6.07358 9.00787 6.07358ZM10 8.26421V11.7124C10 12.1388 9.90551 12.4565 9.71654 12.6739C9.52756 12.8913 9.28346 13 8.99213 13C8.70079 13 8.46457 12.8913 8.28346 12.6656C8.10236 12.4398 8.00787 12.1221 8.00787 11.7124V8.32274C8.00787 7.90468 8.10236 7.58696 8.28346 7.37793C8.46457 7.1689 8.70079 7.0602 8.99213 7.0602C9.28346 7.0602 9.52756 7.1689 9.71654 7.37793C9.90551 7.58696 10 7.88796 10 8.26421Z' fill='white'/%3E %3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M9 16.5C13.1421 16.5 16.5 13.1421 16.5 9C16.5 4.85786 13.1421 1.5 9 1.5C4.85786 1.5 1.5 4.85786 1.5 9C1.5 13.1421 4.85786 16.5 9 16.5Z' stroke='white' stroke-miterlimit='10'/%3E %3Cpath d='M9.00787 6.07358C8.73228 6.07358 8.49606 5.98161 8.29921 5.80602C8.10236 5.62207 8 5.37124 8 5.03679C8 4.73579 8.10236 4.49331 8.30709 4.29264C8.51181 4.10033 8.74016 4 9.00787 4C9.27559 4 9.49606 4.09197 9.69291 4.26756C9.88976 4.44314 9.99213 4.70234 9.99213 5.03679C9.99213 5.37124 9.89764 5.61371 9.70079 5.79766C9.50394 5.98161 9.27559 6.07358 9.00787 6.07358ZM10 8.26421V11.7124C10 12.1388 9.90551 12.4565 9.71654 12.6739C9.52756 12.8913 9.28346 13 8.99213 13C8.70079 13 8.46457 12.8913 8.28346 12.6656C8.10236 12.4398 8.00787 12.1221 8.00787 11.7124V8.32274C8.00787 7.90468 8.10236 7.58696 8.28346 7.37793C8.46457 7.1689 8.70079 7.0602 8.99213 7.0602C9.28346 7.0602 9.52756 7.1689 9.71654 7.37793C9.90551 7.58696 10 7.88796 10 8.26421Z' fill='white'/%3E %3C/svg%3E") no-repeat center / contain;
}

.bw-calculator__disclaimer > *:first-child {
    margin-top: 0;
}

.bw-calculator__disclaimer > *:last-child {
    margin-bottom: 0;
}

/*
 * Summary panel
 *
 * Standing text that sits below the figures rather than among them - the
 * disclaimer, and on the accumulator the description as well. The verdict
 * stays up in the result panel, since it is a reading of the numbers and not
 * commentary alongside them. The band inverts the panel above it: the
 * secondary colour becomes the ground and the body text colour is read on it.
 *
 * Every calculator renders this server-side and only when there is something
 * to put in it, so it never stands as a bare stripe of padding.
 */
.bw-calculator__summary {
    padding: 1.25rem;
    background: var(--bwcalc-secondary-clr, #FFF);
    color: var(--bwcalc-text-clr, #343A40);
}

/* The band now closes the container, so the panel above squares off. */
.bw-calculator__result:has(+ .bw-calculator__summary) {
    border-radius: 0;
}

.bw-calculator__summary .bw-calculator__description,
.bw-calculator__summary .bw-calculator__disclaimer {
    color: inherit;
}

.bw-calculator__summary > *:first-child {
    margin-top: 0;
}

.bw-calculator__summary > *:last-child {
    margin-bottom: 0;
}

/**
 * Media Queries
 */
@media screen and (max-width: 899px) {
    .bw-calculator__input-cols-3 {
        grid-template-columns: repeat(2, 1fr);
    }

    /*
     * Two columns leave the last cell of an odd count alone on the left, so it
     * takes the whole row. An even count already pairs off, and a row with a
     * hidden cell has closed to the pair around it, so neither is stretched.
     */
    .bw-calculator__input-cols-3:not(:has(> [hidden])) > div:last-child:nth-child(odd) {
        grid-column: span 2;
    }
}

@media screen and (max-width: 499px) {
    .bw-calculator__headline .bw-calculator__result--box {
        font-size: 1.5rem;
        line-height: 2.125rem;
    }

    .bw-calculator__meter-scale:has(.bw-calculator__meter-band) {
        grid-auto-flow: row;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.625rem 0.315rem;
    }

    .bw-calculator__meter-scale .bw-calculator__meter-band span {
        font-size: 10px;
    }

    .bw-calculator__meter-scale .bw-calculator__meter-band small {
        font-size: 0.58rem;
    }

    .bw-calculator__meter-scale small {
        line-height: 0.875rem;
    }

    .bw-calculator__input-cols-3 {
        grid-template-columns: repeat(1, 1fr);
    }

    /*
     * The span the 899px rule gives an odd last cell has to be taken back
     * here, or a one-column grid grows an implicit second column for it and
     * the cells above pair off again. Written with the same selector so it
     * outranks that rule by coming later, rather than losing to it.
     */
    .bw-calculator__input-cols-3:not(:has(> [hidden])) > div:last-child:nth-child(odd) {
        grid-column: auto;
    }

    .bw-calculator__input-cols-2 {
        grid-template-columns: repeat(1, 1fr);
    }
}

@media screen and (max-width: 380px) {
    .bw-calculator__secondary-button {
        padding: 0.9375rem 1rem;
    }

    .bw-calculator__input-container div:has(> .bw-calculator__remove-button:not([hidden])) {
        padding-right: 1.8625rem;
    }

    .bw-calculator__remove-button {
        width: 1.25rem;
        height: 1.25rem;
    }
}