/* CarpetMart brand colors, extracted directly from shop.carpetmart.com's theme CSS
   (real values, not guessed) - kept as named custom properties so every future page
   references these, not a hardcoded hex scattered across files. */
:root {
    --brand-primary: #389545;      /* turfGreen */
    --brand-primary-hover: #2f7d3a;
    --brand-primary-active: #266531;
    --brand-accent: #EEC200;       /* vanGoghYellow */
    --brand-text: #787878;         /* sureGripGrey */
    --brand-bg-light: #F2F7EB;     /* mintMosaic */
}

/* Bootstrap 5.3 scopes each button variant's colors to its own --bs-btn-* custom
   properties (baked in at Bootstrap's build time), not to a single global --bs-primary
   read at render time - so the override has to target .btn-primary directly.

   It also has to set background-color/border-color/color directly, not just the
   --bs-btn-* variables: app.css (the default Blazor template file) sets .btn-primary's
   background-color/border-color as plain hardcoded values, which beats Bootstrap's
   variable-driven declaration since it loads later - and since it's a direct value,
   not the variable, overriding only the variable never reaches it. Hover/active aren't
   hardcoded in app.css, so those two states pick up the variable override correctly. */
.btn-primary {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
    color: #fff;

    --bs-btn-bg: var(--brand-primary);
    --bs-btn-border-color: var(--brand-primary);
    --bs-btn-hover-bg: var(--brand-primary-hover);
    --bs-btn-hover-border-color: var(--brand-primary-hover);
    --bs-btn-active-bg: var(--brand-primary-active);
    --bs-btn-active-border-color: var(--brand-primary-active);
    --bs-btn-disabled-bg: var(--brand-primary);
    --bs-btn-disabled-border-color: var(--brand-primary);
}

/* Match the form focus ring to the brand color instead of Bootstrap's default blue. */
.form-control:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 0.25rem rgba(56, 149, 69, 0.25);
}

/* Top of every wizard page (WizardHeader.razor): logo left, website link right, centered beside
   it (Sarah, 2026-10-06 - with the step text gone it looked stranded in the corner). The
   bubble tracker follows underneath. Lined up with the 480px form column below it. The logo is
   deliberately not hidden in print - it is part of what makes the printout look like a real
   document. */
.wizard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    max-width: 480px;
    margin: 0 auto;
    /* 0.75rem underneath: the tracker below brings its own space before the page's heading. */
    padding: 1rem 0.75rem 0.75rem;
}

.wizard-header-logo {
    width: 58%;
    max-width: 260px;
    height: auto;
}

.wizard-header-side {
    text-align: right;
    font-size: 0.875rem;
}

/* Keep the globe icon and the address together - never break the link across two lines. */
.wizard-header-side a {
    white-space: nowrap;
}

/* The bubble tracker under the header (WizardTracker.razor, D7). Same 480px column and side
   padding as the form below it. Done = brand green tick, current = white with a green border, not yet = grey. */
.wizard-tracker-wrap {
    max-width: 480px;
    margin: 0 auto 1rem;
    padding: 0 0.75rem;
}

.wizard-tracker {
    background: #f1f3f5;
    border-radius: 0.75rem;
    padding: 0.6rem 0.5rem 0.5rem;
}

.tracker-row {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* The room row sits under the four steps, with a thin line between. */
.tracker-row-rooms {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid #dee2e6;
}

/* Each bubble takes an equal share of the width; min-width: 0 lets long labels shrink. */
.tracker-step {
    flex: 1 1 0;
    position: relative;
    min-width: 0;
    text-align: center;
}

/* The line joining a bubble to the one before it: from the previous bubble's centre to this
   one's, drawn behind the bubbles. Green once the bubble before it is done. */
.tracker-step + .tracker-step::before {
    content: "";
    position: absolute;
    top: 0.875rem;
    right: 50%;
    width: 100%;
    height: 2px;
    background: #ced4da;
}

.tracker-step.done + .tracker-step::before {
    background: var(--brand-primary);
}

.tracker-link {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: inherit;
    text-decoration: none;
}

.tracker-dot {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 600;
    background: #fff;
    border: 2px solid #ced4da;
    color: #868e96;
}

.tracker-label {
    max-width: 100%;
    margin-top: 0.15rem;
    font-size: 0.7rem;
    color: #6c757d;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tracker-step.done .tracker-dot {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: #fff;
}

/* The page you're on: white with a brand-green border and number (Sarah, 2026-10-06 - blue didn't
   fit the theme), plus a soft green ring so it stands out from the grey "not yet" bubbles. */
.tracker-step.current .tracker-dot {
    background: #fff;
    border-color: var(--brand-primary);
    color: var(--brand-primary);
    box-shadow: 0 0 0 0.2rem rgba(56, 149, 69, 0.2);
}

.tracker-step.current .tracker-label {
    color: var(--brand-primary-active);
    font-weight: 600;
}

/* A tappable (finished) bubble shows a soft ring on hover or keyboard focus. */
a.tracker-link:hover .tracker-dot,
a.tracker-link:focus-visible .tracker-dot {
    box-shadow: 0 0 0 0.2rem rgba(56, 149, 69, 0.3);
}

/* Back / Next buttons at the bottom of each wizard page. Side by side on wider screens. */
.wizard-actions {
    display: flex;
    gap: 0.5rem;
}

/* Phones (under Bootstrap's 576px "sm" breakpoint): side by side there isn't room for the
   website link next to the logo, so stack them - the logo stretches to the full column width,
   and "Step N of 4" and the link share one line under it, lined up with the logo's two edges. */
@media (max-width: 575.98px) {
    .wizard-header {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
        /* The page's own top padding (.content, app.css) is already there - don't double it. */
        padding-top: 0.25rem;
    }

    .wizard-header-logo {
        width: 100%;
        max-width: none;
    }

    /* Buttons stack full width. column-reverse puts the LAST button in the markup (Next) on
       top, where the thumb reaches first, and Back underneath. */
    .wizard-actions {
        flex-direction: column-reverse;
    }

    /* On phones the link sits under the logo, centered (Sarah, 2026-10-06). */
    .wizard-header-side {
        text-align: center;
    }
}


/* Outlined buttons (Back, Edit estimate, the results-page links) stay quiet until you point at
   them, then turn brand green - hover, keyboard focus and press. Bootstrap's own outline-
   secondary turns grey; this swaps in the brand green through the same --bs-btn-* variables. */
.btn-outline-secondary {
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--brand-primary);
    --bs-btn-hover-border-color: var(--brand-primary);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--brand-primary-active);
    --bs-btn-active-border-color: var(--brand-primary-active);
    --bs-btn-focus-shadow-rgb: 56, 149, 69;
}

/* Radio buttons: the selected one fills brand green (Bootstrap's default is blue), and the
   focus ring matches the text boxes. */
.form-check-input:checked {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}

.form-check-input:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 0.25rem rgba(56, 149, 69, 0.25);
}

/* app.css (the default Blazor template file) draws a green outline around every input Blazor
   marks "valid modified" - which for a radio group means ALL the radios light up as soon as
   one is clicked. Turned off for radios; the red outline for invalid fields is untouched. */
.form-check-input.valid.modified {
    outline: none;
}