/**
 * KrsKrt Email Addresses block — v3 styling.
 *
 * Each chip and the active input render as a JFB number-field look-alike
 * "pill": 43px tall, white background, 1px #dedede border, 5px radius,
 * Lekton. An absolutely-positioned Phosphor icon button sits on the right
 * inside every pill:
 *   - Active input: "+" — clicking it commits the current value.
 *   - Chip:         "×" — clicking it removes the chip.
 *
 * The container is a JFB `__field-wrap` with `display: flex; flex-wrap: wrap`
 * so pills flow left-to-right and break onto new lines in narrow columns.
 * Long addresses clip with an ellipsis inside the chip.
 */

.jfb-email-chips {
    display:      flex;
    flex-wrap:    wrap;
    align-items:  center;
    gap:          0.5rem;
    padding:      0;
    border:       0;
    background:   transparent;
}

/* Shared "pill" shape — chip + input both override .jet-form-builder__field
   so they match regardless of what the baseline theme does. */
.jfb-email-chips .jfb-email-chip,
.jfb-email-chips .jfb-email-chips__input {
    position:        relative;
    box-sizing:      border-box;
    height:          43px;
    background:      #fff;
    border:          1px solid #dedede;
    border-radius:   5px;
    color:           #00374a;
    font-family:     'Lekton', inherit;
    font-size:       17px;
    line-height:     20px;
    padding:         12px 38px 9px 12px;  /* right room for icon button */
    margin:          0;
    max-width:       100%;
    min-width:       0;
}

/* Chip = static text + × button on the right. */
.jfb-email-chips .jfb-email-chip {
    display:         inline-flex;
    align-items:     center;
    overflow:        hidden;
    white-space:     nowrap;
    text-overflow:   ellipsis;
}

/* Active input fills the remaining row width. */
.jfb-email-chips .jfb-email-chips__input {
    flex:    1 1 220px;
    outline: none;
}

/* Pills match JFB number-field baseline and have no custom :hover —
   leave the frame untouched on pointer-over, just like a plain JFB input. */

/* Inline icon button — shared by + (input) and × (chip). Only the button
   itself reacts to hover, not the surrounding pill. */
.jfb-email-chips__btn {
    position:         absolute;
    top:              50%;
    right:            6px;
    transform:        translateY(-50%);
    display:          inline-flex;
    align-items:      center;
    justify-content:  center;
    width:            28px;
    height:           28px;
    padding:          0;
    margin:           0;
    border:           0;
    border-radius:    50%;
    background:       transparent;
    color:            #00374a;
    cursor:           pointer;
    font-family:      "Phosphor" !important;
    font-size:        18px;
    line-height:      1;
    opacity:          0.55;
    transition:       background 0.12s, color 0.12s, opacity 0.12s;
}
.jfb-email-chips__btn:hover,
.jfb-email-chips__btn:focus-visible {
    opacity:    1;
    color:      #00374a;
    background: rgba(0, 0, 0, 0.06);
    outline:    none;
}

/* Placeholder styling (matches baseline JFB). */
.jfb-email-chips .jfb-email-chips__input::placeholder {
    color:   #dedede;
    opacity: 1;
}

/* Invalid-flash: shake + red tint for ~450 ms. */
.jfb-email-chips .jfb-email-chips__input.is-invalid {
    animation:    jfb-email-shake 0.4s ease;
    border-color: #ef4444;
    background:   #fef2f2;
}
@keyframes jfb-email-shake {
    0%,100% { transform: translateX(0); }
    25%     { transform: translateX(-4px); }
    50%     { transform: translateX(4px);  }
    75%     { transform: translateX(-2px); }
}

/* Editor preview (blocks/email-addresses-field.js). */
.jfb-email-chips--editor .jfb-email-chips__preview {
    display:     flex;
    flex-wrap:   wrap;
    align-items: center;
    gap:         0.5rem;
}