/* ==========================================================
   HASHVIX INPUT SYSTEM
========================================================== */

/* ==========================================================
   GROUP
========================================================== */

.hx-input-group{

display:flex;

flex-direction:column;

gap:10px;

margin-bottom:24px;

}

/* ==========================================================
   LABEL
========================================================== */

.hx-label{

font-size:14px;

font-weight:600;

color:var(--hx-text-light);

}

/* ==========================================================
   BASE INPUT
========================================================== */

.hx-input,
.hx-select,
.hx-textarea{

width:100%;

padding:16px 20px;

background:rgba(255,255,255,.04);

border:1px solid rgba(255,255,255,.08);

border-radius:18px;

color:var(--hx-text);

font-size:15px;

transition:var(--hx-normal);

backdrop-filter:blur(20px);

}

/* ==========================================================
   PLACEHOLDER
========================================================== */

.hx-input::placeholder,
.hx-textarea::placeholder{

color:var(--hx-text-muted);

}

/* ==========================================================
   FOCUS
========================================================== */

.hx-input:focus,
.hx-select:focus,
.hx-textarea:focus{

border-color:var(--hx-primary);

box-shadow:

0 0 0 4px rgba(79,140,255,.12);

background:rgba(255,255,255,.06);

}

/* ==========================================================
   TEXTAREA
========================================================== */

.hx-textarea{

min-height:160px;

resize:vertical;

}

/* ==========================================================
   SELECT
========================================================== */

.hx-select{

cursor:pointer;

}

/* ==========================================================
   SEARCH
========================================================== */

.hx-search{

position:relative;

display:flex;

align-items:center;

}

.hx-search input{

width:100%;

padding:16px 20px 16px 56px;

background:rgba(255,255,255,.04);

border:1px solid rgba(255,255,255,.08);

border-radius:999px;

color:white;

}

.hx-search i{

position:absolute;

left:20px;

font-size:18px;

color:var(--hx-text-muted);

}

/* ==========================================================
   ICON INPUT
========================================================== */

.hx-input-icon{

position:relative;

}

.hx-input-icon input{

padding-left:55px;

}

.hx-input-icon i{

position:absolute;

left:18px;

top:50%;

transform:translateY(-50%);

font-size:18px;

color:var(--hx-text-muted);

}

/* ==========================================================
   INPUT ROW
========================================================== */

.hx-input-row{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:20px;

}

/* ==========================================================
   CHECKBOX
========================================================== */

.hx-check{

display:flex;

align-items:center;

gap:12px;

cursor:pointer;

}

.hx-check input{

width:18px;

height:18px;

accent-color:var(--hx-primary);

}

/* ==========================================================
   RADIO
========================================================== */

.hx-radio{

display:flex;

align-items:center;

gap:10px;

cursor:pointer;

}

.hx-radio input{

accent-color:var(--hx-primary);

}

/* ==========================================================
   SWITCH
========================================================== */

.hx-switch{

position:relative;

display:inline-block;

width:56px;

height:30px;

}

.hx-switch input{

display:none;

}

.hx-slider{

position:absolute;

inset:0;

background:#2b3445;

border-radius:999px;

transition:.3s;

cursor:pointer;

}

.hx-slider::before{

content:"";

position:absolute;

width:24px;

height:24px;

left:3px;

top:3px;

border-radius:50%;

background:white;

transition:.3s;

}

.hx-switch input:checked + .hx-slider{

background:var(--hx-primary);

}

.hx-switch input:checked + .hx-slider::before{

transform:translateX(26px);

}


/* ==========================================================
   FILE UPLOAD
========================================================== */

.hx-upload{

position:relative;

border:2px dashed rgba(255,255,255,.10);

border-radius:24px;

padding:40px;

text-align:center;

background:rgba(255,255,255,.03);

transition:var(--hx-normal);

cursor:pointer;

}

.hx-upload:hover{

border-color:var(--hx-primary);

background:rgba(79,140,255,.05);

}

.hx-upload input{

position:absolute;

inset:0;

opacity:0;

cursor:pointer;

}

.hx-upload i{

font-size:48px;

color:var(--hx-primary);

margin-bottom:16px;

display:block;

}

.hx-upload h4{

margin-bottom:8px;

}

.hx-upload p{

color:var(--hx-text-muted);

font-size:14px;

}


/* ==========================================================
   IMAGE UPLOAD
========================================================== */

.hx-image-upload{

position:relative;

width:180px;

height:180px;

border-radius:24px;

overflow:hidden;

background:rgba(255,255,255,.04);

border:2px dashed rgba(255,255,255,.08);

display:flex;

align-items:center;

justify-content:center;

cursor:pointer;

transition:.3s;

}

.hx-image-upload:hover{

border-color:var(--hx-primary);

}

.hx-image-upload img{

width:100%;

height:100%;

object-fit:cover;

}

.hx-image-upload input{

display:none;

}


/* ==========================================================
   PROMPT BOX
========================================================== */

.hx-prompt{

background:rgba(255,255,255,.04);

border:1px solid rgba(255,255,255,.08);

border-radius:24px;

padding:24px;

backdrop-filter:blur(25px);

}

.hx-prompt textarea{

width:100%;

min-height:180px;

background:transparent;

border:none;

color:white;

resize:vertical;

}

.hx-prompt textarea:focus{

outline:none;

}


/* ==========================================================
   ERROR
========================================================== */

.hx-input-error,

.form-control.is-invalid{

border-color:#ef4444 !important;

box-shadow:0 0 0 4px rgba(239,68,68,.12);

}


/* ==========================================================
   SUCCESS
========================================================== */

.hx-input-success,

.form-control.is-valid{

border-color:#10b981 !important;

box-shadow:0 0 0 4px rgba(16,185,129,.12);

}


/* ==========================================================
   HELP TEXT
========================================================== */

.hx-help{

margin-top:8px;

font-size:13px;

color:var(--hx-text-muted);

}


/* ==========================================================
   INPUT WITH BUTTON
========================================================== */

.hx-input-action{

display:flex;

gap:14px;

}

.hx-input-action .hx-input{

flex:1;

}


/* ==========================================================
   BOOTSTRAP SUPPORT
========================================================== */

.form-control,

.form-select{

background:rgba(255,255,255,.04);

border:1px solid rgba(255,255,255,.08);

border-radius:18px;

color:var(--hx-text);

padding:16px 20px;

transition:var(--hx-normal);

}

.form-control:focus,

.form-select:focus{

border-color:var(--hx-primary);

background:rgba(255,255,255,.06);

box-shadow:0 0 0 4px rgba(79,140,255,.12);

color:var(--hx-text);

}

.form-control::placeholder{

color:var(--hx-text-muted);

}


/* ==========================================================
   DISABLED
========================================================== */

.hx-input:disabled,

.form-control:disabled,

.form-select:disabled{

opacity:.6;

cursor:not-allowed;

}


/* ==========================================================
   MOBILE
========================================================== */

@media(max-width:768px){

.hx-input-row{

grid-template-columns:1fr;

}

.hx-image-upload{

width:140px;

height:140px;

}

.hx-upload{

padding:28px;

}

.hx-input-action{

flex-direction:column;

}

}