/*!*****************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/@wordpress/scripts/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./src/loxone-serial-check.css ***!
  \*****************************************************************************************************************************************************************************************************************/
/* =========================================================================
   Loxone Serial Check — plugin-specific layout & component styles.
   All colors, radii and spacing use design tokens from _tokens.scss.
   Button, input, spinner and message styles are provided by @repo/ui.
   ========================================================================= */

/* ar-theme--light sets a background-color — keep it on the root for CSS vars
   but make the container itself transparent */

#loxone-serial-check-root {
    background: transparent;
}

.lxn-checker {
    font-family: inherit;
    color: var(--token-color-foreground-fg-1);
    max-width: 680px;
}

#loxone-serial-check-root input.text,
#loxone-serial-check-root input.title,
#loxone-serial-check-root input[type=email],
#loxone-serial-check-root input[type=password],
#loxone-serial-check-root input[type=tel],
#loxone-serial-check-root input[type=text],
#loxone-serial-check-root select,
#loxone-serial-check-root textarea{
    background-color: transparent !important;
    border: none !important;
}

/* ── Input row ─────────────────────────────────────────────────────────── */

.lxn-input-row {
    display: flex;
    align-items: flex-start;
    gap: var(--token-spacing-all-xs);
}

.lxn-input-wrap {
    flex: 1;
    min-width: 0;
}

/* ── Input hint ────────────────────────────────────────────────────────── */

.lxn-input-hint {
    margin: var(--token-spacing-all-xxs) 0 0;
    font-size: 0.8rem;
    color: var(--token-color-foreground-fg-2);
}

/* ── List wrap ─────────────────────────────────────────────────────────── */

.lxn-list-wrap {
    margin-top: var(--token-spacing-all-base);
}

.lxn-list-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--token-spacing-all-xs);
    font-size: 0.85rem;
    color: var(--token-color-foreground-fg-2);
}

/* ── Chips ─────────────────────────────────────────────────────────────── */

.lxn-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--token-spacing-all-xs);
    list-style: none;
    margin: 0;
    padding: 0;
}

.lxn-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--token-spacing-all-xxs);
    height: 34px;
    padding: 0 var(--token-spacing-all-xs) 0 var(--token-spacing-all-s);
    border-radius: var(--token-corner-radius-all-max);
    background: var(--token-color-message-info-bg);
    color: var(--token-color-foreground-info-fg);
    font-size: 0.875rem;
    font-weight: 600;
    font-family: 'Courier New', monospace;
    border: 1px solid var(--token-color-stroke-info-sk);
}

/* Scale down the IconButton inside chips to fit the pill */

.lxn-chip .ar-ic-btn {
    width: 24px;
    height: 24px;
    min-width: unset;
    flex-shrink: 0;
}

/* ── Check button wrapper ──────────────────────────────────────────────── */

.lxn-check-btn-wrap {
    margin-top: var(--token-spacing-all-base);
}

/* ── Results ───────────────────────────────────────────────────────────── */

.lxn-results {
    margin-top: var(--token-spacing-all-m);
    display: flex;
    flex-direction: column;
    gap: var(--token-spacing-all-base);
}

/* Result item cards */

.lxn-res-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--token-spacing-all-s);
}

.lxn-res-item {
    display: flex;
    align-items: flex-start;
    gap: var(--token-spacing-all-s);
    padding: var(--token-spacing-all-s) var(--token-spacing-all-base);
    border-radius: var(--token-corner-radius-cards);
    background: var(--token-color-background-bg-1-hover);
    box-shadow: 0 var(--token-shadow-xs) var(--token-shadow-m) var(--token-color-shadow-wide);
    border-left: 4px solid transparent;
}

.lxn-res-item--affected { border-left-color: var(--token-color-foreground-warning-fg); }

.lxn-res-item--clear    { border-left-color: var(--token-color-foreground-success-fg); }

.lxn-res-item__icon {
    flex-shrink: 0;
    margin-top: 2px;
    line-height: 0;
}

.lxn-res-item--affected .lxn-res-item__icon { color: var(--token-color-foreground-warning-fg); }

.lxn-res-item--clear    .lxn-res-item__icon { color: var(--token-color-foreground-success-fg); }

.lxn-res-item__body {
    display: flex;
    flex-direction: column;
    gap: var(--token-spacing-all-xxxs);
    flex: 1;
    min-width: 0;
}

.lxn-res-item__top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--token-spacing-all-s);
    min-width: 0;
}

.lxn-res-item__product {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--token-color-foreground-fg-1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lxn-res-item__serial {
    font-size: 0.85rem;
    font-family: 'Courier New', monospace;
    color: var(--token-color-foreground-fg-2);
    flex-shrink: 0;
}

.lxn-res-item__note {
    font-size: 0.85rem;
    margin-top: var(--token-spacing-all-xxxs);
}

.lxn-res-item--affected .lxn-res-item__note { color: var(--token-color-foreground-warning-fg-pressed); }

.lxn-res-item--clear    .lxn-res-item__note { color: var(--token-color-foreground-success-fg); }

/* Action block */

.lxn-action-block {
    padding: var(--token-spacing-all-l) var(--token-spacing-all-m);
    border-radius: var(--token-corner-radius-cards);
    border: 1.5px solid var(--token-color-stroke-warning-sk);
    background: var(--token-color-message-alert-bg);
}

.lxn-action-block h3 {
    margin: 0 0 var(--token-spacing-all-xs);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--token-color-foreground-warning-fg-pressed);
}

.lxn-action-block p {
    margin: 0 0 var(--token-spacing-all-base);
    font-size: 0.95rem;
    color: var(--token-color-foreground-fg-1);
    line-height: 1.55;
}

.lxn-action-block__cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--token-spacing-all-s);
    align-items: center;
}

.lxn-action-block__hint {
    margin: var(--token-spacing-all-s) 0 0;
    font-size: 0.82rem;
    color: var(--token-color-foreground-fg-2);
}

/* ── Modal / overlay ───────────────────────────────────────────────────── */

.lxn-overlay {
    position: fixed;
    inset: 0;
    background: var(--token-overlay-overlay-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: var(--token-spacing-all-base);
    box-sizing: border-box;
}

.lxn-modal {
    background: var(--token-color-background-bg-1-hover);
    border-radius: var(--token-corner-radius-cards);
    width: 100%;
    max-width: 560px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 var(--token-shadow-l) var(--token-shadow-xl) var(--token-color-shadow-wide);
    overflow: hidden;
}

.lxn-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--token-spacing-all-m) var(--token-spacing-all-m) var(--token-spacing-all-base);
    border-bottom: 1px solid var(--token-color-stroke-sk-2);
}

.lxn-modal__head h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--token-color-foreground-fg-1);
}

.lxn-modal__body {
    overflow-y: auto;
    padding: var(--token-spacing-all-m);
    display: flex;
    flex-direction: column;
    gap: var(--token-spacing-all-m);
    flex: 1;
}

.lxn-modal__foot {
    padding: var(--token-spacing-all-base) var(--token-spacing-all-m);
    border-top: 1px solid var(--token-color-stroke-sk-2);
    display: flex;
    gap: var(--token-spacing-all-s);
    justify-content: flex-end;
}

/* RMA form */

.lxn-rma-form {
    display: flex;
    flex-direction: column;
    gap: var(--token-spacing-all-xs);
}

/* ZIP stays narrow, city takes remaining space */

.lxn-sender-form__row {
    display: flex;
    gap: var(--token-spacing-all-xs);
}

.lxn-sender-form__row > .ar-input-wrapper:first-child { flex: 0 0 110px; }

.lxn-sender-form__row > .ar-input-wrapper:last-child  { flex: 1; }

/* Affected serials list inside RMA modal */

.lxn-rma-serials {
    display: flex;
    flex-direction: column;
    gap: var(--token-spacing-all-xxs);
}

.lxn-rma-serials__title {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--token-color-foreground-fg-2);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.lxn-rma-serials__list {
    margin: 0;
    padding-left: var(--token-spacing-all-base);
    font-family: 'Courier New', monospace;
    font-size: 0.875rem;
    color: var(--token-color-foreground-fg-1);
    line-height: 1.6;
}

/* RMA reference on success */

.lxn-rma-ref {
    display: flex;
    flex-direction: column;
    gap: var(--token-spacing-all-xxs);
    padding: var(--token-spacing-all-s) var(--token-spacing-all-base);
    border-radius: var(--token-corner-radius-all-base);
    background: var(--token-color-message-success-bg);
}

.lxn-rma-ref__label {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--token-color-foreground-fg-2);
}

.lxn-rma-ref__value {
    font-family: 'Courier New', monospace;
    font-size: 1rem;
    font-weight: 700;
    color: var(--token-color-foreground-success-fg);
}

/* ── Not-affected section ──────────────────────────────────────────────── */

.lxn-clear-section {
    display: flex;
    flex-direction: column;
    gap: var(--token-spacing-all-xs);
}

.lxn-clear-section__title {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--token-color-foreground-success-fg);
}

.lxn-clear-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--token-spacing-all-xxs) var(--token-spacing-all-s);
}

.lxn-clear-item {
    font-family: 'Courier New', monospace;
    font-size: 0.875rem;
    color: var(--token-color-foreground-fg-2);
}

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

@media (max-width: 480px) {
    .lxn-input-row { flex-direction: column; }
    .lxn-input-row .ar-btn { width: 100%; }
    .lxn-action-block__cta-row { flex-direction: column; align-items: stretch; }
    .lxn-sender-form__row { flex-direction: column; }
    .lxn-sender-form__row > .ar-input-wrapper:first-child { flex: unset; }
}


/*# sourceMappingURL=serialCheck.css.map*/