/* Hytale UI Controls (Buttons, Inputs, Switches, Selects)
   Works with your existing Hytale theme.
*/

/* ===== Buttons ===== */
.hy-btn{
  --bg: rgba(0, 180, 255, .12);
  --bd: rgba(120, 220, 255, .25);
  --tx: #d7ecff;
  --glow: rgba(120, 220, 255, .22);

  display:inline-flex;
  align-items:center;
  gap:8px;
  border-radius:14px;
  border:1px solid var(--bd);
  background:linear-gradient(135deg, var(--bg), rgba(11,18,32,.65));
  color:var(--tx);
  font-family:Raleway;
  font-weight:700;
  letter-spacing:.2px;
  text-decoration:none;
  cursor:pointer;
  user-select:none;
  white-space:nowrap;

  box-shadow:
    0 10px 26px rgba(0,0,0,.30),
    0 0 0 1px rgba(255,255,255,.03) inset;
  transform:translateY(0);
  transition:
    transform .14s ease,
    box-shadow .14s ease,
    border-color .14s ease,
    background .14s ease,
    filter .14s ease;
}

.hy-btn:focus{ outline:none; }
.hy-btn:focus-visible{
  box-shadow:0 0 0 3px rgba(159,227,255,.22), 0 10px 26px rgba(0,0,0,.30);
}

.hy-btn:hover{
  transform:translateY(-1px);
  border-color:rgba(255,255,255,.10);
  box-shadow:
    0 14px 34px rgba(0,0,0,.35),
    0 0 0 1px rgba(255,255,255,.05) inset,
    0 0 22px var(--glow);
  filter:brightness(1.08);
}

.hy-btn:active{
  transform:translateY(0) scale(.98);
  box-shadow:0 8px 18px rgba(0,0,0,.28);
  filter:brightness(.98);
}

.hy-btn__icon{ width:18px; height:18px; display:inline-block; flex:0 0 auto; opacity:.95; fill:currentColor; }
.hy-btn__label{ line-height:1; }

.hy-btn--sm{ padding:7px 10px; font-size:12.5px; border-radius:12px; }
.hy-btn--sm .hy-btn__icon{ width:16px; height:16px; }

.hy-btn--lg{ padding:11px 14px; font-size:14px; border-radius:16px; }
.hy-btn--lg .hy-btn__icon{ width:19px; height:19px; }

.hy-btn--blue{  --bg: rgba(0, 180, 255, .12);  --bd: rgba(120, 220, 255, .25); --tx:#d7ecff; --glow: rgba(120, 220, 255, .22); }
.hy-btn--green{ --bg: rgba(40, 200, 120, .14); --bd: rgba(120, 255, 180, .22); --tx:#dfffee; --glow: rgba(120, 255, 180, .18); }
.hy-btn--yellow{--bg: rgba(255, 165, 40, .14); --bd: rgba(255, 190, 80, .28); --tx:#fff1d8; --glow: rgba(255, 190, 80, .16); }
.hy-btn--red{   --bg: rgba(255, 70, 70, .14);  --bd: rgba(255, 120, 120, .22); --tx:#ffe3e3; --glow: rgba(255, 120, 120, .16); }

/* ===== Inputs / Selects ===== */
.hy-input,
.hy-select{
  background:linear-gradient(135deg, rgba(16,36,71,.55), rgba(11,18,32,.78));
  border:1px solid rgba(120,180,255,.18);
  color:#d7ecff;
  border-radius:14px;
  padding:10px 12px;
  font:14px Arial,sans-serif;
  box-shadow:0 10px 26px rgba(0,0,0,.26);
  box-sizing:border-box;
    transition:border-color .14s ease, box-shadow .14s ease, filter .14s ease;
}

.hy-input::placeholder{ color:rgba(215,236,255,.55); }

.hy-input:focus,
.hy-select:focus{
  outline:none;
  border-color:rgba(159,227,255,.45);
  box-shadow:0 0 0 3px rgba(159,227,255,.16), 0 10px 26px rgba(0,0,0,.26);
  filter:brightness(1.04);
}

.hy-input--sm{ padding:7px 10px; font-size:13px; border-radius:12px; }

.hy-select--sm{
  height:34px;
  padding:6px 34px 6px 12px;
  font-size:13px;
  border-radius:12px;
  line-height:22px;
}

.hy-input--lg{ padding:11px 14px; font-size:14px; border-radius:16px; }

.hy-select--lg{
  height:40px;
  padding:11px 34px 11px 14px;
  font-size:14px;
  border-radius:16px;
  line-height:20px;
}

.hy-select{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  background-image:
    linear-gradient(135deg, rgba(16,36,71,.55), rgba(11,18,32,.78)),
    linear-gradient(45deg, transparent 50%, rgba(215,236,255,.7) 50%),
    linear-gradient(135deg, rgba(215,236,255,.7) 50%, transparent 50%);
  background-repeat:no-repeat;
  background-position:0 0, calc(100% - 18px) 50%, calc(100% - 12px) 50%;
  background-size:auto, 6px 6px, 6px 6px;
  padding-right:34px;
}

/* ===== Switch (checkbox) ===== */
.hy-switch{
  display:inline-flex;
  align-items:center;
  gap:10px;
  user-select:none;
  font-family:Raleway;
  color:rgba(215,236,255,.85);
}

.hy-switch__wrap{
  position:relative;
  width:50px;
  height:28px;
  flex:0 0 auto;
}

.hy-switch__input{
  position:absolute;
  inset:0;
  opacity:0;
  width:100%;
  height:100%;
  cursor:pointer;
  z-index: 3;
}

.hy-switch__track{
  position:absolute;
  inset:0;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(120,180,255,.18);
  box-shadow:0 10px 22px rgba(0,0,0,.26);
  transition:background .14s ease, border-color .14s ease, box-shadow .14s ease;
}

.hy-switch__thumb{
  position:absolute;
  top:4px;
  left:4px;
  width:20px;
  height:20px;
  border-radius:999px;
  background:rgba(159,227,255,.65);
  box-shadow:0 10px 18px rgba(0,0,0,.28);
  transition:transform .14s ease, background .14s ease;
}

.hy-switch__track,
.hy-switch__thumb{
  pointer-events: none;
  z-index: 1;
}

.hy-switch__input:focus + .hy-switch__track{
  box-shadow:0 0 0 3px rgba(159,227,255,.16), 0 10px 22px rgba(0,0,0,.26);
}

.hy-switch__input:checked + .hy-switch__track{
  background:rgba(40,200,120,.18);
  border-color:rgba(120,255,180,.24);
}

.hy-switch__input:checked + .hy-switch__track .hy-switch__thumb{
  transform:translateX(22px);
  background:rgba(120,255,180,.70);
}

.hy-switch__text{
  font-size:13px;
  color:rgba(215,236,255,.75);
}

.hy-switch__text b{ color:#d7ecff; }

/* Optional sizes */
.hy-switch--sm .hy-switch__wrap{ width:44px; height:24px; }
.hy-switch--sm .hy-switch__thumb{ width:16px; height:16px; top:4px; left:4px; }
.hy-switch--sm .hy-switch__input:checked + .hy-switch__track .hy-switch__thumb{ transform:translateX(20px); }

.hy-switch--lg .hy-switch__wrap{ width:56px; height:32px; }
.hy-switch--lg .hy-switch__thumb{ width:24px; height:24px; top:4px; left:4px; }
.hy-switch--lg .hy-switch__input:checked + .hy-switch__track .hy-switch__thumb{ transform:translateX(24px); }

/* ===== Textarea (multiline) ===== */
.hy-textarea{
  background:linear-gradient(135deg, rgba(16,36,71,.55), rgba(11,18,32,.78));
  border:1px solid rgba(120,180,255,.18);
  color:#d7ecff;
  border-radius:14px;
  padding:10px 12px;
  font:14px Arial,sans-serif;
  box-shadow:0 10px 26px rgba(0,0,0,.26);
  box-sizing:border-box;
  transition:border-color .14s ease, box-shadow .14s ease, filter .14s ease;
  width:100%;
  resize:vertical;
  min-height:86px;
}

.hy-textarea::placeholder{ color:rgba(215,236,255,.55); }

.hy-textarea:focus{
  outline:none;
  border-color:rgba(159,227,255,.45);
  box-shadow:0 0 0 3px rgba(159,227,255,.16), 0 10px 26px rgba(0,0,0,.26);
  filter:brightness(1.04);
}

.hy-textarea--sm{ padding:7px 10px; font-size:13px; border-radius:12px; min-height:72px; }
.hy-textarea--lg{ padding:11px 14px; font-size:14px; border-radius:16px; min-height:110px; }

/* ===== Range Slider (number slider) ===== */
.hy-range-wrap{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:Raleway;
  color:rgba(215,236,255,.85);
}

.hy-range__value{
  min-width:44px;
  text-align:center;
  padding:6px 8px;
  border-radius:12px;
  border:1px solid rgba(120,180,255,.18);
  background:linear-gradient(135deg, rgba(16,36,71,.45), rgba(11,18,32,.75));
  box-shadow:0 10px 22px rgba(0,0,0,.22);
  font-size:12.5px;
  color:#d7ecff;
}

.hy-range{
  appearance:none;
  -webkit-appearance:none;
  width:190px;
  height:28px;
  background:transparent;
  cursor:pointer;
}

.hy-range--sm .hy-range{ width:160px; }
.hy-range--lg .hy-range{ width:220px; }

.hy-range::-webkit-slider-runnable-track{
  height:8px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(120,180,255,.18);
  box-shadow:0 10px 22px rgba(0,0,0,.22);
}

.hy-range::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:18px;
  height:18px;
  border-radius:999px;
  margin-top:-6px;
  background:rgba(159,227,255,.72);
  border:1px solid rgba(159,227,255,.35);
  box-shadow:0 10px 18px rgba(0,0,0,.30);
  transition:transform .14s ease, filter .14s ease;
}

.hy-range:active::-webkit-slider-thumb{ transform:scale(1.06); filter:brightness(1.05); }

.hy-range::-moz-range-track{
  height:8px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(120,180,255,.18);
  box-shadow:0 10px 22px rgba(0,0,0,.22);
}

.hy-range::-moz-range-thumb{
  width:18px;
  height:18px;
  border-radius:999px;
  background:rgba(159,227,255,.72);
  border:1px solid rgba(159,227,255,.35);
  box-shadow:0 10px 18px rgba(0,0,0,.30);
  transition:transform .14s ease, filter .14s ease;
}

.hy-range:active::-moz-range-thumb{ transform:scale(1.06); filter:brightness(1.05); }

.hy-range:focus{ outline:none; }
.hy-range:focus-visible::-webkit-slider-thumb{ box-shadow:0 0 0 3px rgba(159,227,255,.16), 0 10px 18px rgba(0,0,0,.30); }
.hy-range:focus-visible::-moz-range-thumb{ box-shadow:0 0 0 3px rgba(159,227,255,.16), 0 10px 18px rgba(0,0,0,.30); }


/* Panel container for domain section */
.hy-panel{
  position:relative;
  overflow:hidden;

  /* smoother deep-blue base */
  background:
    linear-gradient(135deg,
      rgba(16, 36, 71, .55),
      rgba(11, 18, 32, .92)
    );

  border:1px solid rgba(120,180,255,.18);
  border-radius:18px;
  padding:16px;

  box-shadow:
    0 10px 30px rgba(0,0,0,.35),
    0 0 0 1px rgba(255,255,255,.03) inset;
	
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);	
}

/* Layered soft glow like the notice, but blue */
.hy-panel::before{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;

  background:
    radial-gradient(circle at 14% 10%, rgba(120,220,255,.22), transparent 55%),
    radial-gradient(circle at 86% 120%, rgba(80,140,255,.16), transparent 60%),
    radial-gradient(circle at 45% 55%, rgba(40,100,255,.10), transparent 62%);

  opacity:.95;
}

/* subtle highlight sweep (adds smoothness) */
.hy-panel::after{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;

  background:
    linear-gradient(120deg,
      transparent 0%,
      rgba(255,255,255,.04) 35%,
      transparent 70%
    );

  opacity:.35;
}

/* Keep all content above the glow layers */
.hy-panel > *{
  position:relative;
  z-index:1;
}


.hy-panel__title{
  font-size:16px;
  font-weight:800;
  color:#e7f4ff;
  margin:0 0 8px 0;
}

.hy-panel__desc{
  margin:0 0 12px 0;
  color:rgba(215,236,255,.75);
}

/* The row layout */
.hy-domain-row{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.hy-domain-label{
  font-weight:700;
  color:rgba(215,236,255,.85);
  min-width:130px;
}

.hy-domain-controls{
  display:flex;
  align-items:center;
  gap:10px;
  flex:1;
  min-width:260px;
}

.hy-domain-dot{
  color:rgba(215,236,255,.55);
  font-weight:700;
}

/* Action column */
.hy-domain-action{
  display:flex;
  justify-content:flex-end;
}

/* Small pill for port / preview */
.hy-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 10px;
  border-radius:14px;
  background:rgba(0,180,255,.10);
  border:1px solid rgba(120,220,255,.20);
  color:#9fe3ff;
  font:13px Arial,sans-serif;
}

.hy-pill--mono{
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  color:#d7ecff;
}

/* Mobile */
@media (max-width:700px){
  .hy-domain-label{min-width:auto; width:100%;}
  .hy-domain-action{width:100%;}
  .hy-domain-action .hy-btn{width:100%; justify-content:center;}
}

.hy-hidden{
  display:none !important;
}


/* Bigger, less-rounded server address preview */
.hy-pill--address{
  padding:10px 14px;
  border-radius:10px;                 /* less rounded than before */
  font-size:14px;
  font-weight:700;
  color:#d7ecff;
  background:rgba(0,180,255,.08);
  border:1px solid rgba(120,220,255,.22);
}

/* Tiny copy button next to preview (minimal rounding) */
.hy-copy-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 10px;
  border-radius:10px;
  border:1px solid rgba(120,220,255,.22);
  background:rgba(0,180,255,.08);
  color:#9fe3ff;
  font:12px Arial,sans-serif;
  font-weight:800;
  letter-spacing:.3px;
  cursor:pointer;
  user-select:none;
  transition:transform .12s ease, filter .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.hy-copy-btn:hover{
  transform:translateY(-1px);
  filter:brightness(1.08);
  box-shadow:0 0 18px rgba(120,220,255,.16);
  border-color:rgba(255,255,255,.10);
}

.hy-copy-btn:active{
  transform:translateY(0) scale(.98);
  filter:brightness(.98);
}

.hy-copy-btn svg{
  width:14px;
  height:14px;
  fill:currentColor;
  opacity:.95;
}

/* Optional “Copied” feedback state */
.hy-copy-btn.is-copied{
  border-color:rgba(120,255,180,.25);
  color:#dfffee;
  background:rgba(40,200,120,.10);
}

/* ===== Select width fixes (domain picker) =====
   Prevent flexbox from shrinking the <select> too small (e.g. cutting off 'hytale.au').
   These rules are additive and safe with your existing theme.
*/

/* Give selects a sensible minimum width (can still grow if you set style="min-width:..." or in layout) */
.hy-select{ min-width: 160px; }
.hy-select--sm{ min-width: 140px; }
.hy-select--lg{ min-width: 200px; }

/* In your domain row, do NOT allow the select to shrink smaller than its content */
.hy-domain-controls .hy-select{ flex: 0 0 auto; }

/* Ensure the text isn't visually clipped by the inner padding/arrow */
.hy-select{ padding-right: 36px; }

/* Allow controls to wrap on smaller widths */
.hy-domain-controls{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;          /* key */
}

/* Make input/select able to wrap instead of shrinking forever */
.hy-domain-controls .hy-input,
.hy-domain-controls .hy-select{
  flex:0 1 auto;
  min-width:160px;         /* adjust as you like */
}

/* On mobile, make each control take full width (nice stacked layout) */
@media (max-width:700px){
  .hy-domain-controls{
    gap:8px;
  }

  .hy-domain-controls .hy-input,
  .hy-domain-controls .hy-select{
    flex:1 1 100%;
    width:100%;
    min-width:0;
  }

  /* Dot + port can sit on their own line too */
  .hy-domain-dot{ display:none; }    /* optional: hide the dot on mobile */
  .hy-pill--mono{ width:fit-content; } /* or set width:100% if you want */
}
	
	
.hy-field-error{
  margin-top:6px;
  font-size:13px;
  color:#ffb4b4;
}

.hy-input--error{
  border:1px solid rgba(255,80,80,.70) !important;
  box-shadow:0 0 0 3px rgba(255,80,80,.15), 0 10px 26px rgba(0,0,0,.26) !important;
}