/* mage-combo-input.css — MageComboInput global component
 *
 * Unified combo input: optional prefix + divider + value input +
 * MagePickerPlus label dropdown + add button, with records below.
 *
 * Used by: kontakt-edit (Telefon, E-Mail, Social Media), any future combo fields.
 * Global component — defined ONCE, never duplicated in page CSS.
 */

/* ── Container ── */
.mage-multi-combo{display:flex;flex-direction:column;}

/* ── The single unified input bar — positioning context for dropdown ── */
.mage-multi-combo-input{
    display:flex;align-items:stretch;
    border:1px solid #dde4ed;border-radius:2px;
    background:#fff;position:relative;
    transition:border-color .15s;
}
.mage-multi-combo-input:focus-within{border-color:#999;}

/* First and last child get border-radius to round the bar without overflow:hidden */
.mage-multi-combo-input > *:first-child{border-radius:2px 0 0 2px;}
.mage-multi-combo-input > *:last-child{border-radius:0 2px 2px 0;}

/* ── Country prefix (small, fixed width) ── */
.mage-multi-combo-input .mc-prefix{
    width:52px;flex-shrink:0;
    border:none !important;border-radius:0 !important;outline:none !important;box-shadow:none !important;
    padding:8px 8px 8px 10px !important;font-size:14px !important;color:#303030 !important;
    background:transparent !important;text-align:center;
}

/* ── Thin vertical divider between sections ── */
.mage-multi-combo-input .mc-divider{
    width:1px;background:#dde4ed;flex-shrink:0;margin:6px 0;
}

/* ── Value input (fills remaining space) ── */
.mage-multi-combo-input .mc-value{
    flex:1;min-width:0;
    border:none !important;border-radius:0 !important;outline:none !important;box-shadow:none !important;
    padding:8px 10px !important;font-size:14px !important;color:#303030 !important;
    background:transparent !important;
}
.mage-multi-combo-input .mc-value::placeholder{color:#aaa;}

/* ── Label picker container — hosts the MagePickerPlus trigger inline ── */
.mage-multi-combo-input .mc-label-trigger{
    display:flex;align-items:stretch;
    border-left:1px solid #dde4ed;
    flex-shrink:0;
}
/* Override MagePickerPlus styles to blend into the combo input */
.mage-multi-combo-input .mc-label-trigger .mpp-wrap{
    display:flex;align-items:stretch;
    position:static;/* dropdown escapes via .mage-multi-combo-input positioning */
    width:auto;
}
.mage-multi-combo-input .mc-label-trigger .mpp-trigger{
    border:none !important;border-radius:0 !important;box-shadow:none !important;
    padding:0 12px !important;font-size:13px !important;font-weight:500 !important;
    color:#555 !important;background:transparent !important;
    display:flex !important;align-items:center !important;gap:4px !important;
    white-space:nowrap;cursor:pointer;min-width:auto;width:auto !important;
    transition:background .1s;
}
.mage-multi-combo-input .mc-label-trigger .mpp-trigger:hover{background:#f5f5f5 !important;}
.mage-multi-combo-input .mc-label-trigger .mpp-trigger-arrow{font-size:8px;color:#999;}
.mage-multi-combo-input .mc-label-trigger .mpp-trigger-text{font-size:13px;}
/* Dropdown: position relative to .mage-multi-combo-input, allow wider than trigger */
.mage-multi-combo-input .mc-label-trigger .mpp-dropdown{
    position:absolute;right:0;left:auto;
    min-width:260px;width:auto;
}

/* ── Add button — gray toolbar style, rounded right side ── */
.mage-multi-combo-input .mc-btn-add{
    display:flex;align-items:center;justify-content:center;
    width:38px;flex-shrink:0;
    border:none;border-left:1px solid #dde4ed;
    background:#f0f1f3;color:#555;
    font-size:15px;cursor:pointer;
    transition:all .15s;padding:0;
}
.mage-multi-combo-input .mc-btn-add:hover{background:#e4e5e8;color:#333;}
.mage-multi-combo-input .mc-btn-add i{font-size:18px;line-height:1;}

/* ── Records list (with gap below input) ── */
.mage-multi-combo-records{margin-top:8px;display:flex;flex-direction:column;gap:4px;}

/* ── Single record row ── */
.mage-multi-combo-record{
    display:flex;align-items:center;justify-content:space-between;
    padding:7px 12px;
    border:1px solid #e8ecf1;border-radius:2px;
    background:#fafbfc;font-size:13px;
    transition:background .1s;
}
.mage-multi-combo-record:hover{background:#eef3fa;}
.mage-multi-combo-record .mc-rec-value{font-weight:600;color:#303030;}
.mage-multi-combo-record .mc-rec-label{font-size:11px;color:#888;margin-left:8px;background:#eef0f3;padding:1px 8px;border-radius:2px;}
.mage-multi-combo-record .mc-rec-star{cursor:pointer;font-size:16px;color:#d1d5db;transition:color .15s;flex-shrink:0;}
.mage-multi-combo-record .mc-rec-star.is-primary{color:#f59e0b;}
.mage-multi-combo-record .mc-rec-delete{display:flex;align-items:center;justify-content:center;width:38px;flex-shrink:0;border:none;border-left:1px solid #e8ecf1;background:#f0f1f3;color:#999;font-size:15px;cursor:pointer;padding:0;margin:-7px -12px -7px 0;border-radius:0 2px 2px 0;align-self:stretch;transition:all .15s;}
.mage-multi-combo-record .mc-rec-delete:hover{background:#e4e5e8;color:#555;}

/* ── Empty state ── */
.mage-multi-combo-empty{padding:10px;text-align:center;color:#bbb;font-size:12px;border:1px dashed #dde4ed;border-radius:2px;margin-top:8px;}