/*
 * MIRO Quote Engine — Public Stylesheet
 * Design system: Business Rules §3 | Quote Engine Canonical §6.4
 *
 * Colours (§3.1)
 *   Near-black  #0C0C0C
 *   White       #FFFFFF
 *   MIRO yellow #FFD200
 *   Cream       #F8F6F2
 *   Red                  — error states only
 *
 * Rules enforced here:
 *   - All classes namespaced under .miro-qe
 *   - Central CSS custom properties only — no scattered colour literals
 *   - Mobile-first responsive
 *   - prefers-reduced-motion respected
 *   - WCAG 2.2 AA focus states
 *   - No !important except documented compat fixes
 *   - No font-family injection — inherit theme
 */

/* ── Root tokens ─────────────────────────────────────────────────────────────
   Scoped to .miro-qe so tokens don't pollute global scope.
   ─────────────────────────────────────────────────────────────────────────── */

.miro-qe {
    /* Brand colours */
    --mq-black:         #0C0C0C;
    --mq-white:         #FFFFFF;
    --mq-yellow:        #FFD200;
    --mq-yellow-hover:  #E6BD00;
    --mq-cream:         #F8F6F2;
    --mq-cream-dark:    #EDEAE4;

    /* Derived tones */
    --mq-black-80:      #3A3A3A;
    --mq-black-60:      #5A5855;
    --mq-black-20:      #D8D6D2;
    --mq-border:        #D0CEC9;

    /* Status */
    --mq-error-bg:      #FFF0F0;
    --mq-error-border:  #C62828;
    --mq-error-text:    #B71C1C;
    /* Positive/success — palette has no green, so success = black + yellow (approved design) */
    --mq-success-bg:    #0C0C0C;
    --mq-success-border:#FFD200;
    --mq-success-text:  #FFD200;

    /* Structure */
    --mq-radius:        4px;
    --mq-radius-lg:     8px;
    --mq-max-form:      600px;
    --mq-shadow:        0 1px 4px rgba(0,0,0,0.10), 0 4px 16px rgba(0,0,0,0.06);
    --mq-shadow-card:   0 2px 8px rgba(0,0,0,0.12), 0 8px 24px rgba(0,0,0,0.06);

    box-sizing: border-box;
    font-family: inherit;
    color: var(--mq-black);
    line-height: 1.5;
}

.miro-qe *,
.miro-qe *::before,
.miro-qe *::after {
    box-sizing: inherit;
}

/* ── Theme override guard — documented compat fix (§6.4) ─────────────────────
   ID selector (#miro-qe-app) has specificity (1,0,1) which beats any
   class-based Elementor rule regardless of !important stacking order.
   The hero calc uses inline styles (unbeatable). Quote wizard uses #miro-qe-app.
   ─────────────────────────────────────────────────────────────────────────── */
#miro-qe-app h1,
#miro-qe-app h2,
#miro-qe-app h3,
#miro-qe-app h4,
#miro-qe-app h5,
#miro-qe-app h6 {
    color: #0C0C0C !important;
    font-family: inherit !important;
    text-transform: none !important;
}

#miro-qe-app label {
    color: #0C0C0C !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

#miro-qe-app p,
#miro-qe-app span:not(.miro-qe-service-card__icon) {
    color: inherit;
}

#miro-qe-app .miro-qe-hint,
#miro-qe-app .miro-qe-optional {
    color: #5A5855 !important;
}

#miro-qe-app .miro-qe-review-table td {
    color: #0C0C0C !important;
}

#miro-qe-app .miro-qe-review-table td:first-child {
    color: #5A5855 !important;
}


/* ── Quote engine wrapper ─────────────────────────────────────────────────── */

.miro-qe-quote-engine {
    max-width: var(--mq-max-form);
    margin: 0 auto;
    background: var(--mq-white);
    border-radius: var(--mq-radius-lg);
    box-shadow: var(--mq-shadow-card);
    overflow: hidden;
}


/* ── Service selector ─────────────────────────────────────────────────────── */

.miro-qe-service-selector {
    padding: 2rem;
}

.miro-qe-section__title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--mq-black);
    margin: 0 0 1.25rem;
    letter-spacing: -0.01em;
}

.miro-qe-service-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.75rem;
}

.miro-qe-service-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 1.25rem 0.75rem;
    border: 2px solid var(--mq-border);
    border-radius: var(--mq-radius);
    background: var(--mq-white);
    cursor: pointer;
    text-align: center;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
    outline: none;
}

.miro-qe-service-card:hover,
.miro-qe-service-card:focus-visible {
    border-color: var(--mq-black);
    background: var(--mq-cream);
    box-shadow: 0 2px 8px rgba(0,0,0,0.10);
}

.miro-qe-service-card:focus-visible {
    outline: 3px solid var(--mq-yellow);
    outline-offset: 2px;
}

.miro-qe-service-card__icon  {
    font-size: 1.75rem;
    line-height: 1;
    margin-bottom: 0.1rem;
}
.miro-qe-service-card__label {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--mq-black);
    line-height: 1.2;
}
.miro-qe-service-card__desc  {
    font-size: 0.78rem;
    color: var(--mq-black-60);
    line-height: 1.3;
}

/* Theme <button> styling bleeds into these cards (renders them solid yellow with
   unreadable text). ID-scoped rules restore the intended white card. (§6.4 compat) */
#miro-qe-app .miro-qe-service-card {
    -webkit-appearance: none !important;
    appearance: none !important;
    background: #FFFFFF !important;
    border: 2px solid var(--mq-border, #D0CEC9) !important;
    color: #0C0C0C !important;
    box-shadow: none !important;
    width: 100% !important;
    font-family: inherit !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    /* The theme applies white-space:nowrap + inline display to <button>, which forced
       the card descriptions onto one line so they overflowed into neighbouring cards.
       Restore the intended wrapping column layout. */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    min-width: 0 !important;
    height: 100% !important;
}
#miro-qe-app .miro-qe-service-card:hover,
#miro-qe-app .miro-qe-service-card:focus-visible {
    background: #F8F6F2 !important;
    border-color: #0C0C0C !important;
}
#miro-qe-app .miro-qe-service-card__label,
#miro-qe-app .miro-qe-service-card__desc {
    display: block !important;
    width: 100% !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
}
#miro-qe-app .miro-qe-service-card__label { color: #0C0C0C !important; }
#miro-qe-app .miro-qe-service-card__desc  { color: #5A5855 !important; }
#miro-qe-app .miro-qe-service-card__icon  { color: #0C0C0C !important; }


/* ── Wizard header — dark band ────────────────────────────────────────────── */

.miro-qe-wizard__header {
    background: var(--mq-black);
    padding: 1.25rem 2rem 1.1rem;
}

.miro-qe-back-to-services {
    background: none;
    border: none;
    color: rgba(255,255,255,0.55);
    cursor: pointer;
    font-size: 0.8rem;
    padding: 0;
    margin-bottom: 0.6rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    letter-spacing: 0.01em;
    transition: color 0.15s;
}
.miro-qe-back-to-services:hover  { color: var(--mq-yellow); }
.miro-qe-back-to-services:focus-visible {
    outline: 2px solid var(--mq-yellow);
    outline-offset: 2px;
    border-radius: 2px;
}

.miro-qe-wizard__title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--mq-white);
    margin: 0 0 1rem;
    letter-spacing: -0.01em;
}

/* Progress bar */
.miro-qe-progress {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.miro-qe-progress__bar {
    flex: 1;
    height: 3px;
    background: rgba(255,255,255,0.18);
    border-radius: 2px;
    overflow: hidden;
}

.miro-qe-progress__fill {
    height: 100%;
    background: var(--mq-yellow);
    border-radius: 2px;
    width: 0%;
    transition: width 0.35s ease;
}

.miro-qe-progress__label {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.55);
    white-space: nowrap;
}


/* ── Wizard body ──────────────────────────────────────────────────────────── */

.miro-qe-wizard > .miro-qe-step,
.miro-qe-wizard .miro-qe-step {
    padding: 1.75rem 2rem 0;
}

.miro-qe-step h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--mq-black);
    margin: 0 0 1.25rem;
    letter-spacing: -0.01em;
}

.miro-qe-step h4 {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--mq-black);
    margin: 0 0 0.75rem;
}


/* ── Fields ───────────────────────────────────────────────────────────────── */

.miro-qe-field {
    margin-bottom: 1.1rem;
}

.miro-qe-field label,
.miro-qe-label--group {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.3rem;
    color: var(--mq-black);
    letter-spacing: 0.01em;
}

.miro-qe-field input[type="text"],
.miro-qe-field input[type="email"],
.miro-qe-field input[type="tel"],
.miro-qe-field input[type="date"],
.miro-qe-field input[type="number"],
.miro-qe-field textarea,
.miro-qe-field select {
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: 1.5px solid var(--mq-border);
    border-radius: var(--mq-radius);
    font-size: 0.95rem;
    line-height: 1.4;
    background: var(--mq-white);
    color: var(--mq-black);
    transition: border-color 0.15s;
    appearance: none;
    -webkit-appearance: none;
}

/* Date inputs: whole field is clickable, not just the icon */
.miro-qe-field input[type="date"] {
    cursor: pointer;
    appearance: auto;
    -webkit-appearance: auto;
    position: relative;
}

/* Custom select arrow */
.miro-qe-field select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%230C0C0C' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    padding-right: 2.25rem;
}

.miro-qe-field input:focus,
.miro-qe-field textarea:focus,
.miro-qe-field select:focus {
    outline: none;
    border-color: var(--mq-black);
    box-shadow: 0 0 0 3px rgba(255,210,0,0.25);
}

.miro-qe-field input::placeholder,
.miro-qe-field textarea::placeholder {
    color: var(--mq-black-60);
    opacity: 1;
}

/* Two-column row */
.miro-qe-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

/* Hint / helper text */
.miro-qe-hint {
    display: block;
    font-size: 0.78rem;
    color: var(--mq-black-60);
    margin-top: 0.3rem;
    line-height: 1.4;
}

.miro-qe-optional {
    font-weight: 400;
    color: var(--mq-black-60);
    font-size: 0.82em;
}

/* Divider */
.miro-qe-divider {
    border: none;
    border-top: 1px solid var(--mq-border);
    margin: 1.5rem 0;
}


/* ── Checkbox groups ──────────────────────────────────────────────────────── */

.miro-qe-checkgroup {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.miro-qe-check {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--mq-black);
    cursor: pointer;
    line-height: 1.4;
}

.miro-qe-check input[type="checkbox"] {
    flex-shrink: 0;
    margin-top: 0.15rem;
    width: 1rem;
    height: 1rem;
    accent-color: var(--mq-black);
    cursor: pointer;
    border-radius: 2px;
}


/* ── Wizard navigation bar ────────────────────────────────────────────────── */

.miro-qe-wizard__nav {
    display: flex;
    gap: 0.75rem;
    padding: 1.25rem 2rem;
    border-top: 1px solid var(--mq-border);
    margin-top: 1.5rem;
    background: var(--mq-white);
}


/* ── Buttons ──────────────────────────────────────────────────────────────── */

.miro-qe-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.65rem 1.5rem;
    border: 2px solid transparent;
    border-radius: var(--mq-radius);
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    letter-spacing: 0.01em;
    transition: background 0.15s, color 0.15s, border-color 0.15s, opacity 0.15s;
    line-height: 1.4;
    font-family: inherit;
    white-space: nowrap;
}

/* Primary — MIRO yellow (§3.4) */
.miro-qe-btn--primary {
    background: var(--mq-yellow);
    color: var(--mq-black);
    border-color: var(--mq-yellow);
}
.miro-qe-btn--primary:hover {
    background: var(--mq-yellow-hover);
    border-color: var(--mq-yellow-hover);
}
.miro-qe-btn--primary:focus-visible {
    outline: 3px solid var(--mq-black);
    outline-offset: 2px;
}

/* Secondary — outlined dark (§3.4, must not look identical to primary) */
.miro-qe-btn--secondary {
    background: transparent;
    color: var(--mq-black);
    border-color: var(--mq-black);
}
.miro-qe-btn--secondary:hover {
    background: var(--mq-black);
    color: var(--mq-white);
}
.miro-qe-btn--secondary:focus-visible {
    outline: 3px solid var(--mq-yellow);
    outline-offset: 2px;
}

/* Disabled */
.miro-qe-btn:disabled,
.miro-qe-btn[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}


/* ── Review summary ───────────────────────────────────────────────────────── */

.miro-qe-review-summary {
    background: var(--mq-cream);
    border: 1px solid var(--mq-border);
    border-radius: var(--mq-radius);
    padding: 1rem;
    margin-bottom: 0.5rem;
}

.miro-qe-review-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.miro-qe-review-table th,
.miro-qe-review-table td {
    padding: 0.35rem 0.5rem;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--mq-cream-dark);
    color: var(--mq-black);
}

.miro-qe-review-table tr:last-child th,
.miro-qe-review-table tr:last-child td {
    border-bottom: none;
}

.miro-qe-review-table th {
    font-weight: 600;
    width: 42%;
    color: var(--mq-black-60);
    font-size: 0.8rem;
}


/* ── Result card ──────────────────────────────────────────────────────────── */

#miro-qe-result {
    padding: 0 2rem 2rem;
}

.miro-qe-result-card {
    background: var(--mq-cream);
    border: 1px solid var(--mq-border);
    border-radius: var(--mq-radius-lg);
    overflow: hidden;
    margin-top: 1.25rem;
}

.miro-qe-result-card > h3 {
    background: var(--mq-black);
    color: var(--mq-white);
    margin: 0;
    padding: 1rem 1.25rem;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.miro-qe-result-card > .miro-qe-ref,
.miro-qe-result-card .miro-qe-ref {
    padding: 0.75rem 1.25rem 0;
    margin: 0;
    font-size: 0.85rem;
    color: var(--mq-black-60);
    display: block;
}

.miro-qe-result-card .miro-qe-ref strong {
    color: var(--mq-black);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

/* ── Countdown timer ──────────────────────────────────────────────────────── */

.miro-qe-countdown {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: var(--mq-black-60);
    padding: 0.35rem 1.25rem;
}

.miro-qe-countdown__timer {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--mq-black);
}

.miro-qe-countdown--expiring .miro-qe-countdown__timer {
    color: var(--mq-error-text);
}

.miro-qe-valid {
    font-size: 0.8rem;
    color: var(--mq-black-60);
    padding: 0.35rem 1.25rem;
    margin: 0;
}


/* ── Line items table ─────────────────────────────────────────────────────── */

.miro-qe-line-items {
    width: 100%;
    border-collapse: collapse;
    margin: 0.75rem 0;
    font-size: 0.9rem;
}

.miro-qe-line-items thead th {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--mq-black-60);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.5rem 1.25rem;
    border-bottom: 1px solid var(--mq-border);
    background: transparent;
    text-align: left;
}

.miro-qe-line-items thead th:last-child { text-align: right; }

.miro-qe-line-items tbody td {
    padding: 0.55rem 1.25rem;
    border-bottom: 1px solid var(--mq-cream-dark);
    color: var(--mq-black);
    text-align: left;
}
.miro-qe-line-items tbody td:last-child { text-align: right; font-variant-numeric: tabular-nums; }

.miro-qe-line-items tfoot th,
.miro-qe-line-items tfoot td {
    padding: 0.6rem 1.25rem;
    text-align: left;
    color: var(--mq-black-60);
    font-size: 0.85rem;
}
.miro-qe-line-items tfoot th:last-child,
.miro-qe-line-items tfoot td:last-child { text-align: right; font-variant-numeric: tabular-nums; }

/* Total row */
.miro-qe-line-items tfoot tr:last-child th,
.miro-qe-line-items tfoot tr:last-child td {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--mq-black);
    border-top: 2px solid var(--mq-black);
}

.miro-qe-result-card > .miro-qe-hint {
    font-size: 0.78rem;
    color: var(--mq-black-60);
    padding: 0 1.25rem 0.5rem;
    margin: 0;
    display: block;
}


/* ── Post-quote actions ───────────────────────────────────────────────────── */

.miro-qe-quote-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 1rem 1.25rem;
    background: var(--mq-white);
    border-top: 1px solid var(--mq-border);
}

#miro-qe-action-result {
    padding: 0 1.25rem 1rem;
}


/* ── State messages ───────────────────────────────────────────────────────── */

.miro-qe-error {
    background: var(--mq-error-bg);
    border: 1px solid var(--mq-error-border);
    border-radius: var(--mq-radius);
    padding: 0.75rem 1rem;
    color: var(--mq-error-text);
    font-size: 0.875rem;
    margin-top: 1rem;
}

.miro-qe-success {
    background: var(--mq-success-bg);
    border: 1px solid var(--mq-success-border);
    border-radius: var(--mq-radius);
    padding: 1rem 1.2rem;
    color: var(--mq-success-text);
    font-size: 0.875rem;
    margin-top: 1rem;
}

.miro-qe-success h3 {
    margin: 0 0 0.4rem;
    font-size: 0.95rem;
    color: var(--mq-success-text);
}


/* ── Hero pricing cards ──────────────────────────────────────────────────── */

.miro-qe-hero-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.25rem;
    max-width: 1280px;
    margin: 0 auto;
}

.miro-qe-hero-card {
    background: var(--mq-white);
    border: 1px solid var(--mq-border);
    border-radius: var(--mq-radius-lg);
    padding: 1.5rem;
    text-align: center;
    box-shadow: var(--mq-shadow);
}

.miro-qe-hero-card__icon {
    font-size: 2rem;
    margin-bottom: 0.75rem;
    line-height: 1;
}

.miro-qe-hero-card__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--mq-black);
    margin: 0 0 0.4rem;
}

.miro-qe-hero-card__tagline {
    font-size: 0.85rem;
    color: var(--mq-black-60);
    margin-bottom: 0.75rem;
    line-height: 1.4;
}

.miro-qe-hero-card__price {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--mq-black);
    margin-bottom: 1.25rem;
    line-height: 1.2;
}

.miro-qe-hero-card__price-label {
    font-size: 0.78rem;
    font-weight: 400;
    color: var(--mq-black-60);
    display: block;
    margin-bottom: 0.15rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.miro-qe-hero-card__price-suffix {
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--mq-black-60);
}


/* ── Hero calculator — SDC / Removals ────────────────────────────────────── */

.miro-qe-hero-calc {
    width: 100%;
}

.miro-qe-hero-calc__label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--mq-black-60);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 0.6rem;
}

.miro-qe-hero-calc__row {
    display: flex;
    align-items: flex-end;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.miro-qe-hero-calc__row--storage {
    flex-wrap: nowrap;
}

.miro-qe-hero-calc__field {
    flex: 1 1 160px;
    min-width: 140px;
}

.miro-qe-hero-calc__field--wide {
    flex: 1 1 100%;
    max-width: 360px;
}

.miro-qe-hero-calc__field-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--mq-black-60);
    margin-bottom: 0.3rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.miro-qe-hero-calc__input {
    width: 100%;
    padding: 0.65rem 0.75rem;
    border: 1.5px solid var(--mq-border);
    border-radius: var(--mq-radius);
    font-size: 0.95rem;
    background: var(--mq-white);
    color: var(--mq-black);
    transition: border-color 0.15s;
}

.miro-qe-hero-calc__input:focus {
    outline: none;
    border-color: var(--mq-black);
    box-shadow: 0 0 0 3px rgba(255,210,0,0.25);
}

.miro-qe-hero-calc__input::placeholder {
    color: var(--mq-black-60);
}

.miro-qe-hero-calc__divider {
    font-size: 1.1rem;
    color: var(--mq-black-60);
    padding-bottom: 0.55rem;
    flex-shrink: 0;
}

.miro-qe-hero-calc__submit {
    flex-shrink: 0;
    align-self: flex-end;
    white-space: nowrap;
}

.miro-qe-hero-calc__from {
    font-size: 0.78rem;
    color: var(--mq-black-60);
    margin: 0.6rem 0 0;
}

/* ── Instant estimate card (step 2 price preview) ──────────────────────── */

.miro-qe-instant-estimate__loading {
    text-align: center;
    padding: 2rem;
    color: var(--mq-black-60);
    font-style: italic;
}

.miro-qe-estimate-card {
    border-radius: var(--mq-radius-lg);
    overflow: hidden;
    box-shadow: var(--mq-shadow-card);
}

.miro-qe-estimate-card__header {
    background: var(--mq-black);
    color: var(--mq-white);
    padding: 1rem 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 700;
    font-size: 1rem;
}

.miro-qe-estimate-card__body {
    padding: 1.25rem;
    background: var(--mq-cream);
}

.miro-qe-estimate-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.miro-qe-estimate-table thead tr {
    border-bottom: 1px solid var(--mq-border);
}

.miro-qe-estimate-table th {
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.07em;
    color: var(--mq-black-60);
    padding: 0 0 0.5rem;
    text-align: left;
}

.miro-qe-estimate-table th:last-child,
.miro-qe-estimate-table td:last-child {
    text-align: right;
}

.miro-qe-estimate-table tbody td {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--mq-border);
    color: var(--mq-black);
}

.miro-qe-estimate-table tfoot td {
    padding: 0.75rem 0 0;
    font-weight: 700;
    font-size: 1.1rem;
    border-top: 2px solid var(--mq-black);
}

.miro-qe-instant-estimate__review {
    background: var(--mq-cream);
    border-left: 4px solid var(--mq-yellow);
    padding: 1rem 1.25rem;
    border-radius: var(--mq-radius);
}

.miro-qe-estimate-card__miles {
    /* Sits on the black card header — brand yellow text on a subtle light pill */
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--mq-yellow, #FFD200);
    background: rgba(255,255,255,0.12);
    padding: 0.2rem 0.6rem;
    border-radius: 99px;
}

.miro-qe-estimate-note {
    /* Note uses a faint brand-yellow wash + yellow rule + near-black text (no off-palette browns) */
    margin: 0.75rem 0 0;
    padding: 0.6rem 0.75rem;
    background: rgba(255,210,0,0.10);
    border-left: 3px solid var(--mq-yellow, #FFD200);
    border-radius: var(--mq-radius);
    font-size: 0.85rem;
    color: var(--mq-black, #0C0C0C) !important;
}

/* "Save this estimate to your inbox" row */
.miro-qe-estimate-email-row {
    margin-top: 1.25rem;
    padding: 1rem 1.25rem;
    background: var(--mq-cream);
    border-radius: var(--mq-radius);
    border: 1px solid var(--mq-border);
}

.miro-qe-estimate-email-row__label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: #0C0C0C !important;
    margin-bottom: 0.6rem;
}

.miro-qe-estimate-email-row__inputs {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.miro-qe-estimate-email-input {
    flex: 1 1 200px;
    padding: 0.55rem 0.75rem;
    border: 1.5px solid var(--mq-border);
    border-radius: var(--mq-radius);
    font-size: 0.9rem;
    background: var(--mq-white);
    color: var(--mq-black);
    min-width: 0;
}

.miro-qe-estimate-email-input:focus {
    outline: none;
    border-color: var(--mq-yellow);
    box-shadow: 0 0 0 3px rgba(255,210,0,0.25);
}

.miro-qe-estimate-email-row__msg {
    margin: 0.5rem 0 0;
    font-size: 0.85rem;
}

/* ── Hero storage price grid ──────────────────────────────────────────────── */

.miro-qe-hero-storage-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.6rem;
    margin-top: 1rem;
}

.miro-qe-hero-sto-card {
    background: var(--mq-white);
    border: 1.5px solid var(--mq-border);
    border-radius: var(--mq-radius);
    padding: 0.85rem 0.75rem;
    text-align: center;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.miro-qe-hero-sto-card:hover {
    border-color: var(--mq-black);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.miro-qe-hero-sto-card__label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mq-black-60);
    margin-bottom: 0.2rem;
}

.miro-qe-hero-sto-card__desc {
    font-size: 0.72rem;
    color: var(--mq-black-60);
    margin-bottom: 0.6rem;
    line-height: 1.3;
}

.miro-qe-hero-sto-card__price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.1rem;
    margin-bottom: 0.35rem;
}

.miro-qe-hero-sto-card__weekly {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--mq-black);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.miro-qe-hero-sto-card__per {
    font-size: 0.75rem;
    color: var(--mq-black-60);
}

.miro-qe-hero-sto-card__collection {
    font-size: 0.72rem;
    color: var(--mq-black-60);
    line-height: 1.3;
}

/* London detected — highlight collection note */
.miro-qe-hero-sto-card--london .miro-qe-hero-sto-card__collection {
    color: var(--mq-black);
    font-weight: 600;
}

.miro-qe-hero-calc__sto-cta {
    margin-top: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.miro-qe-hero-calc__note {
    font-size: 0.78rem;
    color: var(--mq-black-60);
    margin: 0;
}

/* ── Redelivery form ─────────────────────────────────────────────────────── */

.miro-qe-quote-form,
.miro-qe-redelivery-form {
    max-width: var(--mq-max-form);
    margin: 0 auto;
}

.miro-qe-service-options {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 1.2rem;
}

.miro-qe-service-options label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    border: 2px solid var(--mq-border);
    border-radius: var(--mq-radius);
    cursor: pointer;
    font-weight: 500;
    font-size: 0.9rem;
    background: var(--mq-white);
    transition: border-color 0.15s, background 0.15s;
}

.miro-qe-service-options label:has(input:checked) {
    border-color: var(--mq-black);
    background: var(--mq-cream);
}

.miro-qe-type-selector { margin-bottom: 1.5rem; }

.miro-qe-type-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
    cursor: pointer;
    font-weight: 500;
    font-size: 0.9rem;
}


/* ── Accessibility ───────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .miro-qe *,
    .miro-qe *::before,
    .miro-qe *::after {
        transition: none !important;
        animation: none !important;
    }
}


/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 540px) {
    .miro-qe-service-cards { grid-template-columns: 1fr; }
    .miro-qe-service-selector { padding: 1.25rem; }
    .miro-qe-wizard__header { padding: 1rem 1.25rem 0.9rem; }
    .miro-qe-wizard > .miro-qe-step,
    .miro-qe-wizard .miro-qe-step { padding: 1.25rem 1.25rem 0; }
    .miro-qe-wizard__nav { padding: 1rem 1.25rem; }
    .miro-qe-field-row { grid-template-columns: 1fr; }
    .miro-qe-quote-actions { flex-direction: column; }
    .miro-qe-btn { width: 100%; text-align: center; justify-content: center; }
    #miro-qe-result { padding: 0 1.25rem 1.25rem; }
    .miro-qe-hero-grid { grid-template-columns: 1fr; }

    .miro-qe-line-items thead th,
    .miro-qe-line-items tbody td,
    .miro-qe-line-items tfoot th,
    .miro-qe-line-items tfoot td {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
}


/* ════════════════════════════════════════════════════════════════════════════
   DARK CANONICAL THEME — quote wizard (design system v1.1: dark surfaces, white
   text, MIRO-yellow accents). Scoped to #miro-qe-app and placed AFTER the light
   base rules + earlier #miro-qe-app white-compat overrides so it wins (same/higher
   specificity, later source order). The hero calculators (.miro-qe-hero-calc) sit
   OUTSIDE #miro-qe-app and are intentionally untouched.
   ──────────────────────────────────────────────────────────────────────────── */
#miro-qe-app {
    --mqd-text:    #FFFFFF;
    --mqd-muted:   #9A9A9A;
    --mqd-surface: #1A1A1A;
    --mqd-input:   #202020;
    --mqd-border:  #2E2E2E;
    background: #121212 !important;
    border: 1px solid #262626 !important;
    box-shadow: 0 24px 60px rgba(0,0,0,0.50) !important;
    color: var(--mqd-text) !important;
}

/* Headings — the theme-compat rule near the top (#miro-qe-app h1..h6 → #0C0C0C)
   forced every heading near-black, so any heading not explicitly recoloured was
   invisible on dark (e.g. the wizard title in the header). Make them all light, and
   the section / wizard / step titles brand-yellow (per request). */
#miro-qe-app h1,
#miro-qe-app h2,
#miro-qe-app h3,
#miro-qe-app h4,
#miro-qe-app h5,
#miro-qe-app h6 {
    color: #FFFFFF !important;
}
#miro-qe-app .miro-qe-section__title,
#miro-qe-app .miro-qe-wizard__title,
#miro-qe-app .miro-qe-step h3 {
    color: #FFD200 !important;
}

/* Surfaces → dark */
#miro-qe-app .miro-qe-wizard__nav,
#miro-qe-app .miro-qe-quote-actions {
    background: #141414 !important;
    border-top-color: #262626 !important;
}
#miro-qe-app .miro-qe-service-card,
#miro-qe-app .miro-qe-review-summary,
#miro-qe-app .miro-qe-result-card,
#miro-qe-app .miro-qe-estimate-card__body,
#miro-qe-app .miro-qe-estimate-email-row,
#miro-qe-app .miro-qe-instant-estimate__review {
    background: var(--mqd-surface) !important;
    border-color: var(--mqd-border) !important;
}

/* Primary text → white */
#miro-qe-app,
#miro-qe-app .miro-qe-section__title,
#miro-qe-app .miro-qe-step h3,
#miro-qe-app .miro-qe-step h4,
#miro-qe-app label,
#miro-qe-app .miro-qe-label--group,
#miro-qe-app .miro-qe-check,
#miro-qe-app .miro-qe-service-card__label,
#miro-qe-app .miro-qe-service-card__icon,
#miro-qe-app .miro-qe-result-card .miro-qe-ref strong,
#miro-qe-app .miro-qe-countdown__timer,
#miro-qe-app .miro-qe-review-table td,
#miro-qe-app .miro-qe-line-items tbody td,
#miro-qe-app .miro-qe-estimate-table tbody td,
#miro-qe-app .miro-qe-line-items tfoot tr:last-child th,
#miro-qe-app .miro-qe-line-items tfoot tr:last-child td,
#miro-qe-app .miro-qe-estimate-table tfoot td {
    color: var(--mqd-text) !important;
}

/* Secondary / muted text */
#miro-qe-app .miro-qe-hint,
#miro-qe-app .miro-qe-optional,
#miro-qe-app .miro-qe-service-card__desc,
#miro-qe-app .miro-qe-ref,
#miro-qe-app .miro-qe-valid,
#miro-qe-app .miro-qe-countdown,
#miro-qe-app .miro-qe-review-table th,
#miro-qe-app .miro-qe-review-table td:first-child,
#miro-qe-app .miro-qe-line-items thead th,
#miro-qe-app .miro-qe-line-items tfoot th,
#miro-qe-app .miro-qe-line-items tfoot td,
#miro-qe-app .miro-qe-estimate-table th,
#miro-qe-app .miro-qe-result-card > .miro-qe-hint {
    color: var(--mqd-muted) !important;
}

/* Inputs / selects / textareas */
#miro-qe-app .miro-qe-field input[type="text"],
#miro-qe-app .miro-qe-field input[type="email"],
#miro-qe-app .miro-qe-field input[type="tel"],
#miro-qe-app .miro-qe-field input[type="date"],
#miro-qe-app .miro-qe-field input[type="number"],
#miro-qe-app .miro-qe-field textarea,
#miro-qe-app .miro-qe-field select,
#miro-qe-app .miro-qe-estimate-email-input {
    background: var(--mqd-input) !important;
    border-color: var(--mqd-border) !important;
    color: var(--mqd-text) !important;
}
#miro-qe-app .miro-qe-field input::placeholder,
#miro-qe-app .miro-qe-field textarea::placeholder,
#miro-qe-app .miro-qe-estimate-email-input::placeholder {
    color: #8A8A8A !important;
}
#miro-qe-app .miro-qe-field input:focus,
#miro-qe-app .miro-qe-field textarea:focus,
#miro-qe-app .miro-qe-field select:focus,
#miro-qe-app .miro-qe-estimate-email-input:focus {
    border-color: #FFD200 !important;
    box-shadow: 0 0 0 3px rgba(255,210,0,0.25) !important;
}
/* Light dropdown arrow on dark selects — must set repeat/position too, because the
   dark background shorthand above reset background-repeat to `repeat`, which tiled the
   chevron across the whole field (the zigzag pattern). */
#miro-qe-app .miro-qe-field select {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23EBEBEB' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    padding-right: 2.25rem !important;
}
#miro-qe-app .miro-qe-field select option {
    background-color: #1F1F1F !important;
    color: #FFFFFF !important;
}

/* Service-card hover → yellow accent */
#miro-qe-app .miro-qe-service-card:hover,
#miro-qe-app .miro-qe-service-card:focus-visible {
    background: #202020 !important;
    border-color: #FFD200 !important;
}

/* Checkboxes */
#miro-qe-app .miro-qe-check input[type="checkbox"] { accent-color: #FFD200 !important; }

/* Borders / rules → dark; total rules → yellow */
#miro-qe-app .miro-qe-divider,
#miro-qe-app .miro-qe-review-table th,
#miro-qe-app .miro-qe-review-table td,
#miro-qe-app .miro-qe-line-items thead th,
#miro-qe-app .miro-qe-line-items tbody td,
#miro-qe-app .miro-qe-estimate-table thead tr,
#miro-qe-app .miro-qe-estimate-table tbody td {
    border-color: #262626 !important;
}
#miro-qe-app .miro-qe-line-items tfoot tr:last-child th,
#miro-qe-app .miro-qe-line-items tfoot tr:last-child td,
#miro-qe-app .miro-qe-estimate-table tfoot td {
    border-top-color: #FFD200 !important;
}

/* Secondary button → light outline on dark */
#miro-qe-app .miro-qe-btn--secondary {
    background: transparent !important;
    color: var(--mqd-text) !important;
    border-color: rgba(255,255,255,0.5) !important;
}
#miro-qe-app .miro-qe-btn--secondary:hover {
    background: #FFFFFF !important;
    color: #0C0C0C !important;
    border-color: #FFFFFF !important;
}

/* Error state on dark */
#miro-qe-app .miro-qe-error {
    background: rgba(198,40,40,0.14) !important;
    border-color: #C62828 !important;
    color: #FF8A8A !important;
}
/* Success card already black+yellow — keep its yellow edge visible */
#miro-qe-app .miro-qe-success { border-color: #FFD200 !important; }

/* Estimate panel — text that was hard-coded near-black in the light base theme
   (invisible on dark): "Save this estimate to your inbox", the review note, loader */
#miro-qe-app .miro-qe-estimate-email-row__label { color: #FFFFFF !important; }
#miro-qe-app .miro-qe-estimate-note { color: #E8E4DA !important; }
#miro-qe-app .miro-qe-instant-estimate__loading { color: var(--mqd-muted) !important; }

/* Checkbox groups → distinct boxed fields, so e.g. "Equipment / Assistance Needed"
   and "Goods Declaration" read clearly as two separate sections rather than one run-on
   list. The group label sits above its own bordered panel. */
#miro-qe-app .miro-qe-checkgroup {
    background: #1A1A1A !important;
    border: 1px solid #2E2E2E !important;
    border-radius: 8px !important;
    padding: 0.85rem 1rem !important;
    gap: 0.55rem !important;
}
#miro-qe-app .miro-qe-label--group {
    color: #FFFFFF !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    margin-bottom: 0.45rem !important;
}


/* =============================================================================
   CUSTOMER PORTAL  (.miro-portal-*)
   ============================================================================= */

/* Portal layout shell -------------------------------------------------------- */

.miro-portal-wrap {
    max-width: 960px;
    margin: 0 auto;
    padding: 2rem 1.25rem 4rem;
    color: var(--mq-black);
    font-family: inherit;
    line-height: 1.5;
}

/* Portal page header */
.miro-portal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 2rem;
    padding-bottom: 1.25rem;
    border-bottom: 2px solid var(--mq-black);
}

.miro-portal-header__title {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--mq-black);
    margin: 0;
    letter-spacing: -0.02em;
}

.miro-portal-header__ref {
    font-size: 0.82rem;
    color: var(--mq-black-60);
    margin: 0.15rem 0 0;
    font-variant-numeric: tabular-nums;
}

/* Section cards */
.miro-portal-card {
    background: var(--mq-white);
    border: 1px solid var(--mq-border);
    border-radius: var(--mq-radius-lg);
    box-shadow: var(--mq-shadow);
    margin-bottom: 1.5rem;
    overflow: hidden;
}

.miro-portal-card__head {
    background: var(--mq-black);
    padding: 0.85rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.miro-portal-card__head-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--mq-white);
    margin: 0;
    letter-spacing: -0.01em;
}

.miro-portal-card__body {
    padding: 1.25rem;
}

/* Detail list (key/value pairs) */
.miro-portal-detail-list {
    display: grid;
    grid-template-columns: minmax(120px, 38%) 1fr;
    gap: 0;
    font-size: 0.875rem;
}

.miro-portal-detail-list dt,
.miro-portal-detail-list dd {
    padding: 0.55rem 0.25rem;
    margin: 0;
    border-bottom: 1px solid var(--mq-cream-dark);
}

.miro-portal-detail-list dt {
    font-weight: 600;
    color: var(--mq-black-60);
    font-size: 0.8rem;
    letter-spacing: 0.01em;
    padding-right: 0.75rem;
}

.miro-portal-detail-list dd {
    font-weight: 400;
    color: var(--mq-black);
    word-break: break-word;
}

.miro-portal-detail-list dt:last-of-type,
.miro-portal-detail-list dd:last-of-type {
    border-bottom: none;
}

/* Action bar inside portal */
.miro-portal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--mq-border);
    background: var(--mq-cream);
}

/* Timeline / history list */
.miro-portal-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
}

.miro-portal-timeline__item {
    display: flex;
    gap: 0.75rem;
    padding: 0.65rem 0;
    border-bottom: 1px solid var(--mq-cream-dark);
    font-size: 0.875rem;
}

.miro-portal-timeline__item:last-child {
    border-bottom: none;
}

.miro-portal-timeline__dot {
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--mq-black-20);
    margin-top: 0.35rem;
}

.miro-portal-timeline__item--active .miro-portal-timeline__dot {
    background: var(--mq-yellow);
    box-shadow: 0 0 0 3px rgba(255, 210, 0, 0.25);
}

.miro-portal-timeline__item--done .miro-portal-timeline__dot {
    background: var(--mq-black);
}

.miro-portal-timeline__label {
    font-weight: 600;
    color: var(--mq-black);
    margin: 0 0 0.1rem;
}

.miro-portal-timeline__meta {
    color: var(--mq-black-60);
    font-size: 0.8rem;
    margin: 0;
}

/* Empty state */
.miro-portal-empty {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--mq-black-60);
    font-size: 0.9rem;
}

.miro-portal-empty__icon {
    font-size: 2rem;
    display: block;
    margin-bottom: 0.75rem;
    line-height: 1;
    opacity: 0.4;
}

/* Responsive portal */
@media (max-width: 540px) {
    .miro-portal-header { flex-direction: column; align-items: flex-start; }
    .miro-portal-detail-list { grid-template-columns: 1fr; }
    .miro-portal-detail-list dt { padding-bottom: 0.1rem; border-bottom: none; }
    .miro-portal-actions { flex-direction: column; }
    .miro-portal-actions .miro-qe-btn { width: 100%; }
}


/* =============================================================================
   ADMIN MODAL  (.miro-admin-modal)
   ============================================================================= */

/* Overlay */
.miro-admin-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(12, 12, 12, 0.65);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    animation: miroModalFadeIn 0.18s ease;
}

.miro-admin-modal--hidden {
    display: none;
}

@keyframes miroModalFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Panel */
.miro-admin-modal__panel {
    background: var(--mq-white, #FFFFFF);
    border-radius: var(--mq-radius-lg, 8px);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.28), 0 2px 8px rgba(0, 0, 0, 0.12);
    width: 100%;
    max-width: 560px;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    animation: miroModalSlideIn 0.2s ease;
    position: relative;
}

@keyframes miroModalSlideIn {
    from { transform: translateY(-12px); opacity: 0; }
    to   { transform: translateY(0);     opacity: 1; }
}

.miro-admin-modal__panel--wide {
    max-width: 760px;
}

/* Modal header */
.miro-admin-modal__header {
    background: var(--mq-black, #0C0C0C);
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-radius: var(--mq-radius-lg, 8px) var(--mq-radius-lg, 8px) 0 0;
}

.miro-admin-modal__title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--mq-white, #FFFFFF);
    margin: 0;
    letter-spacing: -0.01em;
}

.miro-admin-modal__close {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    padding: 0.25rem;
    border-radius: var(--mq-radius, 4px);
    transition: color 0.15s, background 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.miro-admin-modal__close:hover {
    color: var(--mq-white, #FFFFFF);
    background: rgba(255, 255, 255, 0.12);
}

.miro-admin-modal__close:focus-visible {
    outline: 2px solid var(--mq-yellow, #FFD200);
    outline-offset: 2px;
}

/* Modal body */
.miro-admin-modal__body {
    padding: 1.5rem 1.25rem;
}

/* Modal footer / actions */
.miro-admin-modal__footer {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--mq-border, #D0CEC9);
    background: var(--mq-cream, #F8F6F2);
    border-radius: 0 0 var(--mq-radius-lg, 8px) var(--mq-radius-lg, 8px);
}

/* Trap focus helper — visually hidden but accessible */
.miro-admin-modal:focus { outline: none; }

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
    .miro-admin-modal,
    .miro-admin-modal__panel { animation: none; }
}


/* =============================================================================
   PIPELINE STATUS BADGES  (.miro-pipeline-badge)
   ============================================================================= */

.miro-pipeline-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.65rem;
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    white-space: nowrap;
    line-height: 1.4;
    text-transform: uppercase;
}

/* Dot indicator */
.miro-pipeline-badge::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
    opacity: 0.7;
}

/* Colour variants */

/* Status colours use ONLY the MIRO palette (black/white/yellow/cream/grey + red).
   Semantics: neutral = cream + muted; attention/action = yellow + black;
   positive/done = black + yellow|white; error = red. (§3.1) */

/* New / unreviewed — neutral */
.miro-pipeline-badge--new {
    background: var(--mq-cream-dark, #EDEAE4);
    color: var(--mq-black-60, #5A5855);
}

/* Quote sent, awaiting response — neutral */
.miro-pipeline-badge--quoted {
    background: var(--mq-cream, #F8F6F2);
    color: var(--mq-black, #0C0C0C);
}

/* Customer accepted, awaiting payment — action needed */
.miro-pipeline-badge--accepted {
    background: var(--mq-yellow, #FFD200);
    color: var(--mq-black, #0C0C0C);
}

/* Payment received, job confirmed — positive/done */
.miro-pipeline-badge--booked {
    background: var(--mq-black, #0C0C0C);
    color: var(--mq-yellow, #FFD200);
}

/* Job in progress — attention */
.miro-pipeline-badge--active {
    background: var(--mq-yellow, #FFD200);
    color: var(--mq-black, #0C0C0C);
}

/* Completed / closed — done */
.miro-pipeline-badge--complete {
    background: var(--mq-black, #0C0C0C);
    color: var(--mq-white, #FFFFFF);
}

/* Declined or cancelled — error */
.miro-pipeline-badge--declined {
    background: var(--mq-error-bg, #FFF0F0);
    color: var(--mq-error-text, #B71C1C);
}

/* On hold / paused — neutral muted */
.miro-pipeline-badge--hold {
    background: var(--mq-cream-dark, #EDEAE4);
    color: var(--mq-black-60, #5A5855);
}

/* Awaiting info from customer — neutral */
.miro-pipeline-badge--pending {
    background: var(--mq-cream, #F8F6F2);
    color: var(--mq-black-60, #5A5855);
}


/* =============================================================================
   FLASH NOTICES  (.miro-flash-notice)
   ============================================================================= */

.miro-flash-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border-radius: var(--mq-radius, 4px);
    font-size: 0.875rem;
    line-height: 1.5;
    margin-bottom: 1rem;
    border-left: 3px solid transparent;
    animation: miroFlashIn 0.2s ease;
}

@keyframes miroFlashIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Icon slot */
.miro-flash-notice__icon {
    flex-shrink: 0;
    font-size: 1rem;
    line-height: 1.4;
}

/* Message text */
.miro-flash-notice__msg {
    flex: 1;
    color: inherit;
}

.miro-flash-notice__msg strong {
    display: block;
    font-weight: 700;
    margin-bottom: 0.1rem;
}

/* Dismiss button */
.miro-flash-notice__dismiss {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.85rem;
    opacity: 0.55;
    padding: 0;
    line-height: 1.4;
    color: inherit;
    flex-shrink: 0;
    transition: opacity 0.15s;
}

.miro-flash-notice__dismiss:hover { opacity: 1; }

/* Green — success */
.miro-flash-notice--success {
    background: var(--mq-success-bg, #0C0C0C);
    border-color: var(--mq-success-border, #FFD200);
    color: var(--mq-success-text, #FFD200);
}

/* Red — error */
.miro-flash-notice--error {
    background: var(--mq-error-bg, #FFF0F0);
    border-color: var(--mq-error-border, #C62828);
    color: var(--mq-error-text, #B71C1C);
}

/* Warning — brand yellow accent on cream (yellow is the MIRO caution colour) */
.miro-flash-notice--warning {
    background: var(--mq-cream, #F8F6F2);
    border-color: var(--mq-yellow, #FFD200);
    color: var(--mq-black, #0C0C0C);
}

/* Informational — neutral (palette has no blue) */
.miro-flash-notice--info {
    background: var(--mq-cream, #F8F6F2);
    border-color: var(--mq-black-60, #5A5855);
    color: var(--mq-black, #0C0C0C);
}

/* Neutral */
.miro-flash-notice--neutral {
    background: var(--mq-cream, #F8F6F2);
    border-color: var(--mq-border, #D0CEC9);
    color: var(--mq-black-80, #3A3A3A);
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
    .miro-flash-notice { animation: none; }
}