/* ==== BASE STYLES ==== */
body {
  font-family:"Poppins",sans-serif;
  background:#f8fafc;
  margin:0;
  padding:2rem;
  color:#1e293b;
  display:flex;
  justify-content:center;
}

h1 {
  text-align:center;
  color:#0f172a;
  margin-bottom:20px;
}

.container {
  display:flex;
  flex-direction:column;
  gap:20px;
  align-items:center;
  width:100%;
  max-width:700px;
}

.card {
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  padding:15px;
  border-radius:12px;
  background:#fff;
  box-shadow:0 4px 12px rgba(0,0,0,0.1);
  width:100%;
  text-align:left;
}

input[type="text"], input[type="number"], select {
  width:100%;
  padding:6px 10px;
  border:1px solid #cbd5e1;
  border-radius:8px;
  font-size:0.95rem;
  box-sizing:border-box;
  text-align:left;
}

.input-with-unit {
  display:flex;
  align-items:center;
  gap:6px;
}

.input-with-unit span { margin-left:4px; }

.time-inputs {
  display:flex;
  gap:6px;
  align-items:center;
}

.time-inputs input { width:60px; }

.addons .addon-group label {
  display:flex;
  align-items:center;
  gap:6px;
  margin:4px 0;
  cursor:pointer;
  font-weight:600;
}

.addons .addon-group input[type="checkbox"] {
  margin:0;
  transform:scale(1.2);
}

.kiraBtn {
  width:100%;
  padding:10px;
  font-weight:bold;
  background:#f97316;
  color:#fff;
  border-radius:8px;
}

.kiraBtn:hover { background:#ea580c; }

.hargaButtons {
  display:flex;
  gap:6px;
  justify-content:center;
}

.hargaButtons button {
  flex:1;
  padding:8px 0;
  font-size:1rem;
  font-weight:bold;
  text-transform:uppercase;
  background:#2563eb;
  color:#fff;
  border-radius:8px;
}

.hargaButtons button:hover { background:#1e40af; }

.formula-container {
  margin-top:10px;
  padding:10px;
  background:#fef3c7;
  border-radius:10px;
  border:1px solid #fcd34d;
  text-align:center;
}

.hargaAkhir {
  display:flex;
  justify-content:space-between;
  padding:6px 10px;
  border-radius:10px;
  background:#dbeafe;
  font-weight:bold;
  font-size:1rem;
}

.kosBtn {
  width:20px;
  height:20px;
  border-radius:50%;
  background-color:#22c55e;
  border:none;
  cursor:pointer;
}

.kos-wrapper {
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:6px;
  justify-content:center;
}

.manage-section ul {
  list-style:none;
  padding-left:0;
}

.manage-section li {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin:4px 0;
  padding:0 6px;
}

.manage-section input[type="number"] {
  width:80px;
  text-align:left;
}

.manage-tambahan label {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin:4px 0;
}

.deleteBtn {
  background:#ef4444;
  color:#fff;
  padding:2px 6px;
  border-radius:4px;
  cursor:pointer;
  font-size:0.85rem;
}

.manage-filament input#filamentBaru {
  width:120px;
}

/* ==== MEDIA QUERY PHONE ==== */
@media (max-width:600px){

  body {
    padding:1rem;
  }

  .container {
    gap:15px;
    width:95%;
  }

  .card {
    padding:12px;
    font-size:0.9rem;
  }

  .input-with-unit {
    flex-direction: column;
    align-items: flex-start;
  }

  .input-with-unit span {
    margin-left:0;
    margin-top:2px;
  }

  .time-inputs {
    flex-direction: column;
    align-items: flex-start;
  }

  .time-inputs input {
    width:100%;
  }

  .hargaButtons {
    flex-direction: column;
  }

  .hargaButtons button {
    width:100%;
  }

  .manage-tambahan label,
  .manage-filament label {
    flex-direction: column;
    align-items: flex-start;
  }

  .manage-section input[type="number"],
  .manage-section input[type="text"] {
    width:100%;
    margin-top:4px;
  }

  .kiraBtn {
    font-size:0.95rem;
    padding:10px 0;
  }

  .formula-container {
    font-size:0.9rem;
    padding:8px;
  }
}


/* ==== COMPACT PHONE LAYOUT ==== */
@media (max-width:600px){

  body {
    padding:0.8rem;
  }

  .container {
    gap:10px;
    width:100%;
  }

  .card {
    padding:10px;
    font-size:0.88rem;
  }

  .input-with-unit {
    flex-direction: column;
    align-items: flex-start;
    gap:2px;
  }

  .input-with-unit span {
    margin-left:0;
    margin-top:0;
    font-size:0.85rem;
  }

  .time-inputs {
    flex-direction: column;
    gap:4px;
  }

  .time-inputs span {
    font-size:0.85rem;
  }

  .time-inputs input {
    width:100%;
  }

  .hargaButtons {
    flex-direction: column;
    gap:4px;
  }

  .hargaButtons button {
    width:100%;
    font-size:0.88rem;
    padding:6px 0;
  }

  .manage-tambahan label,
  .manage-filament label {
    flex-direction: column;
    align-items: flex-start;
    gap:2px;
  }

  .manage-section input[type="number"],
  .manage-section input[type="text"] {
    width:100%;
    font-size:0.88rem;
    margin-top:2px;
  }

  .kiraBtn {
    font-size:0.88rem;
    padding:8px 0;
  }

  .formula-container {
    font-size:0.88rem;
    padding:6px;
  }

  .hargaAkhir {
    font-size:0.88rem;
    padding:4px 6px;
  }

  .deleteBtn {
    font-size:0.75rem;
    padding:2px 4px;
  }
}