:root{
  --cnp-sel-bg:#fff;
  --cnp-sel-bd:#dfe6ef;
  --cnp-sel-bd-hover:#c2d5ea;
  --cnp-sel-ink:#0D2B4E;
  --cnp-sel-muted:#8296ae;
  --cnp-sel-blue:#1A5EA8;
  --cnp-sel-blue-soft:#f1f6fc;
  --cnp-sel-gold:#C9A84C;
  --cnp-sel-gold2:#a8853c;
  --cnp-sel-line:#eef2f7;
  --cnp-sel-radius:10px;
  --cnp-sel-sans:'Libre Franklin','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}

.cnp-sel{ position:relative; display:flex; flex-direction:column; width:100%; }
.cnp-sel > .cnp-sel-trigger{ order:-1; }
.cnp-sel > select{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); border:0; white-space:nowrap;
}

.cnp-sel-trigger{
  display:flex; align-items:center; gap:10px; width:100%;
  margin:0; padding:10px 13px; cursor:pointer; text-align:left;
  font-family:var(--cnp-sel-sans); font-size:14px; font-weight:500; line-height:1.45;
  color:var(--cnp-sel-ink); background:var(--cnp-sel-bg);
  border:1.5px solid var(--cnp-sel-bd); border-radius:var(--cnp-sel-radius);
  transition:border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.cnp-sel-trigger:hover{ border-color:var(--cnp-sel-bd-hover); }
.cnp-sel-trigger:focus-visible,
.cnp-sel[data-open="true"] .cnp-sel-trigger{
  outline:0; border-color:var(--cnp-sel-blue); box-shadow:0 0 0 3px rgba(26,94,168,.13);
}
.cnp-sel-val{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cnp-sel-val[data-placeholder="true"]{ color:var(--cnp-sel-muted); font-weight:400; }
.cnp-sel-caret{
  flex:0 0 auto; width:16px; height:16px; color:var(--cnp-sel-gold2);
  transition:transform .2s ease, color .2s ease;
}
.cnp-sel[data-open="true"] .cnp-sel-caret{ transform:rotate(180deg); color:var(--cnp-sel-blue); }
.cnp-sel-trigger[disabled]{ cursor:not-allowed; opacity:.55; background:#f6f8fb; }

.cnp-sel-panel{
  position:fixed; z-index:100000; display:flex; flex-direction:column;
  max-height:320px; padding:6px; box-sizing:border-box;
  font-family:var(--cnp-sel-sans);
  background:#fff; border-radius:12px;
  box-shadow:0 18px 44px rgba(13,43,78,.17), 0 0 0 1px rgba(13,43,78,.07);
  opacity:0; transform:translateY(-5px); pointer-events:none;
  transition:opacity .15s ease, transform .15s ease;
}
.cnp-sel-panel.is-open{ opacity:1; transform:none; pointer-events:auto; }
.cnp-sel-panel.is-above{ transform:translateY(5px); }
.cnp-sel-panel.is-above.is-open{ transform:none; }

.cnp-sel-search{ position:relative; flex:0 0 auto; padding:4px 4px 8px; }
.cnp-sel-search input{
  width:100%; box-sizing:border-box; padding:9px 12px 9px 34px;
  font-family:inherit; font-size:13.5px; color:var(--cnp-sel-ink);
  background:#f7f9fc; border:1px solid var(--cnp-sel-line); border-radius:8px; outline:0;
  transition:border-color .16s ease, background .16s ease;
}
.cnp-sel-search input:focus{ border-color:var(--cnp-sel-blue); background:#fff; }
.cnp-sel-search input::placeholder{ color:var(--cnp-sel-muted); }
.cnp-sel-search svg{
  position:absolute; left:15px; top:50%; transform:translateY(-50%);
  width:15px; height:15px; color:var(--cnp-sel-muted); pointer-events:none;
}

.cnp-sel-list{ flex:1 1 auto; overflow-y:auto; list-style:none; margin:0; padding:0; }
.cnp-sel-opt{
  position:relative; display:flex; align-items:center; gap:9px;
  padding:9px 12px; border-radius:8px; cursor:pointer;
  font-size:13.5px; line-height:1.4; color:#42546c;
  transition:background .13s ease, color .13s ease;
}
.cnp-sel-opt + .cnp-sel-opt{ margin-top:1px; }
.cnp-sel-opt[aria-selected="true"]{ color:var(--cnp-sel-ink); font-weight:700; }
.cnp-sel-opt.is-active{ background:var(--cnp-sel-blue-soft); color:var(--cnp-sel-blue); }
.cnp-sel-opt[aria-disabled="true"]{ opacity:.45; cursor:not-allowed; }

.cnp-sel-opt[aria-selected="true"]::before{
  content:''; position:absolute; left:3px; top:50%; transform:translateY(-50%);
  width:3px; height:17px; border-radius:2px;
  background:linear-gradient(180deg,var(--cnp-sel-gold),var(--cnp-sel-gold2));
}
.cnp-sel-opt-t{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.cnp-sel-empty{ padding:16px 12px; text-align:center; font-size:13px; color:var(--cnp-sel-muted); }

.gn-field .cnp-sel-trigger{
  height:46px; padding:0 14px; border-width:1px; border-radius:8px;
  background:#f7f9fc; border-color:#e1e6ee;
}
.gn-field .cnp-sel-trigger:hover{ border-color:#cfd8e6; }
.gn-field .cnp-sel-trigger:focus-visible,
.gn-field .cnp-sel[data-open="true"] .cnp-sel-trigger{
  border-color:var(--cnp-sel-gold2); background:#fff; box-shadow:0 0 0 3px rgba(168,133,60,.16);
}

.sa-field.is-invalid .cnp-sel-trigger,
select.caa-invalid ~ .cnp-sel-trigger{
  border-color:#d9534f; box-shadow:0 0 0 3px rgba(217,83,79,.12);
}

.cnp-sel-backdrop{
  position:fixed; inset:0; z-index:99999; background:rgba(13,43,78,.42);
  opacity:0; pointer-events:none; transition:opacity .2s ease;
}
.cnp-sel-backdrop.is-open{ opacity:1; pointer-events:auto; }

@media (max-width:560px){
  .cnp-sel-panel.is-sheet{
    left:0 !important; right:0 !important; top:auto !important; bottom:0;
    width:auto !important; max-height:72vh; padding:10px 10px 16px;
    border-radius:18px 18px 0 0; transform:translateY(14px);
    box-shadow:0 -12px 40px rgba(13,43,78,.26);
  }
  .cnp-sel-panel.is-sheet.is-open{ transform:none; }
  .cnp-sel-panel.is-sheet::before{
    content:''; display:block; width:38px; height:4px; margin:2px auto 12px;
    border-radius:2px; background:#dbe3ec; flex:0 0 auto;
  }
  .cnp-sel-panel.is-sheet .cnp-sel-opt{ padding:13px 12px; font-size:14.5px; }
}

@media (prefers-reduced-motion:reduce){
  .cnp-sel-panel,
  .cnp-sel-caret,
  .cnp-sel-opt,
  .cnp-sel-backdrop{ transition:none; }
  .cnp-sel-panel{ transform:none; }
}
