/**
 * TransferJet — messages.
 *
 * Hyvä's .message is border-2 border-*-500 on a *-50 ground with black text and
 * `shadow`. Two panels of that weight stacked — an info notice above a success
 * notice, which is what an add-to-cart on a configurable product produces — read
 * as an alarm rather than as feedback.
 *
 * Softened: a 1px *-300 border on a *-50 ground, with the type colour carried
 * by the text rather than by a heavy rule. The panel still reads as its type at
 * a glance; it just stops shouting.
 *
 * The text is *-900 rather than the *-800 tried first. On a *-50 ground 800 is
 * legible but pale, and since the border no longer carries the type the text is
 * doing that work alone — it can afford the weight. The error colour is tuned
 * off the Tailwind ramp to #952525: red-900 went far enough towards brown to
 * stop reading as the brand's red.
 *
 * Two depths, because these appear in two places:
 *
 *   - page level, inside #messages, which .page.messages makes sticky. Lifted
 *     off the page, so shadow-sm.
 *   - inline, inside a cart line where the message belongs to the row it sits
 *     in rather than floating above the page. shadow-xs — enough to separate it
 *     from the row's background, not enough to look detached from it.
 *
 * Styling only. messages.phtml is forked for the duplicate collapsing, not for
 * this.
 */

.message {
    align-items: center;
    border-radius: 0.5rem;
    border-width: 1px;
    /* Tailwind shadow-xs. */
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    display: flex;
    font-size: 0.9375rem;
    /* The design asks for semibold. Roboto has no 600, so this is the nearest
       real face — the same reason the masthead label is 700. */
    font-weight: 700;
    gap: 0.75rem;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    /* Space above too, for the inline case: a message inside a cart line sits
       directly under the product's attributes with nothing between them, and
       reads as part of that text rather than as a panel about it. Page-level
       messages have their container's padding and do not need it. */
    margin-top: 0.75rem;
    padding: 0.875rem 1.125rem;
}

/* Page level: sticky and lifted, so a touch more depth, and no top margin —
   the section already spaces them. */
#messages .message {
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.10), 0 1px 2px -1px rgb(0 0 0 / 0.10);
    margin-top: 0;
}

.message.error {
    background: #fef2f2;
    border-color: #fca5a5;
    color: #952525;
}

.message.success {
    background: #f0fdf4;
    border-color: #86efac;
    color: #14532d;
}

.message.info,
.message.notice {
    background: #eff6ff;
    border-color: #93c5fd;
    color: #1e3a8a;
}

.message.warning {
    background: #fefce8;
    border-color: #fde047;
    color: #713f12;
}

/* Links keep the underline but not extra weight. The whole panel is already
   700, so bolding the link again only makes it look like a different size — the
   underline is enough to say it is a link. */
.message a {
    font-weight: inherit;
    text-decoration: underline;
}

/* The close control inherits the panel's colour rather than carrying its own
   grey, so it belongs to the message it dismisses.
 *
   0.8 rather than 0.6: at 0.6 against a pale ground it read as decoration, and
   it is the only control in the panel. */
.message button {
    color: inherit;
    flex-shrink: 0;
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

.message button:hover {
    color: inherit;
    opacity: 1;
}