/**
 * EcoMetriq Trust Badge for Magento 2 — storefront badge styles (Phase 5D).
 *
 * A premium, portrait "trust seal" on a soft dark-green/charcoal surface. Every
 * rule is scoped under .ecometriq-badge so it can never affect theme markup,
 * with no global/bare element selectors, no top-level `*`, and no Tailwind/theme
 * dependencies. Visual values are driven by scoped design tokens; placement/
 * offset/z-index come from CSS custom properties the template sets inline from
 * sanitised integer config (with the fallbacks declared here). No external
 * assets, no JS.
 *
 * The badge root is the clickable element (an <a>, or a non-interactive <aside>
 * when no safe profile URL exists), so there is no separate footer link row.
 *
 * Phase 5D adds a dedicated mobile mode. Below 640px the Edge Minimal style
 * docks a small tab flush to a side of the viewport (left/right) showing only
 * the "Emissions" label and the compact figure; the Card style keeps the
 * portrait seal. Desktop styling is unchanged by the mobile rules (they live
 * only inside the mobile media query).
 *
 * Modifier classes (set by the view model, all whitelisted):
 *   ecometriq-badge--desktop-bottom-right | --desktop-bottom-left
 *   ecometriq-badge--desktop-top-right    | --desktop-top-left
 *   ecometriq-badge--mobile-bottom | --mobile-top | --mobile-hidden
 *   ecometriq-badge--size-standard | --size-compact
 *   ecometriq-badge--mobile-style-card | --mobile-style-edge
 *   ecometriq-badge--mobile-side-left  | --mobile-side-right
 *   ecometriq-badge--has-metric (set when a visible numeric metric exists)
 */
.ecometriq-badge {
    /* Soft dark-green/charcoal surface + accent tokens (scoped). */
    --ecm-badge-surface-top: #21392f;
    --ecm-badge-surface-bottom: #16261e;
    --ecm-badge-border: rgba(255, 255, 255, 0.10);
    --ecm-badge-highlight: rgba(255, 255, 255, 0.08);
    --ecm-badge-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.45), 0 4px 10px -6px rgba(0, 0, 0, 0.30);
    --ecm-badge-shadow-hover: 0 20px 40px -16px rgba(0, 0, 0, 0.50), 0 6px 14px -8px rgba(0, 0, 0, 0.35);
    --ecm-badge-radius: 16px;
    --ecm-badge-accent-text: #6fe7b8;
    --ecm-badge-text: #eef3f1;
    --ecm-badge-value: #ffffff;
    --ecm-badge-muted: #a8bab2;
    --ecm-badge-motion-duration: 240ms;
    --ecm-badge-width: 184px;

    /* Dynamic tokens (fallbacks; the template overrides these inline from
       clamped integer config). */
    --ecm-badge-offset-x: 24px;
    --ecm-badge-offset-y: 24px;
    --ecm-badge-mobile-offset-y: 16px;
    --ecm-badge-z-index: 40;

    position: fixed;
    z-index: var(--ecm-badge-z-index, 40);
    display: block;
    width: var(--ecm-badge-width, 184px);
    margin: 0;
    box-sizing: border-box;
    font-family: inherit;
    color: var(--ecm-badge-text);
    text-decoration: none;
    -webkit-font-smoothing: antialiased;
    animation: ecometriq-badge-in var(--ecm-badge-motion-duration) cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

.ecometriq-badge *,
.ecometriq-badge *::before,
.ecometriq-badge *::after {
    box-sizing: border-box;
}

.ecometriq-badge:focus-visible {
    outline: 2px solid var(--ecm-badge-accent-text);
    outline-offset: 3px;
    border-radius: calc(var(--ecm-badge-radius) + 3px);
}

/* Desktop corner placement. Each modifier pins two edges from the offset tokens
   and resets the opposite two so switching corners never leaves a stale edge. */
.ecometriq-badge--desktop-bottom-right {
    top: auto;
    left: auto;
    bottom: var(--ecm-badge-offset-y, 24px);
    right: var(--ecm-badge-offset-x, 24px);
}

.ecometriq-badge--desktop-bottom-left {
    top: auto;
    right: auto;
    bottom: var(--ecm-badge-offset-y, 24px);
    left: var(--ecm-badge-offset-x, 24px);
}

.ecometriq-badge--desktop-top-right {
    bottom: auto;
    left: auto;
    top: var(--ecm-badge-offset-y, 24px);
    right: var(--ecm-badge-offset-x, 24px);
}

.ecometriq-badge--desktop-top-left {
    bottom: auto;
    right: auto;
    top: var(--ecm-badge-offset-y, 24px);
    left: var(--ecm-badge-offset-x, 24px);
}

/* The visual seal surface: a centered, portrait column, now tighter. */
.ecometriq-badge__shell {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    padding: 18px 14px;
    background: linear-gradient(165deg, var(--ecm-badge-surface-top) 0%, var(--ecm-badge-surface-bottom) 100%);
    border: 1px solid var(--ecm-badge-border);
    border-radius: var(--ecm-badge-radius);
    box-shadow: var(--ecm-badge-shadow), inset 0 1px 0 var(--ecm-badge-highlight);
    transition:
        box-shadow var(--ecm-badge-motion-duration) ease,
        transform var(--ecm-badge-motion-duration) ease,
        border-color var(--ecm-badge-motion-duration) ease;
}

.ecometriq-badge:hover .ecometriq-badge__shell,
.ecometriq-badge:focus-visible .ecometriq-badge__shell {
    transform: translateY(-3px);
    box-shadow: var(--ecm-badge-shadow-hover), inset 0 1px 0 var(--ecm-badge-highlight);
    border-color: rgba(111, 231, 184, 0.36);
}

.ecometriq-badge__eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--ecm-badge-accent-text);
}

.ecometriq-badge__metric {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin-top: 5px;
}

.ecometriq-badge__metric-label {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--ecm-badge-muted);
}

.ecometriq-badge__metric-value {
    font-size: 27px;
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -0.015em;
    color: var(--ecm-badge-value);
}

.ecometriq-badge__metric-unit {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--ecm-badge-muted);
}

/* Sub-1000 precision variants. For values below 1000 the template emits two
   figures: --full (one decimal, e.g. 28,9) and --round (whole number, e.g. 29).
   The standard badge shows --full; the compact and mobile-edge badges show
   --round. Only one is ever visible. (For values >= 1000 the template emits a
   single figure with neither class, so none of these rules apply.) This toggles
   visibility only — it does not change layout, size, or placement. */
.ecometriq-badge__metric-figure--round {
    display: none;
}

.ecometriq-badge--size-compact .ecometriq-badge__metric-figure--full {
    display: none;
}

.ecometriq-badge--size-compact .ecometriq-badge__metric-figure--round {
    display: inline;
}

.ecometriq-badge__metric-window {
    margin-top: 3px;
    font-size: 11px;
    font-weight: 500;
    color: var(--ecm-badge-muted);
}

/* The short "Emissions" label is only used by the Edge Minimal mobile mode;
   it is hidden everywhere else (desktop and the mobile Card style). */
.ecometriq-badge__edge-label {
    display: none;
}

/* Standard: a tighter portrait seal (default width via token above). */
.ecometriq-badge--size-standard {
    --ecm-badge-width: 184px;
}

/* Compact: clearly narrower and tighter, still vertical and seal-like. */
.ecometriq-badge--size-compact {
    --ecm-badge-width: 152px;
    --ecm-badge-radius: 14px;
}

.ecometriq-badge--size-compact .ecometriq-badge__shell {
    gap: 5px;
    padding: 14px 12px;
}

.ecometriq-badge--size-compact .ecometriq-badge__eyebrow {
    font-size: 10px;
    letter-spacing: 0.06em;
}

.ecometriq-badge--size-compact .ecometriq-badge__metric-value {
    font-size: 22px;
}

@keyframes ecometriq-badge-in {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Mobile (small viewport). The seal stays portrait — never a full-width bar —
   capped to fit the screen, kept on the desktop side with a safe inset, while
   the mobile position setting controls the top/bottom edge (or hides it). */
@media (max-width: 640px) {
    .ecometriq-badge {
        width: min(184px, calc(100vw - 24px));
    }

    .ecometriq-badge--size-compact {
        width: min(152px, calc(100vw - 24px));
    }

    .ecometriq-badge--mobile-bottom {
        top: auto;
        bottom: var(--ecm-badge-mobile-offset-y, 16px);
    }

    .ecometriq-badge--mobile-top {
        bottom: auto;
        top: var(--ecm-badge-mobile-offset-y, 16px);
    }

    .ecometriq-badge--mobile-hidden {
        display: none;
    }

    /* Clamp the horizontal inset on small screens while keeping the chosen side,
       so a large desktop offset can't push the seal off-screen. (Card style.) */
    .ecometriq-badge--desktop-bottom-right,
    .ecometriq-badge--desktop-top-right {
        right: 12px;
        left: auto;
    }

    .ecometriq-badge--desktop-bottom-left,
    .ecometriq-badge--desktop-top-left {
        left: 12px;
        right: auto;
    }

    /* ---- Edge Minimal mobile mode -------------------------------------- */
    /* A small tab docked flush to a side of the viewport, much smaller and
       less intrusive than the card. The two-class selectors below outrank the
       single-class Card inset rules above, so the side override always wins. */
    .ecometriq-badge--mobile-style-edge {
        width: auto;
        max-width: 56vw;
    }

    .ecometriq-badge--mobile-style-edge.ecometriq-badge--mobile-side-right {
        right: 0;
        left: auto;
    }

    .ecometriq-badge--mobile-style-edge.ecometriq-badge--mobile-side-left {
        left: 0;
        right: auto;
    }

    .ecometriq-badge--mobile-style-edge .ecometriq-badge__shell {
        align-items: flex-start;
        gap: 1px;
        padding: 8px 11px;
        border-radius: 12px;
    }

    .ecometriq-badge--mobile-style-edge.ecometriq-badge--mobile-side-right .ecometriq-badge__shell {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        border-right: 0;
    }

    .ecometriq-badge--mobile-style-edge.ecometriq-badge--mobile-side-left .ecometriq-badge__shell {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        border-left: 0;
    }

    /* Minimal content: the "Emissions" label + the compact figure only. */
    .ecometriq-badge--mobile-style-edge .ecometriq-badge__eyebrow,
    .ecometriq-badge--mobile-style-edge .ecometriq-badge__metric-label,
    .ecometriq-badge--mobile-style-edge .ecometriq-badge__metric-window {
        display: none;
    }

    .ecometriq-badge--mobile-style-edge .ecometriq-badge__edge-label {
        display: block;
    }

    .ecometriq-badge--mobile-style-edge .ecometriq-badge__metric {
        align-items: flex-start;
        gap: 0;
        margin-top: 0;
    }

    .ecometriq-badge--mobile-style-edge .ecometriq-badge__edge-label {
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--ecm-badge-accent-text);
    }

    .ecometriq-badge--mobile-style-edge .ecometriq-badge__metric-value {
        font-size: 16px;
        line-height: 1.1;
    }

    .ecometriq-badge--mobile-style-edge .ecometriq-badge__metric-unit {
        font-size: 10px;
    }

    /* The edge tab is the most minimal surface, so it uses the rounded whole
       number (--round) even when the badge size is standard. */
    .ecometriq-badge--mobile-style-edge .ecometriq-badge__metric-figure--full {
        display: none;
    }

    .ecometriq-badge--mobile-style-edge .ecometriq-badge__metric-figure--round {
        display: inline;
    }

    /* Fallback: when there is no visible numeric metric, the edge tab shows the
       "EcoMetriq verified" line instead of an empty tab. */
    .ecometriq-badge--mobile-style-edge:not(.ecometriq-badge--has-metric) .ecometriq-badge__eyebrow {
        display: block;
    }

    .ecometriq-badge--mobile-style-edge:not(.ecometriq-badge--has-metric) .ecometriq-badge__edge-label {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ecometriq-badge {
        animation: none;
    }

    .ecometriq-badge__shell {
        transition: none;
    }

    .ecometriq-badge:hover .ecometriq-badge__shell,
    .ecometriq-badge:focus-visible .ecometriq-badge__shell {
        transform: none;
    }
}