/* ==========================================================
   Forms
   ========================================================== */

.field-group{
  margin-top:12px;
  display:flex;
  flex-direction:column;
  gap:4px;
}

.field-group label{
  font-size:13px;
  color:var(--muted);
}

.commodity-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.commodity-list-head{
  display:grid;
  grid-template-columns:84px 1fr 40px;
  gap:8px;
  align-items:center;
  margin-bottom:6px;
  font-size:11px;
  font-weight:700;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--muted);
}

.commodity-list-head__qty{
  text-align:center;
}

.commodity-row{
  display:grid;
  grid-template-columns:84px 1fr 40px;
  gap:8px;
  align-items:center;
}

.commodity-row input{
  width:100%;
}

.commodity-qty{
  text-align:center;
}

.btn-commodity-add{
  margin-top:8px;
  width:fit-content;
}

@media (max-width: 520px){
  .commodity-list-head,
  .commodity-row{
    grid-template-columns:76px 1fr 40px;
  }
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="date"],
input[type="time"],
input.flatpickr-input,
input.flatpickr-altInput,
select,
textarea{
  border-radius:var(--radius-sm);
  border:1px solid var(--border-strong);
  background:rgba(17, 17, 19, 0.86);
  padding:9px 11px;
  font-size:14px;
  color:var(--text);
  outline:none;
}

input::placeholder,
textarea::placeholder{
  color:rgba(148, 163, 184, 0.90);
}

select{
  appearance:none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position:calc(100% - 12px) 50%, calc(100% - 7px) 50%;
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
  padding-right:26px;
}

#supportMessage{
  resize:vertical;
  min-height:120px;
}

body.light input[type="text"],
body.light input[type="email"],
body.light input[type="password"],
body.light input[type="number"],
body.light input[type="tel"],
body.light input[type="date"],
body.light input[type="time"],
body.light input.flatpickr-input,
body.light input.flatpickr-altInput,
body.light select,
body.light textarea{
  background:rgba(248, 250, 252, 0.98);
  color:#0f172a;
  border-color:rgba(15, 23, 42, 0.22);
}

body.light input::placeholder,
body.light textarea::placeholder{
  color:rgba(15, 23, 42, 0.45);
}

body.light input:focus,
body.light select:focus,
body.light textarea:focus{
  border-color:#0f172a !important;
  box-shadow:0 0 0 3px rgba(15, 23, 42, 0.1) !important;
  background:#ffffff !important;
}

body:not(.light) input:-webkit-autofill,
body:not(.light) input:-webkit-autofill:hover,
body:not(.light) input:-webkit-autofill:focus,
body:not(.light) textarea:-webkit-autofill,
body:not(.light) textarea:-webkit-autofill:hover,
body:not(.light) textarea:-webkit-autofill:focus,
body:not(.light) select:-webkit-autofill,
body:not(.light) select:-webkit-autofill:hover,
body:not(.light) select:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--text) !important;
  caret-color:var(--text) !important;
  box-shadow:0 0 0 1000px rgba(17, 17, 19, 0.90) inset !important;
  -webkit-box-shadow:0 0 0 1000px rgba(17, 17, 19, 0.90) inset !important;
  transition:background-color 9999s ease-out 0s;
}

body.light input:-webkit-autofill,
body.light input:-webkit-autofill:hover,
body.light input:-webkit-autofill:focus,
body.light textarea:-webkit-autofill,
body.light textarea:-webkit-autofill:hover,
body.light textarea:-webkit-autofill:focus,
body.light select:-webkit-autofill,
body.light select:-webkit-autofill:hover,
body.light select:-webkit-autofill:focus{
  -webkit-text-fill-color:#0f172a !important;
  caret-color:#0f172a !important;
  box-shadow:0 0 0 1000px rgba(248, 250, 252, 0.98) inset !important;
  -webkit-box-shadow:0 0 0 1000px rgba(248, 250, 252, 0.98) inset !important;
  transition:background-color 9999s ease-out 0s;
}

body:not(.light) input:-moz-autofill,
body:not(.light) textarea:-moz-autofill,
body:not(.light) select:-moz-autofill{
  box-shadow:0 0 0 1000px rgba(17, 17, 19, 0.90) inset !important;
  color:var(--text) !important;
}

body.light input:-moz-autofill,
body.light textarea:-moz-autofill,
body.light select:-moz-autofill{
  box-shadow:0 0 0 1000px rgba(248, 250, 252, 0.98) inset !important;
  color:#0f172a !important;
}

body:not(.light) input[type="text"],
body:not(.light) input[type="number"],
body:not(.light) input[type="email"],
body:not(.light) input[type="password"],
body:not(.light) input[type="tel"],
body:not(.light) input[type="date"],
body:not(.light) input[type="time"],
body:not(.light) input.flatpickr-input,
body:not(.light) input.flatpickr-altInput,
body:not(.light) select,
body:not(.light) textarea{
  background:
    linear-gradient(180deg, rgba(255,246,232,.020), rgba(255,246,232,.006)),
    linear-gradient(180deg, rgba(22,22,24,.96), rgba(15,15,17,.96)) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  color:rgba(230,237,243,.92) !important;
  border-radius:var(--r-md) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,247,236,.03),
    inset 0 -1px 0 rgba(0,0,0,.24);
}

body:not(.light) input::placeholder,
body:not(.light) textarea::placeholder{
  color:rgba(152,165,179,.70) !important;
}

body:not(.light) input[type="text"]:focus,
body:not(.light) input[type="number"]:focus,
body:not(.light) input[type="email"]:focus,
body:not(.light) input[type="password"]:focus,
body:not(.light) input[type="tel"]:focus,
body:not(.light) input[type="date"]:focus,
body:not(.light) input[type="time"]:focus,
body:not(.light) input.flatpickr-input:focus,
body:not(.light) input.flatpickr-altInput:focus,
body:not(.light) select:focus,
body:not(.light) textarea:focus{
  border-color:rgba(255,170,95,0.22) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.03),
    inset 0 -1px 0 rgba(0,0,0,.24),
    0 0 0 1px rgba(255,106,0,0.14),
    0 0 18px rgba(255,106,0,0.08);
  outline:none;
}

body.light input[type="text"],
body.light input[type="number"],
body.light input[type="email"],
body.light input[type="password"],
body.light input[type="tel"],
body.light input[type="date"],
body.light input[type="time"],
body.light input.flatpickr-input,
body.light input.flatpickr-altInput,
body.light select,
body.light textarea{
  background:rgba(255,255,255,.92) !important;
  border:1px solid rgba(15,23,42,.14) !important;
  color:rgba(15,23,42,.92) !important;
  border-radius:var(--r-md) !important;
}

.two-col{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}

@media(max-width:720px){
  .two-col{
    grid-template-columns:1fr;
  }
}