/*
 * The price-contribution dialogs and the pages around them.
 *
 * Loaded beside product-contribute.js. The .lgpc-* rules style markup that
 * lives inside a SweetAlert2 dialog, so they are deliberately specific
 * enough not to be flattened by swal2's own defaults and deliberately
 * scoped enough not to leak into every other dialog on the site.
 */

.lgpc {
    text-align: left;
    font-size: .95rem;
}

.lgpc-head {
    margin: 0 0 .5rem;
    font-weight: 600;
}

.lgpc-code {
    margin: 0 0 .75rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .82rem;
    letter-spacing: .04em;
    color: #6c757d;
}

.lgpc-avg {
    margin: 0 0 1rem;
    padding: .6rem .75rem;
    border-radius: .5rem;
    background: #eef6ff;
    color: #1c3d5a;
}

.lgpc-avg span {
    color: #5a7a92;
    font-size: .85rem;
}

.lgpc-avg-none {
    background: #fff8e6;
    color: #6a5320;
}

.lgpc-field {
    margin-bottom: .9rem;
    position: relative;
}

.lgpc-label {
    display: block;
    margin-bottom: .3rem;
    font-weight: 600;
    font-size: .88rem;
}

.lgpc-input {
    width: 100%;
    padding: .55rem .7rem;
    border: 1px solid #ced4da;
    border-radius: .45rem;
    font-size: 1rem;
    background: #fff;
    color: #212529;
}

.lgpc-input:focus {
    outline: none;
    border-color: #334590;
    box-shadow: 0 0 0 .2rem rgba(51, 69, 144, .15);
}

/* The peso sign sits in the box, not in the placeholder, so it does not
   vanish the moment somebody types. */
.lgpc-money {
    display: flex;
    align-items: stretch;
}

.lgpc-money > span {
    display: flex;
    align-items: center;
    padding: 0 .7rem;
    border: 1px solid #ced4da;
    border-right: 0;
    border-radius: .45rem 0 0 .45rem;
    background: #f1f3f5;
    font-weight: 600;
}

.lgpc-money .lgpc-input {
    border-radius: 0 .45rem .45rem 0;
}

.lgpc-hint {
    margin: .3rem 0 0;
    font-size: .78rem;
    color: #6c757d;
}

.lgpc-hits {
    position: absolute;
    z-index: 5;
    left: 0;
    right: 0;
    max-height: 12rem;
    overflow-y: auto;
    border: 1px solid #ced4da;
    border-radius: .45rem;
    background: #fff;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .12);
}

.lgpc-hit {
    display: block;
    width: 100%;
    padding: .5rem .7rem;
    border: 0;
    border-bottom: 1px solid #f1f3f5;
    background: none;
    text-align: left;
    cursor: pointer;
}

.lgpc-hit:last-child { border-bottom: 0; }
.lgpc-hit:hover, .lgpc-hit:focus { background: #eef6ff; }

.lgpc-hit-name { display: block; font-weight: 600; font-size: .9rem; }
.lgpc-hit-where { display: block; font-size: .78rem; color: #6c757d; }

/* ----- the pages ----- */

.product-price-hero {
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.product-price-range {
    font-variant-numeric: tabular-nums;
}

.product-card-price {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.product-barcode {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: .05em;
}

/* ============================================================
   The "what is this packet" block on a product page
   ============================================================ */

/*
 * A definition list rather than a table: these are facts about one thing,
 * not rows to compare, and a two-column grid keeps the labels aligned
 * without the borders a table would draw around single values.
 */
.product-facts {
    display: grid;
    grid-template-columns: minmax(5.5rem, auto) 1fr;
    gap: .4rem 1rem;
    margin: 0;
}

.product-facts dt {
    color: var(--dl-muted, #9299b8);
    font-size: .82rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.product-facts dd {
    margin: 0;
    color: var(--dl-dark, #272b41);
    word-break: break-word;
}

/* Narrow phones: the two columns stop fitting, so the label sits above its
   value rather than squeezing both into a third of the screen each. */
@media (max-width: 400px) {
    .product-facts {
        grid-template-columns: 1fr;
        gap: .1rem;
    }

    .product-facts dd + dt {
        margin-top: .6rem;
    }
}

/* Licence lines on the credits page: the terms, not the prose. Set apart so
   "ODbL" and "CC BY-SA" are findable by somebody checking compliance rather
   than reading. */
.credits-licence {
    list-style: none;
    margin: 0 0 .85rem;
    padding: 0;
}

.credits-licence li {
    position: relative;
    padding-left: 1.1rem;
    margin-bottom: .25rem;
    color: var(--dl-muted, #9299b8);
    font-size: .86rem;
}

.credits-licence li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .55em;
    width: .35rem;
    height: .35rem;
    border-radius: 50%;
    background: var(--dl-primary, #c9186a);
}

/* ============================================================
   What a shop has charged over time
   ============================================================ */

/*
 * "Price now" is the LATEST report from that shop, and the history under it
 * is how it got there. The toggle is a button rather than a clickable row:
 * it opens something, so it has to be reachable by keyboard and able to say
 * whether it is open.
 */
.price-history-toggle {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-top: .15rem;
    padding: .1rem .4rem .1rem 0;
    border: 0;
    background: none;
    color: var(--dl-muted, #9299b8);
    font-size: .78rem;
    line-height: 1.4;
    cursor: pointer;
}

.price-history-toggle:hover,
.price-history-toggle:focus-visible {
    color: var(--dl-primary, #c9186a);
}

.price-history-caret {
    font-size: .7rem;
    transition: transform .15s ease;
}

.price-history-toggle[aria-expanded="true"] .price-history-caret {
    transform: rotate(180deg);
}

/* The expanded panel sits in its own row spanning the table, so the history
   lines up under the shop it belongs to instead of fighting the columns. */
.price-history-row > td {
    padding: 0 .75rem .75rem;
    border-top: 0;
}

.price-history {
    list-style: none;
    margin: 0;
    padding: .5rem .75rem;
    border-radius: 8px;
    background: var(--dl-light, #f5f6fa);
}

.price-history li {
    display: flex;
    align-items: baseline;
    gap: .6rem;
    padding: .3rem 0;
    font-size: .85rem;
    color: var(--dl-muted, #9299b8);
}

.price-history li + li {
    border-top: 1px solid rgba(0, 0, 0, .05);
}

/* Tabular figures so a column of prices lines up on the decimal point —
   the whole point of a history is comparing the numbers down the list. */
.price-history-amount {
    min-width: 5rem;
    color: var(--dl-dark, #272b41);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.price-history-who {
    color: var(--dl-dark, #272b41);
}

.price-history time {
    margin-left: auto;
    white-space: nowrap;
}

.price-history-badge {
    flex: 0 0 auto;
    padding: .05rem .4rem;
    border-radius: 999px;
    background: var(--dl-primary, #c9186a);
    color: #fff;
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.price-history li.is-current .price-history-amount {
    color: var(--dl-primary, #c9186a);
}

/* The date has nowhere to go on a narrow phone, so it drops to its own line
   rather than squeezing the amount. */
@media (max-width: 480px) {
    .price-history li {
        flex-wrap: wrap;
        gap: .35rem;
    }

    .price-history time {
        margin-left: 0;
        flex-basis: 100%;
    }
}