/*
 * SMIB message system — 5 variants × 5 formats, one component.
 * Ported from design_handoff_smib_redesign/messages.jsx (MSG_TOKENS).
 *
 * Usage:
 *   <div class="smib-msg smib-msg--<variant> smib-msg--<format>">…</div>
 *
 * Variant tokens live on the variant modifier; format styles consume them via
 * CSS variables, so adding a new variant only requires one rule.
 */

/* ---------- Variant tokens ---------- */
.smib-msg--error {
    --msg-tint:   #fdecee;
    --msg-border: #f4b5bb;
    --msg-accent: #cf2126;
    --msg-deep:   #8a1418;
    --msg-icon-bg:#cf2126;
}
.smib-msg--warning {
    --msg-tint:   #fff7df;
    --msg-border: #f1d97a;
    --msg-accent: #b88600;
    --msg-deep:   #7a5a00;
    --msg-icon-bg:#e8b400;
}
.smib-msg--info {
    --msg-tint:   #eaf2fc;
    --msg-border: #b8d0ee;
    --msg-accent: #1f5fbf;
    --msg-deep:   #143f80;
    --msg-icon-bg:#1f5fbf;
}
.smib-msg--success {
    --msg-tint:   #e6f4ec;
    --msg-border: #a7d4b7;
    --msg-accent: #0B7A3B;
    --msg-deep:   #075426;
    --msg-icon-bg:#0B7A3B;
}
.smib-msg--tip {
    --msg-tint:   #f4eef9;
    --msg-border: #d0bfe3;
    --msg-accent: #6b3eb0;
    --msg-deep:   #3f2470;
    --msg-icon-bg:#6b3eb0;
}

/* ---------- Base + icon + content slots ---------- */
.smib-msg {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 16px 18px;
    background: var(--msg-tint);
    border: 1px solid var(--msg-border);
    border-radius: 10px;
    color: #33231a;
    margin: 8px 0 0;
    box-sizing: border-box;
    position: relative;
}
.smib-msg__icon {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--msg-icon-bg);
    color: #fff;
    display: inline-grid;
    place-items: center;
    font-family: var(--display, "Bricolage Grotesque", system-ui, sans-serif);
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
}
.smib-msg__icon svg {
    width: 12px;
    height: 12px;
    display: block;
}
.smib-msg__content {
    flex: 1;
    min-width: 0;
}
.smib-msg__title {
    display: block;
    font-family: var(--display, "Bricolage Grotesque", system-ui, sans-serif);
    font-weight: 700;
    font-size: 15px;
    color: var(--msg-deep);
    letter-spacing: -.005em;
    line-height: 1.3;
    margin: 0 0 4px;
}
.smib-msg__body {
    font-size: 14px;
    line-height: 1.55;
    color: #33231a;
    margin: 0;
}
.smib-msg__body a {
    color: var(--msg-deep);
    font-weight: 700;
    text-decoration: underline;
}
.smib-msg__action {
    margin-top: 10px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.smib-msg__close {
    flex: 0 0 auto;
    background: transparent;
    border: 0;
    color: var(--msg-deep);
    font-size: 18px;
    cursor: pointer;
    line-height: 1;
    padding: 4px;
    opacity: .6;
    transition: opacity .15s ease;
}
.smib-msg__close:hover,
.smib-msg__close:focus { opacity: 1; }

/* ---------- Format: standard (default) ---------- */
/* Already covered by base. */

/* ---------- Format: banner ---------- */
.smib-msg--banner {
    border-left: 4px solid var(--msg-accent);
    border-radius: 0 10px 10px 0;
    padding: 18px 22px;
    gap: 16px;
}
.smib-msg--banner .smib-msg__title-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}
.smib-msg--banner .smib-msg__eyebrow {
    font-family: var(--mono, "JetBrains Mono", ui-monospace, monospace);
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--msg-accent);
    font-weight: 700;
}
.smib-msg--banner .smib-msg__title {
    margin: 0;
    font-size: 15px;
}

/* ---------- Format: inline ---------- */
.smib-msg--inline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    color: var(--msg-accent);
    font-size: 13px;
    line-height: 1.45;
    font-weight: 600;
    margin: 6px 0 0;
}
.smib-msg--inline .smib-msg__icon {
    width: 16px;
    height: 16px;
    font-size: 10px;
}
.smib-msg--inline .smib-msg__icon svg {
    width: 9px;
    height: 9px;
}
.smib-msg--inline .smib-msg__title {
    display: inline;
    margin: 0;
    color: var(--msg-accent);
    font-family: inherit;
    font-weight: 700;
    font-size: 13px;
}
.smib-msg--inline .smib-msg__body {
    display: inline;
    color: var(--msg-accent);
    font-size: 13px;
}
.smib-msg--inline .smib-msg__close { display: none; }

/* ---------- Format: solid ---------- */
.smib-msg--solid {
    background: var(--msg-accent);
    border: 0;
    color: #fff;
    padding: 22px 24px;
    gap: 16px;
}
.smib-msg--solid .smib-msg__icon {
    width: 32px;
    height: 32px;
    background: rgba(255,255,255,.22);
    color: #fff;
    font-size: 18px;
}
.smib-msg--solid .smib-msg__icon svg {
    width: 16px;
    height: 16px;
}
.smib-msg--solid .smib-msg__title {
    color: #fff;
    font-size: 18px;
    letter-spacing: -.01em;
    margin: 0 0 6px;
}
.smib-msg--solid .smib-msg__body {
    color: rgba(255,255,255,.92);
}
.smib-msg--solid .smib-msg__body a {
    color: #fff;
    text-decoration: underline;
}
.smib-msg--solid .smib-msg__action {
    margin-top: 14px;
}
.smib-msg--solid .smib-msg__close {
    color: #fff;
    opacity: .8;
}

/* ---------- Format: toast ---------- */
.smib-msg--toast {
    background: #fff;
    border: 1px solid var(--msg-border);
    border-radius: 12px;
    box-shadow: 0 10px 32px -10px rgba(0,0,0,.22), 0 2px 6px rgba(0,0,0,.06);
    max-width: 380px;
    padding: 14px 18px 14px 22px;
    color: #0a1410;
}
.smib-msg--toast::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: var(--msg-accent);
    border-radius: 12px 0 0 12px;
}
.smib-msg--toast .smib-msg__icon {
    width: 20px;
    height: 20px;
    font-size: 12px;
}
.smib-msg--toast .smib-msg__title {
    color: #0a1410;
    font-size: 14px;
    margin: 0 0 2px;
}
.smib-msg--toast .smib-msg__body {
    color: #5a6b62;
    font-size: 13px;
    line-height: 1.5;
}
.smib-msg--toast .smib-msg__close {
    color: #9bb6a4;
    font-size: 16px;
}

/* ---------- Toast root container ---------- */
#smib-toast-root {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
    max-width: calc(100vw - 40px);
}
#smib-toast-root .smib-msg--toast {
    pointer-events: auto;
    animation: smib-toast-in .25s ease-out;
}
@keyframes smib-toast-in {
    from { transform: translateY(8px); opacity: 0; }
    to   { transform: translateY(0);   opacity: 1; }
}

/* ---------- GF native validation messages → inline error look ---------- */
/* GF outputs .gfield_validation_message (per-field) and .gform_submission_error
 * / .gform_validation_errors (form-level). Restyle in place so any plugin
 * upgrade that swaps GF markup still inherits the SMIB design.
 */
.gfield_validation_message,
.gfield_description.validation_message {
    --msg-tint:   #fdecee;
    --msg-border: #f4b5bb;
    --msg-accent: #cf2126;
    --msg-deep:   #8a1418;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--msg-accent);
    font-size: 13px;
    line-height: 1.45;
    font-weight: 600;
    margin: 6px 0 0 !important;
}
.gfield_validation_message::before,
.gfield_description.validation_message::before {
    content: "!";
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--msg-accent);
    color: #fff;
    font-family: var(--display, system-ui, sans-serif);
    font-weight: 800;
    font-size: 10px;
    line-height: 1;
}
.gform_submission_error,
.gform_validation_errors {
    --msg-tint:   #fdecee;
    --msg-border: #f4b5bb;
    --msg-accent: #cf2126;
    --msg-deep:   #8a1418;
    background: var(--msg-tint) !important;
    border: 1px solid var(--msg-border) !important;
    border-radius: 10px !important;
    padding: 16px 18px !important;
    color: var(--msg-deep) !important;
    font-family: var(--display, system-ui, sans-serif);
    margin: 0 0 18px !important;
}
.gform_submission_error h2,
.gform_validation_errors h2 {
    color: var(--msg-accent) !important;
    font-size: 15px !important;
    margin: 0 0 4px !important;
    font-weight: 700 !important;
}
.gform_submission_error a,
.gform_validation_errors a {
    color: var(--msg-deep) !important;
    font-weight: 700;
    text-decoration: underline;
}

/* GF confirmation message wrapper renders the same content smib_msg() returns
 * for success-solid, but inside .gform_confirmation_message. Strip GF's
 * default padding so our card sits flush. */
.gform_confirmation_message .smib-msg--solid {
    margin: 0;
}