/* The carrier message line on the rate cards (bug 241309) - e.g. "Carrier returned lower
   limits than requested." Rendered by _QuoteCard.cshtml under the See Plan Details row, on
   both the quote page and the re-rate page. Kept out of the partial because Vue 2 drops
   <style> blocks from the template it compiles.

   The row copies See Plan Details' row > col structure, so nothing here sets horizontal
   padding or the icon's size: both are inherited exactly as that row inherits them, which is
   what keeps the two left-aligned on every brand and at every width. */

.carrier-messages {
    margin-bottom: 8px;
}

/* Lead (icon + gap) and text side by side, so a message that wraps on a narrow screen keeps
   a hanging indent under its first word rather than running back under the icon. */
.carrier-message {
    display: flex;
    align-items: baseline;
    margin: 0 0 4px;
    line-height: 1.4;
}

.carrier-message:last-child {
    margin-bottom: 0;
}

.carrier-message-lead {
    flex: 0 0 auto;
    white-space: nowrap;
}

.carrier-message-icon {
    color: #f0a202;
}

.carrier-message-text {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px;
    color: var(--gray);
    overflow-wrap: anywhere;
}