/* =====================
   GLOBAL
   ===================== */
*, *::before, *::after{ box-sizing:border-box; }

:root{
  --bg-card:#ffffff;
  --bg-input:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --icon:#0f172a;
  --shadow:0 8px 28px rgba(15,23,42,.08);
  --radius:14px;
}

/* =====================
   FORM WRAPPER
   ===================== */
.chb-form-wrap{
  background:var(--bg-card);
  padding:22px;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

/* =====================
   HEADER
   ===================== */
.chb-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:20px;
}

.chb-head-left{ min-width:0; }

.chb-title{
  margin:0;
  font-size:18px;
  font-weight:600;
  color:var(--text);
}

.chb-sub{
  margin:6px 0 0;
  font-size:14px;
  color:var(--muted);
}

/* PRICE */
.chb-price{
  text-align:right;
  white-space:nowrap;
}

.chb-price-amount{
  font-size:20px;
  font-weight:700;
  color:var(--text);
  line-height:1.1;
}

.chb-price-unit{
  font-size:12px;
  color:var(--muted);
}

/* =====================
   GRID
   ===================== */
.chb-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:14px;
}

.chb-field{ min-width:0; }

.chb-field label{
  display:block;
  font-size:13px;
  margin-bottom:6px;
  color:var(--text);
}

/* =====================
   INPUT + ICON
   ===================== */
.chb-input-wrap{ position:relative; }

.chb-icon{
  position:absolute;
  left:12px;
  top:50%;
  transform:translateY(-50%);
  width:16px;
  height:16px;
  color:var(--icon);
  pointer-events:none;
}

.chb-field input{
  width:100%;
  height:44px;
  background:var(--bg-input);
  border:none;
  border-radius:10px;
  padding:0 12px;
  font-size:14px;
  box-shadow:0 1px 4px rgba(15,23,42,.08);
  outline:none;
}

/* ❌ REMOVE FOCUS EFFECT */
.chb-field input:focus{
  box-shadow:0 1px 4px rgba(15,23,42,.08);
  outline:none;
}

/* =====================
   BUTTON
   ===================== */
.chb-btn{
  margin-top:18px;
  width:100%;
  height:46px;
  border:none;
  border-radius:10px;
  background:#B38864;
  color:#fff;
  font-size:14.5px;
  font-weight:600;
  cursor:pointer;
}

.chb-btn:hover{
  background:#B38864 !important;
  color:#fff !important;
}

.chb-btn:active{ transform:translateY(1px); }

/* =====================
   MOBILE
   ===================== */
@media (max-width:520px){
  .chb-form-wrap{ padding:18px; }

  .chb-title{ font-size:16px; }
  .chb-sub{ font-size:13px; }

  .chb-price-amount{ font-size:18px; }
  .chb-price-unit{ font-size:11px; }

  .chb-grid{ gap:10px; }

  

  .chb-field input{
    height:40px;
    font-size:13px;
    padding:0 12px;
  }

  .chb-icon{
    width:15px;
    height:15px;
    left:10px;
  }
}