/* ============================================================================
   EYZ Pollenkoll — Divi-armerat
   ----------------------------------------------------------------------------
   Allt kritiskt har !important för att slippa krocka med Divi:s globala input-
   och knapp-stilar. Använd CSS-variablerna under .eyz-pollen för att finjustera
   färger från temat utan att ändra denna fil.
   ============================================================================ */

@property --eyz-pct {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 0%;
}

.eyz-pollen,
.eyz-pollen * {
    box-sizing: border-box !important;
}

.eyz-pollen {
    /* === Designtokens === */
    --eyz-bg: #ffffff;
    --eyz-surface: #f6f9fa;
    --eyz-surface-2: #eef3f5;
    --eyz-text: #0e1d2a;
    --eyz-muted: #5a6a78;
    --eyz-border: #e1e7ec;
    --eyz-border-strong: #c9d3db;
    --eyz-accent: #2d7d6e;
    --eyz-accent-2: #1e5a4f;
    --eyz-accent-soft: #e6f1ee;
    --eyz-radius: 18px;
    --eyz-radius-md: 14px;
    --eyz-radius-sm: 10px;
    --eyz-shadow-sm: 0 1px 2px rgba(13, 27, 42, 0.04);
    --eyz-shadow: 0 1px 3px rgba(13, 27, 42, 0.06), 0 8px 24px rgba(13, 27, 42, 0.05);
    --eyz-shadow-lg: 0 4px 12px rgba(13, 27, 42, 0.08), 0 24px 48px rgba(13, 27, 42, 0.06);

    /* Pollennivåer 0–7 */
    --eyz-lvl0: #d9e0e6;
    --eyz-lvl1: #9bc46a;
    --eyz-lvl2: #c5cf5a;
    --eyz-lvl3: #efc451;
    --eyz-lvl4: #f0a838;
    --eyz-lvl5: #ec8027;
    --eyz-lvl6: #d85d2a;
    --eyz-lvl7: #b83a2a;

    display: block !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 40px 44px !important;
    background: var(--eyz-bg) !important;
    border: 1px solid var(--eyz-border) !important;
    border-radius: var(--eyz-radius) !important;
    color: var(--eyz-text) !important;
    font-family: inherit !important;
    line-height: 1.5 !important;
    box-shadow: var(--eyz-shadow) !important;
}

/* ============================================================================
   Header
   ============================================================================ */
.eyz-pollen .eyz-pollen__header {
    margin: 0 0 28px !important;
    padding: 0 !important;
}
.eyz-pollen .eyz-pollen__title {
    margin: 0 0 6px !important;
    padding: 0 !important;
    font-size: 1.85rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    color: var(--eyz-text) !important;
    letter-spacing: -0.015em !important;
}
.eyz-pollen .eyz-pollen__city {
    font-weight: 500 !important;
    color: var(--eyz-muted) !important;
}
.eyz-pollen .eyz-pollen__subtitle {
    margin: 0 !important;
    padding: 0 !important;
    color: var(--eyz-muted) !important;
    font-size: 1rem !important;
    font-weight: 400 !important;
}

/* ============================================================================
   Sökfält — total Divi-armering
   ============================================================================ */
.eyz-pollen .eyz-pollen__search {
    position: relative !important;
    margin: 0 0 24px !important;
    padding: 0 !important;
    max-width: 560px !important;
    width: 100% !important;
}
.eyz-pollen .eyz-pollen__search-wrap {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}
.eyz-pollen .eyz-pollen__search-icon {
    position: absolute !important;
    left: 20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: var(--eyz-muted) !important;
    pointer-events: none !important;
    z-index: 2 !important;
    width: 20px !important;
    height: 20px !important;
}
.eyz-pollen input.eyz-pollen__input,
.eyz-pollen #eyz-pollen-search,
.eyz-pollen [type="text"].eyz-pollen__input {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 18px 22px 18px 56px !important;
    font-family: inherit !important;
    font-size: 1.02rem !important;
    font-weight: 400 !important;
    font-style: normal !important;
    line-height: 1.4 !important;
    letter-spacing: normal !important;
    text-align: left !important;
    text-transform: none !important;
    text-shadow: none !important;
    color: var(--eyz-text) !important;
    background: var(--eyz-bg) !important;
    background-color: var(--eyz-bg) !important;
    background-image: none !important;
    border: 1.5px solid var(--eyz-border) !important;
    border-radius: var(--eyz-radius-md) !important;
    box-shadow: var(--eyz-shadow-sm) !important;
    outline: none !important;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease !important;
}
.eyz-pollen input.eyz-pollen__input::placeholder,
.eyz-pollen #eyz-pollen-search::placeholder {
    color: var(--eyz-muted) !important;
    opacity: 1 !important;
    font-style: normal !important;
}
.eyz-pollen input.eyz-pollen__input:focus,
.eyz-pollen #eyz-pollen-search:focus {
    border-color: var(--eyz-accent) !important;
    box-shadow: 0 0 0 4px var(--eyz-accent-soft) !important;
    background: var(--eyz-bg) !important;
}

/* Sökförslag */
.eyz-pollen .eyz-pollen__suggestions {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: calc(100% + 6px) !important;
    z-index: 50 !important;
    max-height: 320px !important;
    overflow-y: auto !important;
    margin: 0 !important;
    padding: 6px !important;
    list-style: none !important;
    background: var(--eyz-bg) !important;
    border: 1px solid var(--eyz-border) !important;
    border-radius: var(--eyz-radius-md) !important;
    box-shadow: var(--eyz-shadow-lg) !important;
}
.eyz-pollen .eyz-pollen__suggestions[hidden] { display: none !important; }
.eyz-pollen .eyz-pollen__suggestion {
    display: block !important;
    margin: 0 !important;
    padding: 12px 14px !important;
    border-radius: var(--eyz-radius-sm) !important;
    cursor: pointer !important;
    color: var(--eyz-text) !important;
    font-size: 0.98rem !important;
    line-height: 1.4 !important;
    list-style: none !important;
    transition: background 0.12s, color 0.12s !important;
}
.eyz-pollen .eyz-pollen__suggestion:hover,
.eyz-pollen .eyz-pollen__suggestion.is-active {
    background: var(--eyz-accent-soft) !important;
    color: var(--eyz-accent-2) !important;
}
.eyz-pollen .eyz-pollen__suggestion--empty {
    color: var(--eyz-muted) !important;
    cursor: default !important;
}
.eyz-pollen .eyz-pollen__suggestion--empty:hover {
    background: transparent !important;
    color: var(--eyz-muted) !important;
}
.eyz-pollen .eyz-pollen__suggestion--loading {
    color: var(--eyz-muted) !important;
    cursor: default !important;
    font-style: italic !important;
}
.eyz-pollen .eyz-pollen__suggestion--nearest {
    margin-top: 4px !important;
    padding: 12px 14px !important;
    border-top: 1px solid var(--eyz-border) !important;
}
.eyz-pollen .eyz-pollen__suggestion-nearest-line {
    font-size: 0.98rem !important;
    font-weight: 500 !important;
}
.eyz-pollen .eyz-pollen__suggestion-nearest-dist {
    color: var(--eyz-muted) !important;
    font-weight: 400 !important;
    font-size: 0.85rem !important;
    margin-left: 4px !important;
}
.eyz-pollen .eyz-pollen__suggestion-nearest-hint {
    font-size: 0.82rem !important;
    color: var(--eyz-muted) !important;
    margin-top: 2px !important;
}

/* ============================================================================
   Nearest-banner
   ============================================================================ */
.eyz-pollen .eyz-pollen__nearest {
    margin: 0 0 24px !important;
    padding: 16px 20px !important;
    background: var(--eyz-accent-soft) !important;
    border: 1px solid rgba(45, 125, 110, 0.2) !important;
    border-left: 4px solid var(--eyz-accent) !important;
    border-radius: var(--eyz-radius-md) !important;
    font-size: 0.96rem !important;
    color: var(--eyz-text) !important;
    line-height: 1.5 !important;
}
.eyz-pollen .eyz-pollen__nearest[hidden] { display: none !important; }
.eyz-pollen .eyz-pollen__nearest strong {
    color: var(--eyz-accent-2) !important;
    font-weight: 600 !important;
}

/* ============================================================================
   Status
   ============================================================================ */
.eyz-pollen .eyz-pollen__status {
    margin: 0 !important;
    padding: 40px 24px !important;
    background: var(--eyz-surface) !important;
    border-radius: var(--eyz-radius-md) !important;
    color: var(--eyz-muted) !important;
    text-align: center !important;
}
.eyz-pollen .eyz-pollen__status[hidden] { display: none !important; }
.eyz-pollen .eyz-pollen__status p { margin: 0 !important; padding: 0 !important; }
.eyz-pollen .eyz-pollen__status--error {
    background: #fdf2f2 !important;
    color: #9b2c2c !important;
}

/* ============================================================================
   Innehåll
   ============================================================================ */
.eyz-pollen .eyz-pollen__content[hidden] { display: none !important; }

/* Tabs som segmented control */
.eyz-pollen .eyz-pollen__tabs {
    display: inline-flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    margin: 0 0 28px !important;
    padding: 5px !important;
    background: var(--eyz-surface) !important;
    border-radius: var(--eyz-radius-md) !important;
    border: 1px solid var(--eyz-border) !important;
}
.eyz-pollen button.eyz-pollen__tab,
.eyz-pollen .eyz-pollen__tab {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 2px !important;
    margin: 0 !important;
    padding: 8px 22px !important;
    border: none !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    color: var(--eyz-muted) !important;
    font-family: inherit !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    cursor: pointer !important;
    border-radius: var(--eyz-radius-sm) !important;
    box-shadow: none !important;
    text-shadow: none !important;
    transition: color 0.18s, background 0.2s, box-shadow 0.2s !important;
    min-width: 88px !important;
}
.eyz-pollen .eyz-pollen__tab-day {
    font-size: 0.92rem !important;
    font-weight: 600 !important;
    line-height: 1.1 !important;
}
.eyz-pollen .eyz-pollen__tab-date {
    font-size: 0.74rem !important;
    font-weight: 400 !important;
    opacity: 0.75 !important;
    line-height: 1.1 !important;
}
.eyz-pollen .eyz-pollen__tab:hover { color: var(--eyz-text) !important; }
.eyz-pollen .eyz-pollen__tab.is-active {
    background: var(--eyz-bg) !important;
    color: var(--eyz-text) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

/* Chips */
.eyz-pollen .eyz-pollen__chips {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
    gap: 24px !important;
    margin: 0 0 24px !important;
    padding: 0 !important;
}
.eyz-pollen .eyz-pollen__chip {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 6px !important;
    text-align: center !important;
}
.eyz-pollen .eyz-pollen__chips-empty {
    grid-column: 1 / -1 !important;
    margin: 0 !important;
    padding: 32px !important;
    text-align: center !important;
    color: var(--eyz-muted) !important;
    background: var(--eyz-surface) !important;
    border-radius: var(--eyz-radius-md) !important;
}

/* Donut */
.eyz-pollen .eyz-pollen__donut {
    --eyz-pct: 0%;
    --eyz-donut-color: var(--eyz-lvl0);
    position: relative !important;
    width: 104px !important;
    height: 104px !important;
    border-radius: 50% !important;
    background: conic-gradient(var(--eyz-donut-color) var(--eyz-pct), var(--eyz-lvl0) 0) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: --eyz-donut-color 320ms ease !important;
}
.eyz-pollen .eyz-pollen__donut-inner {
    position: absolute !important;
    inset: 10px !important;
    border-radius: 50% !important;
    background: var(--eyz-bg) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--eyz-donut-color) !important;
}
.eyz-pollen .eyz-pollen__donut--lvl0 { --eyz-donut-color: var(--eyz-lvl0); }
.eyz-pollen .eyz-pollen__donut--lvl1 { --eyz-donut-color: var(--eyz-lvl1); }
.eyz-pollen .eyz-pollen__donut--lvl2 { --eyz-donut-color: var(--eyz-lvl2); }
.eyz-pollen .eyz-pollen__donut--lvl3 { --eyz-donut-color: var(--eyz-lvl3); }
.eyz-pollen .eyz-pollen__donut--lvl4 { --eyz-donut-color: var(--eyz-lvl4); }
.eyz-pollen .eyz-pollen__donut--lvl5 { --eyz-donut-color: var(--eyz-lvl5); }
.eyz-pollen .eyz-pollen__donut--lvl6 { --eyz-donut-color: var(--eyz-lvl6); }
.eyz-pollen .eyz-pollen__donut--lvl7 { --eyz-donut-color: var(--eyz-lvl7); }
.eyz-pollen .eyz-pollen__chip-name {
    margin: 0 !important;
    padding: 0 !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    color: var(--eyz-text) !important;
}
.eyz-pollen .eyz-pollen__chip-level {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0.84rem !important;
    color: var(--eyz-muted) !important;
}

/* Pollentyper utan rapport */
.eyz-pollen .eyz-pollen__missing { margin: 16px 0 8px !important; }
.eyz-pollen .eyz-pollen__missing-label {
    margin: 20px 0 10px !important;
    padding: 0 !important;
    font-size: 0.9rem !important;
    color: var(--eyz-muted) !important;
}
.eyz-pollen .eyz-pollen__missing-list {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.eyz-pollen .eyz-pollen__missing-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 0.86rem !important;
    color: var(--eyz-muted) !important;
}

/* ============================================================================
   Produktrekommendation
   ============================================================================ */
.eyz-pollen .eyz-pollen__recommendation {
    margin: 12px 0 !important;
    padding: 0 !important;
}
.eyz-pollen .eyz-pollen__recommendation[hidden] { display: none !important; }
.eyz-pollen .eyz-pollen__rec {
    margin: 0 !important;
    padding: 24px 26px !important;
    background: var(--eyz-accent-soft) !important;
    border: 1px solid rgba(45, 125, 110, 0.15) !important;
    border-left: 4px solid var(--eyz-accent) !important;
    border-radius: var(--eyz-radius-md) !important;
}
.eyz-pollen .eyz-pollen__rec--lvl5,
.eyz-pollen .eyz-pollen__rec--lvl6,
.eyz-pollen .eyz-pollen__rec--lvl7 {
    border-left-color: var(--eyz-lvl6) !important;
    background: #fdf3ec !important;
    border-color: rgba(216, 93, 42, 0.2) !important;
}
.eyz-pollen .eyz-pollen__rec--lvl3,
.eyz-pollen .eyz-pollen__rec--lvl4 {
    border-left-color: var(--eyz-lvl3) !important;
    background: #fdf8e8 !important;
    border-color: rgba(239, 196, 81, 0.3) !important;
}
.eyz-pollen .eyz-pollen__rec-head {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 0 8px !important;
}
.eyz-pollen .eyz-pollen__rec-dot {
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    background: var(--eyz-accent) !important;
}
.eyz-pollen .eyz-pollen__rec--lvl5 .eyz-pollen__rec-dot,
.eyz-pollen .eyz-pollen__rec--lvl6 .eyz-pollen__rec-dot,
.eyz-pollen .eyz-pollen__rec--lvl7 .eyz-pollen__rec-dot { background: var(--eyz-lvl6) !important; }
.eyz-pollen .eyz-pollen__rec--lvl3 .eyz-pollen__rec-dot,
.eyz-pollen .eyz-pollen__rec--lvl4 .eyz-pollen__rec-dot { background: var(--eyz-lvl4) !important; }
.eyz-pollen .eyz-pollen__rec-title {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: var(--eyz-text) !important;
}
.eyz-pollen .eyz-pollen__rec-body {
    margin: 4px 0 16px !important;
    padding: 0 !important;
    color: var(--eyz-text) !important;
    font-size: 0.95rem !important;
    line-height: 1.55 !important;
}
.eyz-pollen .eyz-pollen__rec-products {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
}
.eyz-pollen a.eyz-pollen__rec-product,
.eyz-pollen .eyz-pollen__rec-product {
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 12px 18px !important;
    background: var(--eyz-bg) !important;
    border: 1px solid var(--eyz-border) !important;
    border-radius: var(--eyz-radius-sm) !important;
    text-decoration: none !important;
    color: var(--eyz-text) !important;
    font-size: 0.95rem !important;
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s !important;
    box-shadow: var(--eyz-shadow-sm) !important;
}
.eyz-pollen a.eyz-pollen__rec-product:hover {
    border-color: var(--eyz-accent) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--eyz-shadow) !important;
    color: var(--eyz-text) !important;
}
.eyz-pollen .eyz-pollen__rec-product-name { font-weight: 600 !important; }
.eyz-pollen .eyz-pollen__rec-product-desc { color: var(--eyz-muted) !important; font-size: 0.86rem !important; }
.eyz-pollen .eyz-pollen__rec-product-arrow { color: var(--eyz-accent) !important; font-size: 1.1rem !important; }

/* ============================================================================
   Historik-graf
   ============================================================================ */
.eyz-pollen .eyz-pollen__history {
    margin: 32px 0 0 !important;
    padding: 24px 0 0 !important;
    border-top: 1px solid var(--eyz-border) !important;
}
.eyz-pollen .eyz-pollen__history[hidden] { display: none !important; }
.eyz-pollen .eyz-pollen__history-title {
    margin: 0 0 14px !important;
    padding: 0 !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: var(--eyz-text) !important;
}
.eyz-pollen .eyz-pollen__history-legend {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
}
.eyz-pollen .eyz-pollen__history-legend-item {
    --eyz-series-color: var(--eyz-accent);
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 0.86rem !important;
    color: var(--eyz-muted) !important;
}
.eyz-pollen .eyz-pollen__history-legend-dot {
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    background: var(--eyz-series-color) !important;
}
.eyz-pollen .eyz-pollen__history-chart { width: 100% !important; }
.eyz-pollen .eyz-pollen__history-svg {
    width: 100% !important;
    height: auto !important;
    display: block !important;
}
.eyz-pollen .eyz-pollen__history-grid {
    stroke: var(--eyz-border) !important;
    stroke-width: 1 !important;
    stroke-dasharray: 2 3 !important;
    fill: none !important;
}
.eyz-pollen .eyz-pollen__history-ylabel,
.eyz-pollen .eyz-pollen__history-xlabel {
    fill: var(--eyz-muted) !important;
    font-size: 11px !important;
    font-family: inherit !important;
}
.eyz-pollen .eyz-pollen__history-ylabel { text-anchor: end !important; }
.eyz-pollen .eyz-pollen__history-xlabel { text-anchor: middle !important; }

/* ============================================================================
   Källa
   ============================================================================ */
.eyz-pollen .eyz-pollen__source {
    margin: 32px 0 0 !important;
    padding: 18px 0 0 !important;
    border-top: 1px solid var(--eyz-border) !important;
    color: var(--eyz-muted) !important;
    font-size: 0.82rem !important;
}

/* ============================================================================
   Spinner + skeleton
   ============================================================================ */
.eyz-pollen .eyz-pollen__spinner {
    display: inline-block !important;
    width: 18px !important;
    height: 18px !important;
    margin-right: 12px !important;
    vertical-align: -4px !important;
    border: 2.5px solid var(--eyz-border) !important;
    border-top-color: var(--eyz-accent) !important;
    border-radius: 50% !important;
    animation: eyz-spin 0.8s linear infinite !important;
}
@keyframes eyz-spin { to { transform: rotate(360deg); } }
@keyframes eyz-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.eyz-pollen .eyz-pollen__loading-bar {
    grid-column: 1 / -1 !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
    color: var(--eyz-muted) !important;
    font-size: 0.95rem !important;
}
.eyz-pollen .eyz-pollen__skel-donut,
.eyz-pollen .eyz-pollen__skel-line {
    background: linear-gradient(90deg, var(--eyz-surface) 0%, var(--eyz-border) 50%, var(--eyz-surface) 100%) !important;
    background-size: 200% 100% !important;
    animation: eyz-shimmer 1.4s linear infinite !important;
}
.eyz-pollen .eyz-pollen__skel-donut { width: 104px !important; height: 104px !important; border-radius: 50% !important; }
.eyz-pollen .eyz-pollen__skel-line  { height: 10px !important; border-radius: 5px !important; }
.eyz-pollen .eyz-pollen__skel-line--name  { width: 70% !important; }
.eyz-pollen .eyz-pollen__skel-line--level { width: 50% !important; }

/* ============================================================================
   Responsivt
   ============================================================================ */
@media (max-width: 720px) {
    .eyz-pollen { padding: 28px 22px !important; }
    .eyz-pollen .eyz-pollen__title { font-size: 1.45rem !important; }
    .eyz-pollen .eyz-pollen__donut,
    .eyz-pollen .eyz-pollen__skel-donut { width: 88px !important; height: 88px !important; }
    .eyz-pollen .eyz-pollen__chips { gap: 16px !important; }
    .eyz-pollen input.eyz-pollen__input { padding: 16px 18px 16px 50px !important; font-size: 1rem !important; }
}

@media (prefers-reduced-motion: reduce) {
    .eyz-pollen *,
    .eyz-pollen *::before,
    .eyz-pollen *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}