:root {
    --mud-palette-primary: var(--ewf-palette-primary) !important;
    --mud-palette-primary-darken: var(--ewf-palette-primary-darken) !important;
    --mud-palette-secondary: var(--ewf-palette-secondary) !important;
    --mud-palette-secondary-darken: var(--ewf-palette-secondary-darken) !important;
    --mud-palette-tertiary: var(--ewf-palette-tertiary) !important;
    --mud-palette-tertiary-darken: var(--ewf-palette-tertiary-darken) !important;
    --mud-palette-success: var(--ewf-palette-success) !important;
    --mud-palette-error: var(--ewf-palette-error) !important;
    --bs-primary-color: var(--ewf-palette-primary) !important;
    --bs-secondary-color: var(--ewf-palette-secondary) !important;
}

body {
    background: var(--ewf-palette-background);
    color: var(--ewf-body-color);
    font-size: var(--ewf-body-size);
}

/* Body copy uses Open Sans everywhere except headings. */
html, body *:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
    font-family: var(--ewf-font-family) !important;
}

/* Headings use Roboto Slab (barnardos.ie). Colour is left overridable so MudText
   Color="Color.Primary" can still render the green accent where a component wants it. */
h1, h2, h3, h4, h5, h6,
.mud-typography-h1, .mud-typography-h2, .mud-typography-h3,
.mud-typography-h4, .mud-typography-h5, .mud-typography-h6 {
    font-family: var(--ewf-heading-font-family) !important;
    font-weight: var(--ewf-heading-weight) !important;
    line-height: var(--ewf-heading-line-height);
    color: var(--ewf-heading-color);
}

/* Heading type scale — applied to both raw tags and MudBlazor typography classes. */
h1, .mud-typography-h1 { font-size: var(--ewf-h1-size) !important; }
h2, .mud-typography-h2 { font-size: var(--ewf-h2-size) !important; }
h3, .mud-typography-h3 { font-size: var(--ewf-h3-size) !important; }
h4, .mud-typography-h4 { font-size: var(--ewf-h4-size) !important; }
h5, .mud-typography-h5 { font-size: var(--ewf-h5-size) !important; }
h6, .mud-typography-h6 { font-size: var(--ewf-h6-size) !important; }

a, .btn-link {
    color: var(--ewf-link-color);
}

.btn-primary {
    color: var(--ewf-button-color);
    background-color: var(--ewf-button-bg-color);
    border-color: var(--ewf-button-border-color);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid var(--ewf-palette-error);
}

.validation-message {
    color: var(--ewf-palette-error);
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--ewf-palette-secondary);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

.hero-container {
    background-color: var(--ewf-palette-tertiary);
}
    .hero-container p,
    .hero-container h1,
    .hero-container h2,
    .hero-container h3,
    .hero-container h4,
    .hero-container h5,
    .hero-container h6,
    .hero-container span {
        color: var(--mud-palette-text-primary);
    }

.header-root {
    height: 186px;
}

.header-container {
    width: 100%;
    max-width: 1293px;
    min-height: 236px;
}

.logo {
    width: 284px;
}

.container {
    margin-left: auto;
    margin-right: auto;
}

/* Business-editable story panel (raw HTML from the Web Page Settings service, #69607).
   The left MudPaper is display:flex, so the injected markup would otherwise become flex-row
   items and a wide <img> would push the pane past its 50% width. This wrapper gives the markup
   a normal block layout, and min-width:0 lets the flex item shrink instead of overflowing. */
.ewf-story-panel {
    width: 100%;
    min-width: 0;
}

    .ewf-story-panel img {
        max-width: 100%;
        height: auto;
    }

/* The right form panel is a flex item of an outer `d-flex` row, and it centres its child
   MudContainer with `d-flex justify-center`. Flex items default to `min-width:auto`, so a long
   unbreakable value — e.g. a long "Reason for donating" option — makes the whole flex chain
   grow past the viewport, producing horizontal scroll on mobile (the device zooms out). Setting
   min-width:0 lets the panel shrink so the inner element's own `overflow:hidden` clips the text
   instead of widening the page. The container then fills the available width (flex-grow) rather
   than shrink-wrapping to its content, which otherwise left the content cramped in a narrow
   column on small screens. */
.ewf-form-panel {
    min-width: 0;
}

.ewf-form-container {
    flex-grow: 1;
    min-width: 0;
}

/* Donation amounts: a fixed three-column grid so the layout is identical no matter how wide the
   amount labels are. The previous flex-wrap ("€ 250.00" is wider than "€ 21.00") made the Single
   and Monthly amount sets wrap differently on narrow screens. minmax(0,1fr) lets the columns
   shrink equally; trimming the button padding keeps the longest label on one line on small
   phones. Applies at all widths so mobile and desktop stack consistently. The `!important`s beat
   the MudStack flex utility classes (gap-5, flex-grow-all) still emitted on the same element. */
.ewf-amount-group {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
}

    .ewf-amount-group .mud-button-root {
        min-width: 0;
    }

@media (max-width: 600px) {
    .ewf-amount-group {
        gap: 8px !important;
    }

        .ewf-amount-group .mud-button-root {
            padding-left: 6px;
            padding-right: 6px;
        }
}

/* Stepper nav dots: numbered circles (1,2,3,4) a little larger than MudBlazor's 24px default.
   A custom LabelTemplate replaces MudBlazor's own .mud-step-label-icon circle, so we draw the
   circle ourselves here. Active/completed steps are filled with the brand colour; upcoming
   steps use the same light tone as the inactive connector line. */
.ewf-step-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    background-color: #d4ddeb;
    color: #2C3345;
}

.ewf-step-num--on {
    background-color: var(--mud-palette-primary);
    color: #fff;
}

/* MudBlazor positions the nav connector line with a fixed top offset tuned to its default 24px
   dot, so our larger 34px dots leave the line crossing above centre. Force the connector to
   vertically centre on the (symmetrically padded) dot instead, so the line runs through the middle. */
.mud-stepper-nav-connector {
    align-self: center !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* On small screens the stepper and container gutters stack up to ~90px of horizontal padding,
   squeezing the content (e.g. the three amount buttons couldn't fit "€ 250.00" side by side).
   Trim them back on mobile so the form uses the width the device actually has. Only this donation
   form uses these MudBlazor containers, so the reduction is safe to scope by width alone. */
@media (max-width: 600px) {
    .mud-container--gutters {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .mud-stepper-content {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
}

/* The "Keep in touch" privacy notice is business-editable markup from the Web Page Settings
   service, and the stored content wraps each paragraph in `pa-4` (16px). On mobile that stacks on
   top of the panel padding and leaves the text heavily indented. Trim the paragraph padding on
   small screens; `!important` beats the utility class baked into the stored markup. */
@media (max-width: 600px) {
    .ewf-privacy-notice p {
        padding: 8px !important;
    }
}

/* Summary step: the summary sits in a fixed, narrow form column (a hero panel takes the rest of the
   page width), so a label beside its value never leaves enough room for a normal email address —
   forcing an ugly mid-word wrap. Instead each field stacks: a small muted label on its own line
   above the value, so the value gets the FULL column width and reads on one line. `overflow-wrap`
   stays as a safety net for a genuinely over-long value (e.g. a very long address line). The card
   content padding is trimmed a touch to give the value that bit more room. */
.ewf-summary .mud-card-content {
    padding-left: 12px;
    padding-right: 12px;
}

/* One label+value pair. Tight gap between a label and its own value; a larger gap to the next pair
   so the grouping reads clearly. */
.ewf-summary-field {
    margin-bottom: 12px;
}

    .ewf-summary-field:last-child {
        margin-bottom: 0;
    }

/* Quiet, smaller label above its value. */
.ewf-summary-label {
    display: block;
    color: var(--mud-palette-text-secondary);
    line-height: 1.3;
}

/* The value reads at normal body size and breaks only if it truly cannot fit (safety net). */
.ewf-summary-value {
    overflow-wrap: anywhere;
}

/* Mandatory privacy-statement consent block on the Summary step. Rendered as a light-green brand
   panel with a green left accent so the required tick-box stands out from the white summary cards
   above it. */
.ewf-privacy-statement {
    background-color: var(--ewf-palette-primary-light);
    border: 1px solid var(--mud-palette-primary);
    border-left-width: 5px;
    border-radius: 8px;
}

/* MudCheckBox carries ~9px of internal ripple padding around the glyph. Left-align the box with
   the panel's own padding by pulling that padding back, and drop the MudBlazor form-control
   bottom margin so the row centres cleanly against a single-line label. */
.ewf-privacy-statement__check.mud-input-control {
    margin-bottom: 0;
}

    .ewf-privacy-statement__check .mud-checkbox {
        margin-left: -9px;
        margin-right: 0;
    }

/* WebSettingPanel wraps the (sanitised) label; strip the default paragraph margins so the text
   sits vertically centred beside the checkbox rather than pushed down by a leading margin. */
.ewf-privacy-statement-label,
.ewf-privacy-statement-label p {
    margin: 0;
}