/* Nexos Contact Center — Public (Force Dark Titanium, theme-safe)
   - Scoped variables to .nxcc-wrap so OS "light mode" won't flip it.
   - Uses high specificity + targeted !important to win against theme input styles.
*/

.nxcc-wrap{
  --nxcc-bg: #050816;
  --nxcc-ink: #e9eefc;
  --nxcc-ink-soft: rgba(233,238,252,.78);
  --nxcc-ink-mute: rgba(233,238,252,.62);

  --nxcc-glass: rgba(255,255,255,.06);
  --nxcc-glass-2: rgba(255,255,255,.04);
  --nxcc-border: rgba(255,255,255,.10);
  --nxcc-border-2: rgba(255,255,255,.14);

  --nxcc-accent: #6aa9ff;
  --nxcc-accent-2: #3b82f6;

  --nxcc-radius: 18px;

  max-width:1040px;
  margin:20px auto;
  padding:0 14px;
}

.nxcc-wrap .nxcc-cardbox{
  border-radius: var(--nxcc-radius);
  border:1px solid var(--nxcc-border);
  background: linear-gradient(180deg, var(--nxcc-glass), var(--nxcc-glass-2)) !important;
  backdrop-filter:saturate(140%) blur(10px);
  box-shadow: 0 28px 70px rgba(0,0,0,.22);
  padding:18px;
  color: var(--nxcc-ink) !important;
}
/* FIX: prevent 100% width fields from overflowing their grid column */
.nxcc-wrap, 
.nxcc-wrap *{
  box-sizing: border-box;
}

.nxcc-wrap .nxcc-grid{
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.nxcc-wrap .nxcc-field{
  min-width: 0;
}

.nxcc-wrap .nxcc-field input,
.nxcc-wrap .nxcc-field textarea,
.nxcc-wrap .nxcc-field select{
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.nxcc-wrap .nxcc-cardhead{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  margin-bottom:14px;
  flex-wrap:wrap;
}
.nxcc-wrap .nxcc-title{font-size:24px;font-weight:900;letter-spacing:-.02em;color:var(--nxcc-ink) !important;}
.nxcc-wrap .nxcc-sub{color:var(--nxcc-ink-soft) !important;}

.nxcc-wrap .nxcc-alert{
  padding:12px 12px;
  border-radius:14px;
  margin:10px 0 14px 0;
  font-weight:800;
}
.nxcc-wrap .nxcc-alert-success{
  background: rgba(16,185,129,.12);
  border:1px solid rgba(16,185,129,.22);
  color: var(--nxcc-ink) !important;
}
.nxcc-wrap .nxcc-alert-error{
  background: rgba(239,68,68,.10);
  border:1px solid rgba(239,68,68,.20);
  color: var(--nxcc-ink) !important;
}
.nxcc-wrap .nxcc-ref{margin-left:8px;color:var(--nxcc-ink-soft);font-weight:900;}

/* Hub cards */
.nxcc-wrap .nxcc-hub{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:14px;}
@media (max-width: 900px){.nxcc-wrap .nxcc-hub{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width: 520px){.nxcc-wrap .nxcc-hub{grid-template-columns:1fr;}}

.nxcc-wrap .nxcc-card{
  appearance:none;
  border:1px solid var(--nxcc-border);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03)) !important;
  border-radius:16px;
  padding:12px 12px;
  text-align:left;
  cursor:pointer;
  transition:transform .12s ease, border-color .12s ease, background .12s ease, box-shadow .12s ease;
  box-shadow:0 18px 48px rgba(0,0,0,.18);
  color:var(--nxcc-ink) !important;
}
.nxcc-wrap .nxcc-card:hover{
  transform:translateY(-1px);
  border-color:var(--nxcc-border-2);
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.04)) !important;
}
.nxcc-wrap .nxcc-card.is-active{
  border-color: rgba(106,169,255,.55);
  box-shadow:0 20px 60px rgba(59,130,246,.18), 0 18px 48px rgba(0,0,0,.18);
  background: linear-gradient(180deg, rgba(106,169,255,.20), rgba(255,255,255,.04)) !important;
}
.nxcc-wrap .nxcc-card-title{font-weight:900;letter-spacing:-.01em;}
.nxcc-wrap .nxcc-card-sub{color:var(--nxcc-ink-mute) !important;font-size:12px;margin-top:4px;line-height:1.45;}

/* Form */
.nxcc-wrap .nxcc-form{margin-top:8px;}
.nxcc-wrap .nxcc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
@media (max-width: 640px){.nxcc-wrap .nxcc-grid{grid-template-columns:1fr;}}

.nxcc-wrap .nxcc-field label{
  display:block;
  font-weight:900;
  margin:0 0 6px 0;
  color:var(--nxcc-ink-soft) !important;
  font-size:13px;
}

.nxcc-wrap .nxcc-field input,
.nxcc-wrap .nxcc-field textarea,
.nxcc-wrap .nxcc-field select{
  width:100%;
  max-width:100%;
  border-radius:14px;
  border:1px solid var(--nxcc-border) !important;
  padding:11px 12px;
  background: rgba(2,6,23,.55) !important;
  color: var(--nxcc-ink) !important;
  outline:none;
}

.nxcc-wrap .nxcc-field input::placeholder,
.nxcc-wrap .nxcc-field textarea::placeholder{color:var(--nxcc-ink-mute) !important;}

.nxcc-wrap .nxcc-field textarea{resize:vertical;min-height:140px;}
.nxcc-wrap .nxcc-field input:focus,
.nxcc-wrap .nxcc-field textarea:focus,
.nxcc-wrap .nxcc-field select:focus{
  border-color: rgba(106,169,255,.60) !important;
  box-shadow:0 0 0 4px rgba(106,169,255,.14) !important;
}

.nxcc-wrap .nxcc-field-full{grid-column:1 / -1;}
.nxcc-wrap .nxcc-help{font-size:12px;color:var(--nxcc-ink-mute) !important;margin-top:6px;}

.nxcc-wrap .nxcc-btn{
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.14) !important;
  background: linear-gradient(180deg, rgba(106,169,255,.95), rgba(59,130,246,.88)) !important;
  color:#061021 !important;
  border-radius:16px;
  padding:12px 14px;
  font-weight:1000;
  cursor:pointer;
  box-shadow:0 22px 60px rgba(59,130,246,.22);
}
.nxcc-wrap .nxcc-btn:hover{filter:brightness(1.02)}
.nxcc-wrap .nxcc-mini{margin-top:10px;font-size:12px;color:var(--nxcc-ink-mute) !important;line-height:1.5}

.nxcc-wrap .nxcc-hp{position:absolute;left:-9999px;top:-9999px;height:1px;width:1px;overflow:hidden;}