/* Design tokens (injected from settings into :root) */
:root{
  --mhnwpd-primary:#111827;
  --mhnwpd-accent:#f59e0b;
  --mhnwpd-bg:#fff;
  --mhnwpd-border:#e5e7eb;
  --mhnwpd-radius:16px;
  --mhnwpd-shadow:10px;
  --mhnwpd-fs:14px;
}

.mhnwpd {
    max-width: 800px;
    width: 450px;
    background: var(--mhnwpd-bg);
    border: 1px solid var(--mhnwpd-border);
    border-radius: var(--mhnwpd-radius);
    padding: 18px;
    font-size: var(--mhnwpd-fs);
    box-shadow: 0 calc(var(--mhnwpd-shadow) * 0.2) calc(var(--mhnwpd-shadow) * 1.2) rgba(0, 0, 0, .06);
}

.mhnwpd__title{margin:0 0 6px;color:#242424;font-size:18px}
.mhnwpd__sub {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
}
.mhnwpd__chips{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.mhnwpd button.mhnwpd__chip{
    border:1px solid var(--mhnwpd-border);
    background: var(--mhnwpd-primary);
    border-radius: 8px;
    padding: 8px 12px;
    cursor: pointer;
    color: #ffffff;
    font-size: 13px;
    font-weight: 500;
}

.mhnwpd__field{margin:10px 0}
.mhnwpd__field label{display:block;margin-bottom:6px;opacity:.8}
.mhnwpd__field input{
  width:100%;
  padding:10px 12px;
  border:1px solid var(--mhnwpd-border);
  border-radius:calc(var(--mhnwpd-radius) - 4px);
  outline:none;
}

.mhnwpd button.mhnwpd__chip:active {
    background: color-mix(in srgb, var(--mhnwpd-primary), #000000 20%);
}

.mhnwpd button.mhnwpd__chip:hover {
    opacity: 0.8;
}
.mhnwpd__field input:focus{
  border-color:var(--mhnwpd-accent);
  box-shadow:0 0 0 3px rgba(245,158,11,.18);
}

.mhnwpd__gateways{
  margin:12px 0;
  padding:12px;
  border:1px solid var(--mhnwpd-border);
  border-radius:calc(var(--mhnwpd-radius) - 4px);
}
.mhnwpd__gwTitle {
    margin-bottom: 10px;
    color: #606060;
    font-size: 13px;
    font-weight: 500;
}
.mhnwpd__gw{
  display:flex;align-items:center;gap:10px;
  padding:10px;
  border:1px solid var(--mhnwpd-border);
  border-radius:calc(var(--mhnwpd-radius) - 4px);
  margin-bottom:8px;
  cursor:pointer;
}
.mhnwpd__gw:last-child{margin-bottom:0}
.mhnwpd__gwName{font-weight:700;color:var(--mhnwpd-primary);font-size:13px}

.mhnwpd .mhnwpd__btn {
    width: 100%;
    border: 0;
    border-radius: calc(var(--mhnwpd-radius) - 2px);
    padding: 12px 14px;
    font-weight: 600;
    cursor: pointer;
    background: var(--mhnwpd-primary);
    color: #fff;
    font-size: 14px;
}
.mhnwpd__btn:hover{filter:brightness(1.05)}
.mhnwpd.is-loading .mhnwpd__btn{opacity:.75;cursor:progress}

.mhnwpd__msg{margin-top:10px;font-size:13px}
.mhnwpd__msg.is-err{color:#b00020}
.mhnwpd__msg.is-ok{opacity:.85}

.mhnwpd__gateways {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.mhnwpd__gw {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--mhnwpd-border, #e5e7eb);
  border-radius: 12px;
  cursor: pointer;
  transition: all .2s ease;
  background: #fff;
}

.mhnwpd__gw:hover {
  border-color: var(--mhnwpd-primary, #2563eb);
}

.mhnwpd__gw input {
  display: none;
}

.mhnwpd__gwIcon img,
.mhnwpd__gwIcon svg {
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.mhnwpd__gwName {
  font-weight: 500;
  font-size: 14px;
}

.mhnwpd__gw input:checked + .mhnwpd__gwIcon + .mhnwpd__gwName,
.mhnwpd__gw input:checked + .mhnwpd__gwName {
  color: var(--mhnwpd-primary, #2563eb);
}
span.mhnwpd__gwIcon {
    width: 30px;
}

.mhnwpd__gw input:checked ~ * {
  filter: none;
}

.mhnwpd__gw:has(input:checked) {
  border-color: var(--mhnwpd-primary, #2563eb);
  background: rgba(37,99,235,.04);
}

@media (max-width: 600px) {
    .mhnwpd {
        max-width: 100%;
    }
    
    span.mhnwpd__gwIcon {
        width: 20px;
    }
}