/* Visual dynamic-data builder (data picker / loop / condition) + binding chips.
   Design tuned to match Elementor's dynamic-tag picker: clean card, categorized
   tag list with bold section headers, bulleted rows, search with icon. */

.uich-dd-overlay{position:fixed;inset:0;background:rgba(17,17,26,.5);z-index:200000;display:flex;align-items:flex-start;justify-content:center;padding:7vh 16px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
.uich-dd-modal{width:340px;max-width:94vw;max-height:62vh;display:flex;flex-direction:column;overflow:hidden;background:#fff;color:#1e1e2e;border-radius:11px;box-shadow:0 18px 48px rgba(17,17,26,.32),0 2px 8px rgba(17,17,26,.12)}
.uich-dd-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 13px 8px;flex:0 0 auto}
.uich-dd-head strong{font-size:13px;font-weight:700;display:flex;align-items:center;gap:8px}
.uich-dd-head strong:before{content:"";width:13px;height:13px;flex:0 0 auto;background:linear-gradient(135deg,#7c4dff,#4a2bd0);border-radius:4px;box-shadow:0 2px 6px rgba(108,63,245,.4)}
.uich-dd-x{border:0;background:transparent;cursor:pointer;font-size:15px;color:#9a9aac;line-height:1;width:24px;height:24px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center}
.uich-dd-x:hover{background:#f2f2f7;color:#5a5a6e}
.uich-dd-body{padding:0 12px 12px;display:flex;flex-direction:column;gap:8px;flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden}
.uich-dd-field{display:flex;flex-direction:column;gap:4px;font-size:11.5px;color:#5a5a6e;flex:0 0 auto}
.uich-dd-field>span{font-weight:600;letter-spacing:.02em}
.uich-dd-select,.uich-dd-input{width:100%;box-sizing:border-box;flex:0 0 auto;min-height:34px;line-height:1.4;padding:7px 9px;border:1px solid #e2e2ec;border-radius:8px;font-size:12.5px;background:#fff;color:#1e1e2e}
.uich-dd-select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239a9aac' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center;padding-right:32px}
.uich-dd-select:focus,.uich-dd-input:focus{outline:none;border-color:#6c3ff5;box-shadow:0 0 0 3px rgba(108,63,245,.15)}
.uich-dd-filters{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.uich-dd-chip{display:inline-flex;align-items:center;gap:6px;background:#efeafe;color:#4a2bd0;border-radius:20px;padding:4px 6px 4px 10px;font-size:12px;font-weight:600}
.uich-dd-chip-x{border:0;background:transparent;color:#4a2bd0;cursor:pointer;font-size:14px;line-height:1}
.uich-dd-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 12px;border-top:1px solid #eeeef4;background:#fafaff;flex:0 0 auto}
.uich-dd-preview-wrap{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.uich-dd-preview-wrap>span{font-size:9px;text-transform:uppercase;letter-spacing:.06em;color:#9a9aac}
.uich-dd-preview{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;color:#1d8a5e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.uich-dd-insert{border:0;background:#6c3ff5;color:#fff;border-radius:8px;padding:7px 15px;font-size:12.5px;font-weight:600;cursor:pointer;white-space:nowrap;box-shadow:0 2px 8px rgba(108,63,245,.3)}
.uich-dd-insert:hover{background:#5a31d8}

/* ── Categorized dynamic-tag list ─────────────────────────────────────────── */
.uich-dd-search{width:100%;box-sizing:border-box;flex:0 0 auto;padding:8px 10px 8px 32px;border:1px solid #e2e2ec;border-radius:8px;font-size:12.5px;color:#1e1e2e;background:#f7f7fb url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239a9aac' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E") no-repeat 10px center}
.uich-dd-search:focus{outline:none;border-color:#6c3ff5;background-color:#fff;box-shadow:0 0 0 3px rgba(108,63,245,.15)}
.uich-dd-list{display:flex;flex-direction:column;flex:1 1 auto;min-height:96px;overflow:auto;border:0;border-radius:8px;padding:2px}
.uich-dd-group{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#8a8a9a;padding:8px 6px 4px;margin-top:2px;border-top:1px solid #f1f1f6}
.uich-dd-list>.uich-dd-group:first-child{margin-top:0;border-top:0;padding-top:4px}
.uich-dd-crumbs+.uich-dd-group{margin-top:0;border-top:0}
.uich-dd-row{display:flex;align-items:center;gap:8px;width:100%;text-align:left;border:0;background:transparent;color:#33333f;font-size:12.5px;padding:6px 8px;border-radius:7px;cursor:pointer}
.uich-dd-row:before{content:"";flex:0 0 auto;width:6px;height:6px;border-radius:50%;background:#c9c4ea;transition:background .12s}
.uich-dd-row:hover{background:#f4f1ff;color:#1e1e2e}
.uich-dd-row:hover:before{background:#6c3ff5}
.uich-dd-row.is-active{background:#efeafe;color:#4a2bd0;font-weight:600}
.uich-dd-row.is-active:before{background:#6c3ff5}
.uich-dd-row-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.uich-dd-row-meta{flex:0 0 auto;font-size:11px;color:#a6a6b8}
.uich-dd-row.is-chain .uich-dd-row-meta{font-size:16px;color:#b3a6f2;font-weight:700;line-height:1}
.uich-dd-row.is-chain:hover .uich-dd-row-meta{color:#6c3ff5}
.uich-dd-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:4px;padding:6px 4px 8px;border-bottom:1px solid #f1f1f6;margin-bottom:2px}
.uich-dd-crumb{border:0;background:transparent;color:#6c3ff5;font-size:12px;font-weight:600;cursor:pointer;padding:3px 6px;border-radius:6px}
.uich-dd-crumb:hover{background:#efeafe}
.uich-dd-crumb-sep{color:#c4c4d4;font-size:12px}
.uich-dd-opts{display:flex;flex-direction:column;gap:12px;flex:0 0 auto}
.uich-dd-opts:empty{display:none}

@media (prefers-color-scheme: dark){
	.uich-dd-modal{background:#1f1f2b;color:#e8e8f0}
	.uich-dd-head strong{color:#f2f2f7}
	.uich-dd-x:hover{background:#2a2a3a;color:#c9c9d6}
	.uich-dd-select,.uich-dd-input{background:#2a2a3a;border-color:#3a3a52;color:#e8e8f0}
	.uich-dd-foot{background:#23232f;border-color:#33334a}
	.uich-dd-search{background-color:#2a2a3a;border-color:#3a3a52;color:#e8e8f0}
	.uich-dd-search:focus{background-color:#23232f}
	.uich-dd-list{border-color:#33334a}
	.uich-dd-group{color:#9a9ab0;border-top-color:#2c2c3f}
	.uich-dd-row{color:#d6d6e2}
	.uich-dd-row:before{background:#4a4a63}
	.uich-dd-row:hover{background:#2a2a3a;color:#fff}
	.uich-dd-row:hover:before{background:#8a6bff}
	.uich-dd-row.is-active{background:#332d52;color:#c9beff}
	.uich-dd-crumbs{border-bottom-color:#2c2c3f}
	.uich-dd-crumb:hover{background:#2a2a3a}
}

/* Inline binding chip (for the layers/preview). */
.uich-dd-token{display:inline-flex;align-items:center;gap:5px;background:#efeafe;color:#4a2bd0;border-radius:6px;padding:1px 7px;font-size:12px;font-weight:600;font-family:inherit;cursor:pointer;border:1px solid #ddd2fb}
.uich-dd-token:before{content:"{ }";font-family:ui-monospace,monospace;font-size:10px;opacity:.7}

/* Toolbar button injected into the composer panel header. */
.uich-dd-toolbtn{display:inline-flex;align-items:center;gap:5px;border:1px solid #d9d9e3;background:#fff;color:#4a2bd0;border-radius:7px;padding:5px 10px;font-size:12px;font-weight:600;cursor:pointer;margin-left:6px}
.uich-dd-toolbtn:hover{background:#efeafe}

/* The single "+ Dynamic" dropdown menu in the popup tab bar. */
.uich-dd-dropdown{position:relative;display:inline-block;margin-left:6px}
.uich-dd-menu{position:absolute;top:calc(100% + 4px);right:0;min-width:168px;background:#1f1f2b;border:1px solid #33334a;border-radius:8px;padding:4px;display:none;z-index:200001;box-shadow:0 12px 32px rgba(0,0,0,.35)}
.uich-dd-menu.open{display:block}
.uich-dd-menu-item{display:block;width:100%;text-align:left;border:0;background:transparent;color:#e8e8f0;font-size:13px;padding:8px 10px;border-radius:6px;cursor:pointer}
.uich-dd-menu-item:hover{background:#2a2a3a;color:#b9a8fb}
.uich-dd-hint{font-size:12px;color:#8a8a9a;line-height:1.5}
@media (prefers-color-scheme: light){
	.uich-dd-menu{background:#fff;border-color:#e4e4ee}
	.uich-dd-menu-item{color:#1e1e2e}
	.uich-dd-menu-item:hover{background:#efeafe;color:#4a2bd0}
}

/* Contextual construct tab (Loop / Form) inside the popup. */
.uich-construct-body{padding:14px 16px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
.uich-construct-head{display:flex;align-items:center;gap:8px;font-size:12px;color:#8a8a9a;margin-bottom:14px}
.uich-construct-head code{font-family:ui-monospace,Menlo,monospace}
.uich-construct-pill{display:inline-flex;align-items:center;padding:3px 9px;border-radius:6px;font-size:12px;font-weight:600}
.uich-construct-pill.loop{background:rgba(127,119,221,.15);color:#8a82e6}
.uich-construct-pill.condition{background:rgba(186,117,23,.16);color:#c08a34}
.uich-construct-pill.form{background:rgba(99,153,34,.18);color:#8bbf52}
.uich-construct-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px}
.uich-construct-fields{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.uich-construct-chip{background:#efeafe;color:#4a2bd0;font-size:12px;padding:3px 9px;border-radius:6px}
.uich-construct-check{display:flex;align-items:center;gap:8px;font-size:14px;margin-top:8px;color:inherit;font-weight:400}
@media (prefers-color-scheme: dark){ .uich-construct-chip{background:#2f2a4a;color:#c9beff} }

/* Front-end form message. */
.uich-form-message{margin-top:10px;padding:10px 12px;border-radius:8px;font-size:14px}
.uich-form-message.is-success{background:#e8f7ef;color:#1d8a5e}
.uich-form-message.is-error{background:#fdeaea;color:#c0392b}

/* Front-end loop pagination (numbered links rendered by loop_pagination()) */
.uich-loop-pagination{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:24px}
.uich-loop-pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:36px;padding:0 10px;border:1px solid currentColor;border-radius:6px;text-decoration:none;line-height:1;opacity:.75}
.uich-loop-pagination .page-numbers.current{opacity:1;font-weight:600}
.uich-loop-pagination a.page-numbers:hover{opacity:1}