/******** search input glow ********/

/* --- normal primary glow --- */
.c4s-quickorder-input-glow {
    animation: c4s-primary-glow-normal 2.6s ease-in-out infinite;
    box-shadow: 0 0 12px 4px color-mix(in srgb, var(--bs-primary) 55%, transparent);
    transition: box-shadow 0.35s ease;
}
/* respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .c4s-quickorder-input-glow,
    .c4s-quickorder-input-glow-strong,
    .c4s-quickorder-input-glow-error {
        animation: none;
        transition: none;
    }
}

/* --- stronger glow on multi input --- */
.c4s-quickorder-input-glow-strong {
    animation: c4s-primary-glow-strong 2.2s ease-in-out infinite;
    box-shadow: 0 0 20px 9px color-mix(in srgb, var(--bs-primary) 70%, transparent);
    transition: box-shadow 0.35s ease;
}

/* --- soft fading of the glow (instead of disappearing abruptly) --- */
.c4s-quickorder-input-glow-fadeout {
    animation: c4s-primary-glow-fadeout 0.6s ease forwards;
}

/* fadeout animation */
@keyframes c4s-primary-glow-fadeout {
    from {
        box-shadow: 0 0 12px 4px color-mix(in srgb, var(--bs-primary) 60%, transparent);
        opacity: 1;
    }
    to {
        box-shadow: 0 0 0 0 transparent;
        opacity: 1;
    }
}

/* --- error glow remains red, but softer/more interactive --- */
.c4s-quickorder-input-glow-error {
    animation: c4s-error-glow 1.2s ease-in-out infinite;
    box-shadow: 0 0 16px 8px rgba(220, 20, 60, 0.75);
    transition: box-shadow 0.2s ease;
}

/* --- animations primary --- */
@keyframes c4s-primary-glow-normal {
    0%   { box-shadow: 0 0  8px 3px color-mix(in srgb, var(--bs-primary) 35%, transparent); }
    50%  { box-shadow: 0 0 14px 6px color-mix(in srgb, var(--bs-primary) 70%, transparent); }
    100% { box-shadow: 0 0  8px 3px color-mix(in srgb, var(--bs-primary) 35%, transparent); }
}
@keyframes c4s-primary-glow-strong {
    0%   { box-shadow: 0 0 12px 5px color-mix(in srgb, var(--bs-primary) 40%, transparent); }
    50%  { box-shadow: 0 0 22px 12px color-mix(in srgb, var(--bs-primary) 85%, transparent); }
    100% { box-shadow: 0 0 12px 5px color-mix(in srgb, var(--bs-primary) 40%, transparent); }
}

/* gently breathing error glow */
@keyframes c4s-error-glow {
    0%   { box-shadow: 0 0 10px 5px rgba(220, 20, 60, 0.40); }
    50%  { box-shadow: 0 0 18px 10px rgba(220, 20, 60, 0.85); }
    100% { box-shadow: 0 0 10px 5px rgba(220, 20, 60, 0.40); }
}

/******** article table ********/

/* Remove all default table borders */
.c4s-quickorder-table th,
.c4s-quickorder-table td {
    border: 0;
}

/* Only header bottom border */
.c4s-quickorder-table thead th {
    border-bottom: 1px solid var(--bs-border-color);
}

/* Only footer top border (when price is enabled) */
.c4s-quickorder-table tfoot td {
    border-top: 1px solid var(--bs-border-color);
}

.c4s-quickorder-table .c4s-quickorder-col-amount input {
    max-width: 80px;
    width: 100%;
    display: inline-block;
}

.c4s-quickorder-table .c4s-quickorder-col-price span,
.c4s-quickorder-table .c4s-quickorder-col-totalprice span {
    min-width: 80px;
    width: 100%;
    display: inline-block;
}

/* --- responsive stacked table (no horizontal scroll) --- */
@media (max-width: 767.98px) {
    /* Hide the header on small viewports */
    .c4s-quickorder-table thead {
        display: none;
    }

    /* Turn table structure into block layout */
    .c4s-quickorder-table,
    .c4s-quickorder-table tbody,
    .c4s-quickorder-table tr,
    .c4s-quickorder-table td {
        display: block;
        width: 100%;
    }

    /* Each row becomes a "card" */
    .c4s-quickorder-table tbody tr.c4s-quickorder-row {
        position: relative;
        border: 1px solid var(--bs-border-color);
        padding: .5rem .75rem;
        margin-bottom: .5rem;
    }

    /* Each cell becomes a label/value row */
    .c4s-quickorder-table td {
        padding: .35rem 0;
        display: flex;
        gap: .75rem;
        align-items: baseline;
        justify-content: space-between;
    }

    /* The label comes from data-label set in Twig */
    .c4s-quickorder-table td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--bs-secondary-color);
        flex: 0 0 auto;
        max-width: 48%;
    }

    /* value area: always push to the right and align right */
    .c4s-quickorder-table td > * {
        flex: 1 1 auto;
        min-width: 0;
        margin-left: auto;
        text-align: right;
    }

    .c4s-quickorder-table td input,
    .c4s-quickorder-table td select {
        text-align: right;
    }

    /*  avoid odd wrapping in value spans */
    .c4s-quickorder-table td > span,
    .c4s-quickorder-table td > a,
    .c4s-quickorder-table td > div {
        min-width: 0;
    }

    /* Make amount input comfortable */
    .c4s-quickorder-table .c4s-quickorder-col-amount input {
        max-width: 140px;
        margin-left: auto;
    }

    /* Keep remove button aligned right */
    .c4s-quickorder-table td[data-label*="REMOVE"],
    .c4s-quickorder-table td:last-child {
        justify-content: flex-end;
    }
    .c4s-quickorder-table td:last-child::before {
        content: "";
    }

    /* allow long titles to wrap nicely */
    .c4s-quickorder-table .c4s-quickorder-col-title span {
        white-space: normal;
        word-break: break-word;
        text-align: right;
    }

    /* Remove cell should behave like a footer action row */
    .c4s-quickorder-table tbody tr.c4s-quickorder-row td:last-child {
        position: static;
        width: 100%;
        padding: .5rem 0 0 0;
        margin-top: .35rem;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        border-top: 1px solid var(--bs-border-color);
    }

    .c4s-quickorder-table tbody tr.c4s-quickorder-row.table-danger td:last-child {
        background-color: inherit;
    }

    /* No label for the footer action row */
    .c4s-quickorder-table tbody tr.c4s-quickorder-row td:last-child::before {
        display: none;
        content: none;
    }

    /* Button styling so it looks intentional (not floating) */
    .c4s-quickorder-table tbody tr.c4s-quickorder-row td:last-child [data-role="row-remove"] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: .35rem;
    }

    /* Remove the default footer top border on mobile (we render it as a card) */
    .c4s-quickorder-table tfoot td {
        border-top: 0;
    }

    /* Disable stacked-table pseudo labels inside the summary */
    .c4s-quickorder-table tfoot td::before {
        display: none;
        content: none;
    }

    /* Summary (tfoot) as its own card */
    .c4s-quickorder-table tfoot {
        display: block;
        margin-top: .75rem;
    }

    .c4s-quickorder-table tfoot tr {
        display: flex;
        align-items: center;
        justify-content: space-between;
        border: 1px solid var(--bs-border-color);
        padding: .5rem .75rem;
    }

    /* Hide the empty last cell in the summary row */
    .c4s-quickorder-table tfoot tr td:last-child {
        display: none;
    }

    /* Label left, value right, both in one line */
    .c4s-quickorder-table tfoot tr td {
        display: block;
        padding: 0;
        margin: 0;
        width: auto;
    }

    .c4s-quickorder-table tfoot tr td[data-role="summary-total"] {
        text-align: right;
        margin-left: auto;
        white-space: nowrap;
    }
}